css导航美化 |动态加载css js

<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">联系大家</a></li>
</ul>

大家先在HTML中创建一个无序列表，列表项是导航菜单项，每个菜单项中包含一个链接。

.nav {
list-style: none;
display: flex;
justify-content: space-between;
background-color: #333;
padding: 10px;
margin: 0;
font-size: 16px;
}
.nav li a {
color: #fff;
text-decoration: none;
padding: 10px;
}
.nav li a:hover {
background-color: #fafafa;
color: #333;
}

接下来，大家使用CSS来美化导航。首先，大家设置无序列表的样式：去掉圆点符号，将列表项横向排列，并让它们之间的间距相等。大家还为导航添加了背景色和内边距。

然后，大家设置链接的样式，包括字体颜色、文本装饰和内边距。当鼠标悬停在链接上时，大家让背景色变为白色，字体颜色变为黑色。

通过以上的CSS代码，大家可以构建一个简单而美观的导航菜单。当然，你可以根据自己的需要进一步调整样式，创造一个与众不同的导航。