前面我学习了一段时间的HTML和CSS知识，下面我们来运用知识实现一个简单的水平一级导航栏。
实现结果
按步骤一步步来：
1 首先我们写出它的HTML部分。
HTML部分代码
这里是在<div>中使用三个<a>标签，为了方便我没有使用<p>或者<ul>.
2 写出css部分。
*{
padding: 0;
margin: 0;
}
#nav{
width: 300px;
margin: 100px auto;
font-size: 0;
}
a{
display: inline-block;
width: 80px;
height: 30px;
font-size: 14px;
text-align: center;
line-height: 30px;
text-decoration: none;
border-bottom: 1px solid #ccc;
}
a:hover{
color: while;
background-color:#ccc;
border: 1px solid;
border-left-color: orange;
border-top: orange;
border-right-color: orange;
}
(1)首先写*{}里的内容将全局边框设置为0（这是一个需要注意的习惯）
(2)#nav里设置导航栏的宽度以及外边框属性（此处font-size=0是为了防止每个超链接选项出现间隙，你可以删除此项对比效果）
(3)为了能够改变里的高度和宽度，我们首先让display：inline-block；这里是重点，因为属于inline类型不能够改变高度和宽度，只有转换类型为inline-block才能够改变。
(4)设置鼠标放在超链接上的状态，这里就不详细讲解。
完整代码放在下面：（为了方便大家浏览，将css与html代码写在了一起）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DaoHang</title>
<style>
*{
padding: 0;
margin: 0;
}
#nav{
width: 300px;
margin: 100px auto;
font-size: 0;
}
a{
display: inline-block;
width: 80px;
height: 30px;
font-size: 14px;
text-align: center;
line-height: 30px;
text-decoration: none;
border-bottom: 1px solid #ccc;
}
a:hover{
color: while;
background-color:#ccc;
border: 1px solid;
border-left-color: orange;
border-top: orange;
border-right-color: orange;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">唱</a>
<a href="#">跳</a>
<a href="#">rap</a>
</div>
</body>
</html>
本文转载自: https://blog.csdn.net/m0_58291075/article/details/128373618
版权归原作者 .ciao. 所有， 如有侵权，请联系我们删除。
版权归原作者 .ciao. 所有， 如有侵权，请联系我们删除。