寫一個簡單的導航
制作一個如下圖的導航按鈕。當鼠標移入導航欄的首頁，商店等字體時，前面的小圖標和字顏色一起變紅！代碼如下：
<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做好的，我們只需要用背景定位就可以實現鼠標移入切換圖片。
寫一個簡單的導航