移动端使用“雪碧图”

一张290*290的图片：

 html结构：

<div class="test">
    <ul class="clear">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

css代码：

 1 .test{
 2     margin-right: auto;
 3     margin-left: auto;
 4     width: 4.0rem;//300px
 5     li{
 6         width: 1.2rem;//90px
 7         height: 1.2rem;
 8         float: left;
 9         background: url(http://cres.fenqile.com/res/sale/2016032404/img/test.jpg) no-repeat;
10         background-size: 3.866667rem 3.866667rem;//290px
11         margin: 0.066667rem;//5px
12     }
13     li:nth-child(1){
14         background-position: -0.066667rem -0.066667rem;//-5px -5px
15     }
16     li:nth-child(2){
17         background-position: -1.333333rem -0.066667rem;//-100px -5px
18     }
19     li:nth-child(3){
20         background-position: -2.6rem -0.066667rem;//-195px -5px
21     }
22     li:nth-child(4){
23         background-position: -0.066667rem -1.333333rem;
24     }
25     li:nth-child(5){
26         background-position: -1.333333rem -1.333333rem;
27     }
28     li:nth-child(6){
29         background-position: -2.6rem -1.333333rem;
30     }
31     li:nth-child(7){
32         background-position: -0.066667rem -2.6rem;
33     }
34     li:nth-child(8){
35         background-position: -1.333333rem -2.6rem;
36     }
37     li:nth-child(9){
38         background-position: -2.6rem -2.6rem;
39     }
40 }

网页结果呈现：

 

 

 

posted @ 2016-03-25 18:19  DuangDang  阅读(713)  评论(0)  编辑  收藏  举报