根据前面的知识,绘制出博客基本模型
今天把头部的博客名
位置写好,在这之前,学习下如何放入iconfont图标,看以下案例
- 搜索iconfont
- 在iconfont中找到喜欢的icon并下载
- 将icon放入我们的网页中
最终效果图
// 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);
}