<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8">
<title>雪碧图</title>
<style type="text/css">
*{margin:0;padding:0;}
.cat{width:150px;bakground:#f8f8f8;border:1px solid #bbb;}
ul{list-style:none;}
li{display:block;height:31px;line-height:31px;overflow:hidden;border-bottom: 1px solid #dedede;}
li h3{font-size:14px;display:block;font-weight:400;}
li i{display:inline;float:left;margin:3px 10px 0 0;height:24px;width:30px;background:url(http://img.mukewang.com/539a950e00015ba500710200.jpg);}
.cat-1 i{ background-position:0 0;}
.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>
</head>
<body>
<div class="cat">
<ul>
<li>
<i class="cat-1"></i>
<h3>服装内衣</h3>
</li>
<li>
<i class="cat-2"></i>
<h3>鞋包配饰</h3>
</li>
<li>
<i class="cat-3"></i>
<h3>运动户外</h3>
</li>
<li>
<i class="cat-4"></i>
<h3>珠宝手表</h3>
</li>
<li>
<i class="cat-5"></i>
<h3>手机数码</h3>
</li>
<li>
<i class="cat-6"></i>
<h3>家电办公</h3>
</li>
<li>
<i class="cat-7"></i>
<h3>护肤彩妆</h3>
</li>
<li>
<i class="cat-8"></i>
<h3>母婴用品</h3>
</li>
</ul>
</div>
</body>
</html>