Fork me on GitHub

CSS_Spirte实现原理 分类： HTML+CSS 2015-04-28 22:58 531人阅读 评论(0) 收藏

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


图片



需要的结果：



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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 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 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>
</body>

</html>



版权声明：本文为博主原创文章，未经博主允许不得转载。

posted @ 2015-04-28 22:58  zhiqiang21  阅读(249)  评论(0)  编辑  收藏  举报