2.2、代码如下
雪碧图的制作.box{
background-color: yellow;
width: 300px;
height: 315px;
list-style: none;
margin: 50px auto 0;
padding: 0px;
}
.box li{
height: 60px;
border-bottom: 1px dotted #000000;
line-height: 60px;
text-indent: 50px;
background: url(images/bg01.png) 0px 10px no-repeat;
}
.box .icon2{
background-position: 0px -71px;
}
.box .icon3{
background-position: 0px -154px;
}
.box .icon4{
background-position: 0px -235px;
}
.box .icon5{
background-position: 0px -315px;
}
- 飞驰人生
- 飞驰人生
- 飞驰人生
- 飞驰人生
- 飞驰人生
分析:5个 li 本来要加载5张图片,由于我们使用的雪碧图在重复利用,改变的是同一张图片的 background-position,从而减少请求来获取图片的效果