一、原理
实现原理：CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。
二、具体实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪碧图实现原理</title>
</head>
<style>
ul,h3{
margin: 0;
padding: 0;
}
h3{
display: block;
margin: 0;
padding: 0;
}
.cat{
position: relative;
width: 150px;
background-color: #f8f8f8;
border: 1px solid #bbb;
}
li{
z-index: 2;
position: relative;
display: block;
height: 31px;
line-height: 31px;
overflow: hidden;
margin: 1px 10px 0;
vertical-align: bottom;
border-bottom: 1px solid #dedede
}
li:hover{
background-color:#666666;
}
li h3{
font-size: 13px;
font-weight: 400;
}
li i{
display: inline;
float:left;
margin: 3px 10px 0 0;
height: 24px;
width: 30px
}
/* 在这里补充雪碧图的样式 */
li>i{
background:url('http://img.mukewang.com/539a950e00015ba500710200.jpg');
}
.cat-2>i{
background-position:0 -24px;
}
.cat-3>i{
background-position:0 -48px;
}
.cat-4>i{
background-position:0 -72px;
}
.cat-5>i{
background-position:0 -96px;
}
.cat-6>i{
background-position:0 -120px;
}
.cat-7>i{
background-position:0 -144px;
}
.cat-8>i{
background-position:0 -168px;
}
</style>
<body>
<div class="cat">
<ul>
<li class="cat-1"><i></i><h3>服装内衣</h3></li>
<li class="cat-2"><i></i><h3>鞋包配饰</h3></li>
<li class="cat-3"><i></i><h3>运动户外</h3></li>
<li class="cat-4"><i></i><h3>珠宝手表</h3></li>
<li class="cat-5"><i></i><h3>手机数码</h3></li>
<li class="cat-6"><i></i><h3>家电办公</h3></li>
<li class="cat-7"><i></i><h3>护肤彩妆</h3></li>
<li class="cat-8"><i></i><h3>母婴用品</h3></li>
</ul>
</div>
</body>
</html>
