您的位置：首页 > Web前端 > CSS

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

2015-04-28 22:58 519 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航