<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<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;
????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>
<ul>
<li?calss="cat-1">
<i></i>
<h3>服裝內衣</h3>
</li>
<li?calss="cat-2">
<i></i>
<h3>鞋包配飾</h3>
</li>
<li?calss="cat-3">
<i></i>
<h3>運動戶外</h3>
</li>
<li?calss="cat-4">
<i></i>
<h3>手機數碼</h3>
</li>
<li?calss="cat-5">
<i></i>
<h3>人妻小孩</h3>
</li>
<li?calss="cat-6">
<i></i>
<h3>男士用品</h3>
</li>
<li?calss="cat-7">
<i></i>
<h3>女士用品</h3>
</li>
<li?calss="cat-8">
<i></i>
<h3>小孩用品</h3>
</li>
<li?calss="cat-9">
<i></i>
<h3>嬰兒用品</h3>
</li>
</ul>
</div>
</body>
</html>
2018-05-27
<li?calss="cat-9"><i></i><h3>嬰兒用品</h3></li>這里單詞寫錯啦? class 寫成calss了2017-07-20
.cat i{background:url()},把i加到.cat下