CSS Spirte就是所谓的把很多的小图标合并成一张大的图片，，然后使用CSS的background-position属性，来动态的定位自己需要图标的位置。这样做的目的主要是减少HTTP请求，加快网页的加载速度。
图片
需要的结果：
多余的话就不多说了具体的实现都已经写在了代码中，并且对于重点都进行了注释。如果有问题可以留言哈！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns="" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>css_spirte</title><style type="text/css">div ul{ margin:0;padding:0;}#body_father ul {list-style:none;}#body_father{width:150px;background-color:#f8f8f8;border: 1px solid #bbb;}#body_father li{/*display:block;li本身就为块级元素*/height:31px;line-height:31px;overflow:hidden;border-bottom:1px solid #dedede;}li i {background:url(img/css_spirte.png);width:30px;height:24px;/*display:inline;i标签自身就为行内元素*/float:left; /*因为h4是块级元素默认会换行，i标签浮动脱离文档流，h4标签占用i标签位置*/margin:3px 10px 0 0;}li h4 {font-size:14px;font-weight: 400px;}/*h4为块级元素默认的重置margin,padding*/h4{margin:0;padding:0;}/*为每一个i标签设置图片位置的偏移量*/.item_li1 i{background-position:0 0;}.item_li2 i{background-position:0 -24px;}.item_li3 i{background-position:0 -48px;}.item_li4 i{background-position:0 -72px;}.item_li5 i{background-position:0 -96px;}.item_li6 i{background-position:0 -120px;}.item_li7 i{background-position:0 -144px;}.item_li8 i{background-position:0 -168px;}.test{background-color:#CEE506;}</style></head><body><div><ul><li class="item_li1"><i>ceshi</i><h4>你是好的1</h4></li><li class="item_li2"><i></i><h4>你是好的2</h4></li><li class="item_li3"><i></i><h4>你是好的3</h4></li><li class="item_li4"><i></i><h4>你是好的4</h4></li><li class="item_li5"><i></i><h4>你是好的5</h4></li><li class="item_li6"><i></i><h4>你是好的6</h4></li><li class="item_li7"><i></i><h4>你是好的7</h4></li><li class="item_li8"><i></i><h4>你是好的8</h4></li></ul></div><div><i class="test">测试</i><h4>测试h4git</h4></div></body></html>
学做任何事得按部就班，急不得
