當(dāng)前位置：網(wǎng)站首頁 >> 網(wǎng)站技術(shù) >>

深入解析CSS技術(shù)里的UL和LI樣式

發(fā)布人：鄭州凱訊公司    發(fā)布日期：2015-03-08

在網(wǎng)頁制作中，CSS技術(shù)中的ul、li樣式的應(yīng)用非常普遍，我們經(jīng)常會使用ul、li來制作一些文字列表或者圖片列表，比如新聞鏈接列表、橫向網(wǎng)頁導(dǎo)航鏈接、系列圖片鏈接等等，不僅是縱向列表，還有橫向列表，都可以利用ul和li樣式設(shè)置來實(shí)現(xiàn)。在使用ul和li樣式時，大多都是使用比較常用的幾個樣式設(shè)置，在這里，鄭州網(wǎng)站建設(shè)公司的小編就來更加深入地解析一下ul和li樣式的應(yīng)用，并對這些樣式設(shè)置附帶有實(shí)例代碼，還配以實(shí)例代碼執(zhí)行后的截圖，以便更好地讓各位理解網(wǎng)頁制作中如何使用這些ul和li樣式的用法。下面鄭州網(wǎng)站建設(shè)來展示一下CSS技術(shù)中的ul和li實(shí)例代碼和圖示，本代碼在各種瀏覽器上都測試過，可兼容各種主流瀏覽器：

常用的ul和li樣式是list-style，大多數(shù)時候list-style都是設(shè)置成none，表示不是使用任何樣式包括前面的“點(diǎn)號”，僅僅進(jìn)行列表。下面是list-style使用none時的一個實(shí)例代碼和圖示：

<style>
#menu{width:400px; height:50px; line-height:50px; background-color: #EEDDDD;}
#menu ul{list-style:none; margin:0px;}
#menu ul li{float:left; margin-left:15px; font-size:12px;}
</style>

<div id="menu">
<ul>
<li><a href="#">網(wǎng)站首頁</a></li>
<li><a href="#">產(chǎn)品展示</a></li>
<li><a href="#">技術(shù)支持</a></li>
<li><a href="#">聯(lián)系我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>
</div>

上面的代碼中對ul使用了list-style:none取消了列表前的點(diǎn)號，并使用margin:0px;取消了UL的縮進(jìn)，對li使用過了float:left; 讓內(nèi)容都在同一行顯示，使用了浮動屬性(float)。

下面鄭州網(wǎng)站建設(shè)重點(diǎn)介紹一下其他的樣式設(shè)置。在CSS技術(shù)中，有專門控制列表表現(xiàn)的屬性，常用的有l(wèi)ist-style-type屬性、list-style-image屬性、list-style-position屬性等幾個，下面分別介紹一下。

一、list-style-type屬性：

list-style-type屬性是用來定義li列表的項(xiàng)目符號的，即列表前面的修飾。list-style-type屬性常用的樣式有如下幾個：
none、disc、circle、square、demical、lower-alpha、upper-alpha、lower-roman、upper-roman等等，它們的含義如下：
none：不使用項(xiàng)目符號
disc：實(shí)心圓
circle：空心圓
square：實(shí)心方塊
demical：阿拉伯?dāng)?shù)字
lower-alpha：小寫英文字母
upper-alpha：大寫英文字母
lower-roman：小寫羅馬數(shù)字
upper-roman：大寫羅馬數(shù)字

下面是使用list-style-type屬性的示例代碼和圖示如下：
<style>
li{list-style-type:circle; margin-left:15px; font-size:12px; line-height:20px;}
</style>

<ul>
<li><a href="#">網(wǎng)站首頁</a></li>
<li><a href="#">產(chǎn)品展示</a></li>
<li><a href="#">技術(shù)支持</a></li>
<li><a href="#">聯(lián)系我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>

該樣式應(yīng)用到頁面的效果如下圖所示：

二、list-style-image屬性：

list-style-image屬性用來定義使用圖片來代替項(xiàng)目符號。list-style-image屬性常用的樣式有兩個，即：none/url，其中none表示沒有替換的圖片，而url表示要替換圖片的路徑，下面以例子來看一下其用法：
<style>
li{list-style-image:url(images/xmfh.jpg); margin-left:15px; font-size:12px; line-height:20px;}
</style>

<ul>
<li><a href="#">網(wǎng)站首頁</a></li>
<li><a href="#">產(chǎn)品展示</a></li>
<li><a href="#">技術(shù)支持</a></li>
<li><a href="#">聯(lián)系我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>

網(wǎng)頁執(zhí)行的效果圖如下：

三、list-style-position屬性：

list-style-position屬性，是用來定義項(xiàng)目符號在列表中顯示位置的屬性。list-style-position屬性常用的樣式有兩個，即：inside/outside。inside表示項(xiàng)目符號放置在文本以內(nèi)，outside表示項(xiàng)目符號放置在文本以外，下面用例子來看一下其用法：
<style>
div{width:300px;}
li{list-style-type:circle; list-style-position:outside; margin-left:15px; font-size:12px; line-height:20px;}
</style>

<div>
<ul>
<li><a href="#">這里是使用list-style-position屬性值為outside的示例，為了突出樣式，本行文字加長了，請注意換行以后項(xiàng)目符號的位置。</a></li>
<li><a href="#">產(chǎn)品展示</a></li>
<li><a href="#">技術(shù)支持</a></li>
</ul>
</div>

使用outside和inside屬性值的效果圖如下（圖一為outside屬性值的圖示，圖二為inside屬性值的圖示）：