CSS_Spirte实现原理_html/css_WEB-ITnose

CSS Spirte就是所谓的把很多的小图标合并成一张大的图片，然后使用CSS的background-position属性，来动态的定位自己需要图标的位置。这样做的目的主要是减少HTTP请求，加快网页的加载速度。

图片

需要的结果：

多余的话就不多说了具体的实现都已经写在了代码中，并且对于重点都进行了注释。如果有问题可以留言哈！

    <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>    <div id="body_father">        <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>