<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sidebar</title>
<style type="text/css">
*{margin: 0;padding: 0;font: normal 14px "微软雅黑";}
.cat{
margin: 30px 20px;
padding: 5px 10px;
width: 140px;
text-align: center;
position: relative;
list-style:none;
border: 1px solid #D1D1D1;
}
.cat li{
height: 30px;
line-height: 30px;
border-bottom:1px solid #D1D1D1;
padding: 10px 10px 0px 10px;
}
.cat8{
border-bottom: none;
}
.cat li i{
width:24px;
height:24px;
background: url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg);
float:left;
display: inline;
}
.cat1 i{background-position: 0 0px;}
.cat2 i{background-position: 0 -24px;}
.cat3 i{background-position: 0 -48px;}
.cat4 i{background-position: 0 -72px;}
.cat5 i{background-position: 0 -96px;}
.cat6 i{background-position: 0 -120px;}
.cat7 i{background-position: 0 -144px;}
.cat8 i{background-position: 0 -168px;}
</style>
</head>
<body>
<div>
<ul class="cat">
<li class="cat1"><i></i>服装内衣</li>
<li class="cat2"><i></i>鞋包配饰</li>
<li class="cat3"><i></i>运动户外</li>
<li class="cat4"><i></i>珠宝手表</li>
<li class="cat5"><i></i>手机数码</li>
<li class="cat6"><i></i>家电办公</li>
<li class="cat7"><i></i>护肤彩妆</li>
<li class="cat8"><i></i>母婴用品</li>
</ul>
</div>
</body>
</html>
