雪碧图的原理：用同一张图片的不同位置，实现减少http请求的减少
<!DOCYTYPE html>
<html lang="en">
<html>
<HEAD>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
.list{
list-style: none;
width: 300px;
height: 305px;
margin: 50px auto 0;
padding: 0;
}
.list li{
height: 60px;
border-bottom:1px dotted #000;
line-height: 60px;
text-indent: 50px;
background:url(images/bg01.png) 0px 10px no-repeat;
}
.list .icon2{
background-position: left -71px;
}
.list .icon3{
background-position: left -154px;
}
.list .icon4{
background-position: left -235px;
}
.list .icon5{
background-position: left -315px;
}
</style>
</HEAD>
<BODY>
<ul class="list">
<li>1111</li>
<li class="icon2">2222</li>
<li class="icon3">3333</li>
<li class="icon4">4444</li>
<li class="icon5">5555</li>
</ul>
</BODY>
</html>
其中序号是一张图达到效果