【前端】制作个人博客第三天

最新推荐文章于 2025-08-22 14:03:02 发布

原创最新推荐文章于 2025-08-22 14:03:02 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #css3

前端专栏收录该内容

23 篇文章

订阅专栏

这篇博客介绍了如何将Iconfont图标整合到网页头部设计中，创建了一个包含博客头像、博客名、搜索栏和音乐模块的基本布局。通过下载喜欢的icon并将其引入到HTML中，实现了个性化头部效果。CSS样式用于调整元素的显示方式和布局。

根据前面的知识，绘制出博客基本模型

在这里插入图片描述

今天把头部的博客名 位置写好，在这之前，学习下如何放入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);
}