[Front-end] El tercer día de hacer un blog personal

Con base en los conocimientos previos, dibujar el modelo básico del blog.

Escriba la posición de la cabeza hoy 博客名, antes de eso, aprenda cómo poner iconos iconfont, vea los siguientes casos

1. fuente de icono de búsqueda
2. Encuentra tu icono favorito en iconfont y descárgalo
3. Pon el icono en nuestra página web

representaciones finales

// 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);
}