css导航样式练习 |css百分比

.nav {
list-style: none;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
}
.nav li {
margin: 0 10px;
}
.nav a {
text-decoration: none;
color: #000;
font-weight: bold;
}
.nav a:hover {
text-decoration: underline;
}

以上是一个简单的导航菜单样式，通过 display: flex 和 justify-content: center 让导航居中显示，margin 和 padding 设置为 0 实现无边距效果。在 li 元素中设置 margin 为 0 10px 实现菜单项之间的间距。nav a 链接样式为黑色粗体，鼠标悬停时下划线。

.nav--slide {
position: relative;
}
.nav--slide::before {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 100%;
height: 2px;
background-color: #000;
transform: scaleX(0);
transition: transform 0.2s ease;
}
.nav--slide a:hover::before {
transform: scaleX(1);
}

另一种常见的导航菜单样式是滑动下划线效果，以上代码实现了这种效果。通过设置导航菜单容器为 position: relative，然后在导航链接伪元素中设置一个绝对定位的 before 元素，并设置宽度为 100%。通过 transform: scaleX(0) 将 before 元素的宽度设置为 0，然后鼠标悬停时将 transform: scaleX(1) 将 before 元素移动到链接文字下方，实现滑动下划线效果。

CSS导航样式练习是WEB前端学习中必不可少的一部分，通过多实践、体验，才能更好的掌握各种样式的实现方法，为网站设计提供更丰富的组件。