亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

雪碧圖不顯示

<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>


正在回答

3 回答

li?i?{
????display:?inline;
????float:?left;
????margin:?3px?10px?0?0;
????height:?24px;
????width:?30px;??/**這里少了分號**/
????background:url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg);
}

上面一個不對,因為有float 所以?display: inline; 就沒什么用了。

0 回復 有任何疑惑可以回復我~
#1

weibo_任_無憂_0 提問者

對,就是差了個分號,不過為什么有float,display:inline就沒有用了呢
2015-11-26 回復 有任何疑惑可以回復我~
#2

李曉健 回復 weibo_任_無憂_0 提問者

去查一下CSS中BFC的相關知識
2015-11-26 回復 有任何疑惑可以回復我~

浮動的影響

0 回復 有任何疑惑可以回復我~
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);
}


0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
CSS Sprite雪碧圖應用
  • 參與學習       47092    人
  • 解答問題       241    個

必學的大型網站實用技術,讓你快速掌握CSS Sprite雪碧圖技術

進入課程

雪碧圖不顯示

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號