【フロントエンド】個人ブログ作成3日目

以前の知識に基づいて、ブログの基本モデルを描きます

今日の頭の位置を書いて博客名ください。その前に、アイコンフォントアイコンの配置方法を学びましょう。次のケースを参照してください。

1. iconfontを検索
2. iconfontでお気に入りのアイコンを見つけてダウンロードしてください
3. 私たちのウェブページにアイコンを置きます

最終レンダリング

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