萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> css中ul li的背景小圖標屬性設置的兩種情況

css中ul li的背景小圖標屬性設置的兩種情況

ul li的背景小圖標屬性設置一般會有兩種情況:定義在ul裡及li裡,這兩種定義在什麼情況下使用,在下文給出詳細的介紹,經常div+css布局的朋友不妨參考下,希望對大家有所幫助

 

這裡我們分兩種情況列出:
①當標題前的圖標是很長的一绺而不是單獨的一個點或者類似圖標時,在定義背景圖background要定義在<ul>裡。因為很長,所以放在<li>的外邊<ul>裡
②當標題前的圖標時單獨的一個點兒或者方塊或者其他類似圖標時,定義背景圖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>


如圖示:

copyright © 萬盛學電腦網 all rights reserved