原理：通过CSS图片背景的position定位，来实现图片导航；
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
border: 1px solid red;
float: right;
}
li {
margin-right: 20px;
float: left;
list-style: none;
}
a {
text-decoration: none;
width: 40px;
height: 20px;
display: block;
}
.book {
background: url("../../image/anony_nav_logo4.png") 0 0 no-repeat;
}
.movie {
background: url("../../image/anony_nav_logo4.png") -60px 0 no-repeat;
}
.music {
background: url("../../image/anony_nav_logo4.png") -120px 0 no-repeat;
}
.group {
background: url("../../image/anony_nav_logo4.png") -180px 0 no-repeat;
}
.fm {
width: 80px;
background: url("../../image/anony_nav_logo4.png") -240px 0 no-repeat;
}
.local {
background: url("../../image/anony_nav_logo4.png") -340px 0 no-repeat;
}
.place {
background: url("../../image/anony_nav_logo4.png") -400px 0 no-repeat;
}
</style>
</head>
<body>
<ul>
<li><a class="book" href=""></a></li>
<li><a class="movie" href=""></a></li>
<li><a class="music" href=""></a></li>
<li><a class="group" href=""></a></li>
<li><a class="fm" href=""></a></li>
<li><a class="local" href=""></a></li>
<li><a class="place" href=""></a></li>
</ul>
</body>
</html>
原文：http://www.cnblogs.com/lidongrain/p/4967221.html