10.10培训

最新推荐文章于 2025-09-27 08:15:00 发布

原创最新推荐文章于 2025-09-27 08:15:00 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#导航栏固定 #短横线

培训博客专栏收录该内容

4 篇文章

订阅专栏

本文分享了前端开发中实用技巧，包括使用CSS固定导航栏于页面顶部，添加美观的短横线分割内容，以及在圆形图片外围添加圈并精准定位的方法。

培训

岳学长讲的特别好，尤其是那个快捷键用的，让我跟不上学长的操作。羡慕，想学。有个地方不懂希望学长以后上课的时候可以补充补充，就是浏览器的F12功能，学长讲的再细一点就好了，感觉如果会用的话，写网页会更方便些。

作业

这次的作业也很难，但有了一些基础后感觉更得心应手了。知道先把大概的框架构造好、把html写好，再加CSS样式，努力的一步一步让网页逼近样图的样子。
这次的作业有几个难点：
一：如何把导航栏固定在页面顶端
二：如何添加一条短的横线
三：如何在一个圆形图片的外面加一个圈，并使这个圈在一条线的中央
解决方法：
1.给导航栏添加样式：

#nav{
position:fixed;
top:0;
background-color:#fff;
}

这里的position:fixed;就是让导航栏固定，
但是但是固定后会发现导航栏上方会有空白部分，所以我们要加top:0;
且这个导航栏的背景是透明的，这样会显示下方元素，所以我们要加上background-color:#fff;使它的背景为白色，
但使用fixed后，导航栏脱离了文档流，不占据页面的空间，导致下方的元素会补上来，所以我们要在下一个元素加上margin-top样式，或者用JavaScript解决这个问题。
2.添加短横线分割内容，让页面美观：

<hr width="" color="">

#text{
border-top: solid #F5F5F5 2px;
}

这里我们使用hr标签，并给其加上宽度和颜色要求；或者给一个块添加border-top样式：solid表示添加的边框为实线，#F5F5F5表示其颜色为白烟色，2px表示他的宽度。这样就可以添加一个美观的短横线。
3.尝试一些骚操作：

#img{
border: solid #F5F5F5 2px;
border-radius:99px;
background-color: #fff;
padding:15px;
posittion:relative;
top:60px;
}

我们可以在圆形图片上加上边框，并使边框的弧度很大，变成一个圆，且给图片一个内间距，让边框与图片分开，再使用position:relative;把图片定位到一个hr标签上即可实现要求。