-
cssGaga
查看全部 -
雪碧圖實現(xiàn)原理
查看全部 -
雪碧圖用途
查看全部 -
雪碧圖使用場景
查看全部 -
雪碧圖使用場景
查看全部 -
css sprite使用場景
查看全部 -
生成雪碧圖網(wǎng)站工具查看全部
-
CSS工具查看全部
-
雪碧圖實現(xiàn)方法查看全部
-
使用雪碧圖的優(yōu)點查看全部
-
雪碧圖查看全部
-
雪碧圖實現(xiàn)：
的css樣式：
首先將所有元素的margin、padding設(shè)為0，清除瀏覽器默認(rèn)的樣式
li{
? ?display:block;
? ?height:31px;
? ?line-height:31px;
? ?overflow:hidden;
? ?margin:1px 10px 0 0;
? ?border-bottom:1px solid #dedede;
}
li i{
? ?dispaly:inline;
? ?float:left;
? ?margin:3px 10px 0 0;
? ?height:30px;
? ?width:30px;
}
根據(jù)背景圖進行定位：
.cat-1 i{
? ?background-position:0 0;
}
.cat-2 i{
? ?background-position:0 -24px;
}
.cat-3 i{
? ?background-position:0 -48px;
}
……
.cat-8 i{
? ?background-position:0 -168px;
}
查看全部 -
?利用雪碧圖實現(xiàn)下圖：
總體結(jié)構(gòu)：有一個div容器，利用<ul>標(biāo)簽，<ul>標(biāo)簽里有8個<li>標(biāo)簽，<li>標(biāo)簽里有一個<i>標(biāo)簽用于放圖標(biāo)，還有一個<h3>標(biāo)簽用于放說明性文字?
<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>運動戶外</h3></li>
……
? ? ? ?<li class="cat-8"><i></i><h3>母嬰用品</h3></li>
? ?</ul>
</div>
查看全部
舉報