我哪里錯了呢？顯示的時候全部是小衣服，其他的圖標都不出現
<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;
? ? background:url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg);
}
? /* 在這里補充雪碧圖的樣式 */
.cat-1{background-position:0 0;}
.cat-2{background-position:0 -24px;}
.cat-3{background-position:0 -48px;}
.cat-4{background-position:0 -72px;}
.cat-5{background-position:0 -96px;}
.cat-6{background-position:0 -120px;}
.cat-7{background-position:0 -144px;}
.cat-8{background-position:0 -168px;}
</style>
</head>
<body>
? <div class="cat">
? ? ? <ul >
? ? ? ? <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>
</html>
2015-10-28
我已經解決了謝謝!
<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;
? ? 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>服裝內衣</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>
</html>