DaZeng：雪碧图（精灵图）的使用

雪碧（精灵）图

要求显示效果：（轮播图导航栏效果）

页面结构：

<ul class="list-box">
     <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
</ul>

样式：

.list-box>li{
    float: left;
    width: 70px;
    height: 65px;
    background-image: url(./img/daohang.png);
    background-position:0 0;
    background-repeat: no-repeat;
}
.list-box>li:nth-child(2){
    background-position-x: -100px;
}
.list-box>li:nth-child(3){
    background-position-x: -210px;
}
.list-box>li:nth-child(4){
    background-position-x: -310px;
}
.list-box>li:nth-child(5){
    background-position-x: -395px;
}

.list-box>li:hover{
    background-position-y: -110px;
}

实现原理：每个li背景图都为同一张，对应li给一个宽高width: 70px;height: 165px;先显示第一行，在不设置background-position-x时，默认显示第一行图片。
相当于每个背景图都是叠着放置的：

故：移动背景图片background-position-x即可改变对应可视区域的图像。