w3c官网的原版导航条
image.png
练习出来的导航条
image.png
代码：
<title>导航条</title>
<link rel="stylesheet" href="../CSS/reset.css">
<style>
*{
padding: 0px;
margin: 0px;
}
.nav{
width:1210px;
height: 48px;
background-color: #E8E7E3;
/* 第一个值是上下 第二个值是水平 */
margin: 50px auto;
}
.nav a{
/* 将元素设置成块元素 */
display: block;
/* 去除下划线 */
text-decoration: none;
color: #777777;
font-size: 18px;
padding: 0 39px;
}
.nav li{
float: left;
/* 将文字在父元素中垂直居中
数值和父元素的高相等
*/
line-height: 48px;
}
/* 设置鼠标移入效果 */
.nav a:hover{
background-color: #3E3E3E;
color: #E7E6E2;
}
/* 调整最后一项的宽度 */
.nav li:last-child a{
padding: 0 42px 0 41px;
}
</style>
</head>
<body>
<!-- 创建导航条主体部分 -->
<div class="nav">
<ul>
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Browser Side</a>
</li>
<li>
<a href="#">Server Side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">XML</a>
</li>
<li>
<a href="#">Web Building</a>
</li>
<li>
<a href="#">Reference</a>
</li>
</ul>
</div>
</body>
网友评论