<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--准备一个空白的HTML页面，同时完成css reset样式 -->
<style>
h3,ul{
display: block;
margin:0;
padding:0;
}
ul{list-style:none;}
<!--补充完整的样式-->
li h3{
font-size:14px;
font-weight:400;
}
li{
position: relative;
display:block;
height:31px;
line-height:31px;
overflow:hidden;
margin: 1px 10px 0;
vertical-align: bottom;
border-bottom:1px solid #dedede;
}
li i{
background: url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg);
display: inline;
width: 30px;
height: 24px;
float: left;
margin: 3px 10px 0 0;
}
.cat{
position: relative;
width:150px;
background:#f8f8f8;
border:1px solid #bbb;
}
.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>
<ul class="cat">
<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>
慕函数9432024
2014-11-07
0 回答
举报
0/150
提交
取消
