<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<style>
*{margin:0;padding:0;}/*盒子模型都有默认的margin和padding值*/
.cat
{
width:180px;
border:1px solid #999;
box-shadow:0 0 5px #ccc;
border-radius:10px;
margin:10px auto;
}
.cat li{
list-style:none;
}
h3
{
font-weight:normal;
font-size:15px;
font-family:'微软雅黑';
}
.cat li a
{
display:block;
color:#000;
text-decoration:none;
padding:8px 0;
margin:0 8px;
border-bottom:1px solid #ccc;
}
.cat li a:hover{background:lavender;}
.cat li i
{
display:inline-block;
width:40px;
height:24px;
background:url(http://img.mukewang.com/539a950e00015ba500710200.jpg) no-repeat;
float:left;
margin-right:12px;
}
.cat2 li i
{
background-position:0 -48px;
}
.cat3 li i
{
background-position:0 -72px;
}
</style>
</head>
<body>
<div>
<ul class='cat'>
<li class='cat1'><a href="#"><i></i><h3>服装内衣</h3></a></li>
<li class='cat2'><a href="#"><i></i><h3>鞋包配饰</h3></a></</li>
<li class='cat3'><a href="#"><i></i><h3>运动户外</h3></a></li>
<li class='cat4'><a href="#"><i></i><h3>珠宝手表</h3></a></li>
<li class='cat5'><a href="#"><i></i><h3>书记数码</h3></a></li>
<li class='cat6'><a href="#"><i></i><h3>加电办公</h3></a></li>
<li class='cat7'><a href="#"><i></i><h3>护肤彩妆</h3></a></li>
<li class='cat8'><a href="#"><i></i><h3>母婴用品</h3></a></li>
</ul>
</div>
</body>
</html>
.cat2 li i的写法错误。改为.cat2 i