<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<!-- 去除浏览器默认样式 -->
<link rel="stylesheet" href="../../reset_style/reset.css">
<title>0000</title>
<style>
a{
text-decoration: none;
color: #808080;
}
div{
margin: 200px auto;
}
.nav{
width: 1208px;
height: 48px;
background-color: rgb(228, 226, 226);
/* 临时居中的方法 */
margin: 200px auto;
}
.nav li{
/* 左浮动 */
float: left;
}
.nav a{
/* 设置行高,使文字垂直居中 */
line-height: 48px;
/* 将行内元素转换成块元素,目的当鼠标触及到目标周围是,都有效*/
display: block;
/* 使链接在导航栏中分散开 */
padding: 0px 59px;
}
.nav li:nth-child(4) a{
/*最后多出8个像素,使第4个a的背景颜色的宽度加四,将其覆盖 */
padding: 0px 61px;
}
.nav a:hover{
color: #E8E7E3;
background-color: #3F3F3F;
}
</style>
</head>
<body>
<div>
<ul class="nav">
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">Browser Side</a></li>
<li><a href="javascript:;">Programming</a></li>
<li><a href="javascript:;">XML</a></li>
<li><a href="javascript:;">Web Building</a></li>
<li><a href="javascript:;">reference</a></li>
</ul>
</div>
</body>
</html>
效果图: