大家好，又见面了，我是你们的朋友全栈君。
导航条的制作HTML代码：
<nav>
<ul>
<li>
<a href=”#”></a>
</li>
<li>
<a href=”#”></a>
</li>
</ul>
</nav>
以上是导航条制作的基本格式，接下来是css样式
去除li带来的小黑点:
li{
list-style: none;
}
将nav设置一个合适的宽，高度由内容去撑开，只需要设置margin：auto将整个导航栏居中
将a标签的下划线去掉： text-decoration: none;
将导航条中<li>的内容设置样式：
.link li{
float: left; ————把内容左浮动，这样可以横向排列
width: 100px;——设置每个li的宽
height: 30px;——设置每个li的高
background-color:pink ——设置li的背景颜色为粉色
border: 1px solid #6495ED; ——设置li的边框颜色以及边框大小
text-align: center;——设置li中的文字样式为居中
line-height: 30px;——设置li中文字举例上边框的高度
}
.link li:hover{ ————设置将鼠标放到li时的背景颜色
background-color: aqua;
}
.link li:hover a{ ————设置将鼠标放到li中的a标签的内容时的文字颜色
color: black;
}
最终特效是：
转载于:https://www.cnblogs.com/hzqzwl/p/11180300.html
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/163187.html原文链接：https://javaforall.net
