标签：round black margin lin http width alt 20px 首页
制作一个如下图的导航按钮。当鼠标移入导航栏的首页，商店等字体时，前面的小图标和字颜色一起变红！代码如下：
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="zy.css">
</head>
<body>
<div class="daohang">
<nav>
<ul>
<li><i></i>
<a href="#">首页</a></li>
<li><i></i>
<a href="#">商店</a></li>
<li><i></i>
<a href="#">乐园</a></li>
<li>
<img src="img/b_logo.png" ></li>
<li><i></i>
<a href="#">影视</a></li>
<li><i></i>
<a href="#">数码</a></li>
<li><i></i>
<a href="#">会员</a></li>
</ul>
</nav>
<img src="img/160216172223655101.jpg" >
</div>
</body>
</html>
css代码如下：
*{
margin: 0;
padding: 0;
}
.daohang{
width: 1200px;
/*height: 108px;*/
margin: auto;
/*border: 1px solid;*/
margin-top: 20px;
}
nav ul{
display: block;
}
nav li{
list-style: none;
float: left;
width: 14.27%;
line-height: 46px;
text-align: center;
}
.daohang nav ul li a {
text-decoration: none;
font-weight: bold;
color: black;
}
li i{
background: url("img/icon.png");
display: inline-block;}
li:nth-child(1) i{
width: 22px;
height: 20px;
/*background: url("img/icon.png");*/
}
li:nth-child(2) i{
width: 22px;
height: 20px;
background-position: 0px -20px;
}
li:nth-child(3) i{
width: 22px;
height: 20px;
background-position: 0px -40px;
}
li:nth-child(5) i{
width: 22px;
height: 18px;
background-position: 0px -63px;
}
li:nth-child(6) i{
width: 22px;
height: 20px;
background-position: 0px -80px;
}
li:nth-child(7) i{
width: 22px;
height: 20px;
background-position: 0px -102px;
}
nav ul li:hover a {
color: red;
}
nav ul li:hover:nth-child(1) i{
background-position:-22px 0;
}
nav ul li:hover:nth-child(2) i{
background-position:-22px -20px;
}
nav ul li:hover:nth-child(3) i{
background-position:-22px -40px;
}
nav ul li:hover:nth-child(5) i{
background-position:-22px -63px;
}
nav ul li:hover:nth-child(6) i{
background-position:-22px -80px;
}
nav ul li:hover:nth-child(7) i{
background-position:-22px -102px;
}导航栏的图片都是UI做好的，我们只需要用背景定位就可以实现鼠标移入切换图片。
标签：round black margin lin http width alt 20px 首页
原文地址：http://www.cnblogs.com/dzlduoduo/p/6921714.html
