雪碧圖不顯示
<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);
}
? /* 在這里補(bǔ)充雪碧圖的樣式 */
.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)動戶外</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>
2015-11-26
li?i?{ ????display:?inline; ????float:?left; ????margin:?3px?10px?0?0; ????height:?24px; ????width:?30px;??/**這里少了分號**/ ????background:url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg); }上面一個不對，因?yàn)橛衒loat 所以?display: inline; 就沒什么用了。
2015-11-26
浮動的影響
2015-11-26
li?i?{ ????display:?inline;??/**這里的inline改成?inline-block?試試**/ ????float:?left; ????margin:?3px?10px?0?0; ????height:?24px; ????width:?30px ????background:url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg); }