雪碧图//导航
图片在下方
<!DOCTYPE html>
<html>
<head>
<title>雪碧图</title>
<style>
body{background:black;margin:400px;}
li{margin-top:2px;}
#a1,#a2,#a3,#a4,#a5{width:40px;height:40px;
background:url("images/demo1/1.png");}
#a1{background-position:0% 0%;}
#a2{background-position:0px -202px;}
#a3{background-position:0px -240px;}
#a4{background-position:-80px -280px;}
#a5{background-position:0px -320px;}
#a1:hover{background-position:-40px 0px;}
#a2:hover{background-position:-40px -200px;}
#a3:hover{background-position:-40px -240px;}
#a4:hover{background-position:-120px -280px;}
#a5:hover{background-position:-40px -320px;}
</style>
</head>
<body>
<ul>
<li id="a1"></li>
<li id="a2"></li>
<li id="a3"></li>
<li id="a4"></li>
<li id="a5"></li>
<!-- <li id="a"></li> -->
</ul>
</body>
</html>
