Done
Done
Chacetse
2014-12-13
1 回答
舉報(bào)
0/150
提交
取消
2014-12-13
舉報(bào)
2015-12-14
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<style>
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
margin: 0;
padding: 0;
}
h3 {
? ? display: block;
margin: 0;
padding: 0;
}
.cat {
? ? position: relative;
? ? width: 150px;
background: #f8f8f8;
border: 1px solid #bbb;
}
ol, ul {
list-style: none;
}
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 h3 {
? ? font-size: 14px;
? ? font-weight: 400;
}
li i {
? ? display: inline;
? ? float: left;
? ? margin: 3px 10px 0 0;
? ? height: 24px;
? ? width: 30px;
? ??
}
? /* 在這里補(bǔ)充雪碧圖的樣式 */
.cat i{background:url(http://img1.sycdn.imooc.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 class="cat-1">
? ? ? ? ? <i></i>
? ? ? ? ? <h3>服裝內(nèi)衣</h3>
? ? ? ? </li>
? ? ? ? <li class="cat-2">
? ? ? ? ? <i></i>
? ? ? ? ? <h3>鞋包配飾</h3>
? ? ? ? </li>
? ? ? ? <li class="cat-3">
? ? ? ? ? <i></i>
? ? ? ? ? <h3>運(yùn)動(dòng)戶(hù)外</h3>
? ? ? ? </li>
? ? ? ? <li class="cat-4">
? ? ? ? ? <i></i>
? ? ? ? ? <h3>珠寶手表</h3>
? ? ? ? ?
? ? ? ? </li>
? ? ? ? <li class="cat-5">
? ? ? ? ? <i></i>
? ? ? ? ? <h3>手機(jī)數(shù)碼</h3>
? ? ? ? </li>
? ? ? ? <li class="cat-6">
? ? ? ? ? <i></i>
? ? ? ? ? <h3>家電辦公</h3>
? ? ? ? </li>
? ? ? ? <li class="cat-7">
? ? ? ? ? <i></i>
? ? ? ? ? <h3>護(hù)膚彩妝</h3>
? ? ? ? </li>
? ? ? ? <li class="cat-8">
? ? ? ? ? <i></i>
? ? ? ? ? <h3>母嬰用品</h3>
? ? ? ? </li>
? ? ? </ul>
? </div>
</body>
</html>