css中ul li的背景小圖標(biāo)屬性設(shè)置的兩種情況
發(fā)布時(shí)間：2013-09-27 16:32:12 作者：佚名 
我要評(píng)論
我要評(píng)論ul li的背景小圖標(biāo)屬性設(shè)置一般會(huì)有兩種情況：定義在ul里及l(fā)i里，這兩種定義在什么情況下使用，在下文給出詳細(xì)的介紹，經(jīng)常div+css布局的朋友不妨參考下，希望對(duì)大家有所幫助
這里我們分兩種情況列出：
①當(dāng)標(biāo)題前的圖標(biāo)是很長(zhǎng)的一綹而不是單獨(dú)的一個(gè)點(diǎn)或者類似圖標(biāo)時(shí)，在定義背景圖background要定義在<ul>里。因?yàn)楹荛L(zhǎng)，所以放在<li>的外邊<ul>里
②當(dāng)標(biāo)題前的圖標(biāo)時(shí)單獨(dú)的一個(gè)點(diǎn)兒或者方塊或者其他類似圖標(biāo)時(shí)，定義背景圖background要放在<li>里
A
<style>
.test1 { width:100px; height:265px; background:url(http://www.86image.cn/statics/images/show/li.jpg) no-repeat scroll 0 8px; }
.test1 li {padding-left:30px; line-height:27px; list-style-type:none;}
</style>
<ul class="test1">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
如圖示：
B
<style>
.test1 li { padding-left:15px; background:url("http:www.86image.cn/statics/images/tpl1/images/icon_fk.gif" ) no-repeat scroll 1px 8px; line-height:22px; list-style-type:none;}
</style>
<ul class="test1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
如圖示：
①當(dāng)標(biāo)題前的圖標(biāo)是很長(zhǎng)的一綹而不是單獨(dú)的一個(gè)點(diǎn)或者類似圖標(biāo)時(shí)，在定義背景圖background要定義在<ul>里。因?yàn)楹荛L(zhǎng)，所以放在<li>的外邊<ul>里
②當(dāng)標(biāo)題前的圖標(biāo)時(shí)單獨(dú)的一個(gè)點(diǎn)兒或者方塊或者其他類似圖標(biāo)時(shí)，定義背景圖background要放在<li>里
A
復(fù)制代碼
代碼如下:<style>
.test1 { width:100px; height:265px; background:url(http://www.86image.cn/statics/images/show/li.jpg) no-repeat scroll 0 8px; }
.test1 li {padding-left:30px; line-height:27px; list-style-type:none;}
</style>
<ul class="test1">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
如圖示：
B
復(fù)制代碼
代碼如下:<style>
.test1 li { padding-left:15px; background:url("http:www.86image.cn/statics/images/tpl1/images/icon_fk.gif" ) no-repeat scroll 1px 8px; line-height:22px; list-style-type:none;}
</style>
<ul class="test1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
如圖示：
相關(guān)文章
CSS實(shí)現(xiàn)ul和li橫向排列的兩種方法
這篇文章主要介紹了CSS實(shí)現(xiàn)ul和li橫向排列的兩種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-02-21CSS的ul和li實(shí)現(xiàn)橫向排列和去掉li的點(diǎn)
怎么實(shí)現(xiàn)ul的橫向排列和去掉li那個(gè)煩人的點(diǎn)，現(xiàn)在找到方法了，在此與大家分享下，感興趣的朋友可以參考下，以備不時(shí)之需2013-10-23
DIV+CSS里，我們用得最多的就是ul li來(lái)顯示數(shù)據(jù)，如新聞按鈕等,下面給大家一個(gè)css ul li的例子供學(xué)習(xí)
2023-05-21 UL、LI 無(wú)序列表實(shí)現(xiàn)純CSS網(wǎng)站導(dǎo)航菜單
三行的純CSS網(wǎng)站導(dǎo)航欄菜單，改改風(fēng)格，讓大家感到新鮮一點(diǎn)，其它主要還是使用了Li列表，整體布局簡(jiǎn)潔，美觀大方，適合大部分網(wǎng)站使用，顏色和菜單空隙可隨意調(diào)節(jié)，希望大
2009-11-08 CSS經(jīng)驗(yàn):ul列表不正確使用的趨勢(shì)
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：不知道是標(biāo)準(zhǔn)害了大家還是大家害了標(biāo)準(zhǔn)，繼class和div被濫用后，ul列表也有被不正確使用的趨勢(shì)。
今天交流會(huì)上，分享前端的開(kāi)發(fā)經(jīng)
2009-04-02 
這篇文章主要介紹了CSS在UL LI的樣式用法，主要是UI上的應(yīng)用，我們通過(guò)代碼分離的方式通過(guò)css完全控制css的樣式
2023-05-21