我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
👨🎓作者简介：一位喜欢写作，计科专业大三菜鸟
🏡个人主页：starry陆离
🕒首发日期：2022年9月20日星期二
🌌上期文章：16个实用的CSS样式之视觉差滚动
📚订阅专栏：『16个实用的CSS样式』
1.简介
对于初学前端的小白来说css样式的设计很考验基本功和创意想法，而在项目开发中我们不可能将大部分的时间用于CSS代码的编写，能复用的就复用。因此我特意总结了16个在项目开发中常用的CSS样式，因为自己也是初学者，所以以小白的视角来记录和学习这16款样式的设计与编写。今天我为大家带来的是页面导航栏
来看一下最终效果吧！！！
2.布局设计
首先我们设计好布局，一般网页顶部的导航栏我们都是通过列表标签来创建一组序列，实际开发中点击这些导航栏是能跳转到不同的界面的，所以我们包裹着超链接标签。代码如下：
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">服务介绍</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<div class="slider"></div>
</ul>
</nav>
</header>
</body>
我们预览一下此时网页的渲染效果。
3.样式美化
3.1排列方式
首先我们要调整一下标签的排列方式，预期的效果导航栏是水平排列的，这里我们肯定都能想到用盒子模型，通过盒子模型能过很方便的设置子元素的排列方向。
nav {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
ul {
position: relative;
display: flex;
}
ul li {
list-style: none;
width: 120px;
line-height: 40px;
text-align: center;
}
此时可以预览到页面效果是这样的：（这里我为了显示的效果，给body标签设置了一个暗系的背景色）
可以看到这里的文字颜色是紫色的，而且有下划线，我们可以通过：
text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。
text-decoration-line：文本修饰的位置，如下划线underline，删除线line-throughtext-decoration-color：文本修饰的颜色text-decoration-style：文本修饰的样式，如波浪线wavy实线solid虚线dashedtext-decoration-thickness：文本修饰线的粗细
通过text-decoration不设置文字的样式即可去除下划线了。
ul li a {
color: white;
text-decoration: none;
}
3.2hover高亮
hover属性也是我们常用的，通过用户鼠标移入到元素上出发样式。
除了设置好.slider选择器的样式，我们还通过li:nth-child(n)取到第n个li标签
:nth-child(an+b) 这个 CSS 伪类]首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序。
.slider {
width: 100px;
height: 40px;
background-color: #5352ed;
border-radius: 4px;
position: absolute;
left: 10px;
bottom: 0;
z-index: -1;
transition: all ease 0.4s;
animation: 2s ease-in-out waves infinite;
}
li:nth-child(1):hover ~ .slider {
left: 10px;
}
li:nth-child(2):hover ~ .slider {
left: 128px;
}
li:nth-child(3):hover ~ .slider {
left: 248px;
}
li:nth-child(4):hover ~ .slider {
left: 368px;
}
li:nth-child(5):hover ~ .slider {
left: 488px;
}
3.3动画帧
最后我们为了美化动画效果，我们通过clip-path裁剪slider制作两组动画帧，从而实现液体流动的效果，没什么技术性，只是比较繁琐，理解动画帧的制作即可。关于动画帧的制作在之前的文字中有学习，就不赘述：16个实用的CSS样式之文本填充
@keyframes waves {
from {
clip-path: polygon(
0% 17%,
9% 10%,
18% 4%,
30% 0%,
43% 1%,
49% 4%,
57% 7%,
66% 10%,
78% 11%,
89% 11%,
96% 9%,
100% 7%,
100% 100%,
0% 100%
);
}
50% {
clip-path: polygon(
0% 4%,
6% 9%,
13% 13%,
23% 15%,
31% 16%,
42% 15%,
49% 13%,
61% 10%,
71% 5%,
81% 3%,
90% 2%,
100% 5%,
100% 100%,
0% 100%
);
}
to {
clip-path: polygon(
0% 17%,
9% 10%,
18% 4%,
30% 0%,
43% 1%,
49% 4%,
57% 7%,
66% 10%,
78% 11%,
89% 11%,
96% 9%,
100% 7%,
100% 100%,
0% 100%
);
}
}
4.结语
到此为止一个简单的页面导航栏就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得点赞支持哈。
