<head>
<meta?http-equiv="Content-Type"?content="text/html;charset=utf-8"/>
<!--準(zhǔn)備一個空白的HTML頁面，同時完成css?reset樣式?-->
<style>
h3,ul{
????display:?block;
????margin:0;
????padding:0;
}
ul{list-style:none;}????
<!--補(bǔ)充完整的樣式-->
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>
<!--添加列表的結(jié)構(gòu)-->
<div>
????<ul?class="cat">
????????<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)動戶外</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>
慕函數(shù)9432024
2014-11-07
0 回答
舉報(bào)
0/150
提交
取消
