[Front-end] The third day of making a personal blog

Based on the previous knowledge, draw the basic model of the blog

Write the position of the head today 博客名. Before that, learn how to put the iconfont icon, see the following case

1. search iconfont
2. Find your favorite icon in iconfont and download it
3. Put the icon in our web page

final renderings

// html
<div class="container">
     <div class="head">
         <!-- 今日任务 ↓ -->
         <div class="avatar">
             <img src="./image/首页.png" alt="">
             <div class="blog_name">博客名</div>
         </div>
         <!-- 今日任务 ↑ -->
         <div class="search">搜索栏</div>
         <div class="music">音乐兰</div>
     </div>
     <div class="left">侧边栏</div>
 </div>

// css
.head .avatar {
    
    
	
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(249, 249, 249);
}

.head .avatar img {
    
    
    width: 25px;
    height: 25px;
}

.head .avatar .blog_name {
    
    
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    background-color: rgb(249, 249, 249);
}