DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> Css <ul><li>列表的樣式的控制
Css <ul><li>列表的樣式的控制
編輯:CSS特效代碼     
列表是HTML裡一種很有用的顯示方式,可以把相關的並列內容整齊地垂直排列,使網頁顯得整潔專業,並讓浏覽者有一目了然的感覺。



列表是HTML裡一種很有用的顯示方式,可以把相關的並列內容整齊地垂直排列,使網頁顯得整潔專業,並讓浏覽者有一目了然的感覺。

樣式表為列表增加了一些功能,控制列表的樣式包括列表樣式、圖形符號、列表位置三個部分。

1.列表符號

列表符號是指顯示於每一個列表項目前的符號標識。

基本格式如下:

list-style-type:參數

參數取值范圍:

·disc:圓形

·circle:空心圓

·square:方塊

·decimal:十進制數字

·lower-roman:小寫羅馬數字

·upper-roman:大寫羅馬數字

·lower-alpha:小寫希臘字母

·upper-alpha:大寫希臘字母

·none:無符號顯示

參數中的disc是默認選項。

2.圖形符號

圖形符號指原來列表的項目符號將可以使用圖形來代替。

基本格式如下:

list-style-image:URL

URL是用來代替項目符號的圖形文件的地址,可以使用相對地址或絕對地址。

3.列表位置

列表位置描述列表在何處顯示。

基本格式如下:

list-style-position:參數

參數取值范圍:

·inside:在BOX模型內部顯示

·outside:在BOX模型外部顯示

這裡又出現了一個新的概念:BOX模型。BOX是指一種容器,包含了應用樣式規則的對象,具體介紹將在後文中給出。 ========================================================================================



使用無序列表:即UL

看一個最簡單的例子:

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

</ul>
這是一個未加修飾的縱向列表
1:設置列表的邊界
#base {

border: 1px solid #000;

margin: 2em;

width: 10em;

padding: 5px;

}
html中這樣寫,就會呈現一個帶邊框的無序列表
<div id="base">

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

</ul>

</div>
2:設定列表的圖像
可以設定列表的樣式為左邊帶一個圖像,樣式如下:
ul {

list-style-type: disc;

list-style-image: url(bullet.gif);

list-style-position: inside;

}
disc表示實心的圓,list-style-image表示列表用到的小圖像,如果這個圖像的url
不正確時,disc才會起作用,inside表示列表是在區塊內部的。
3:如何在段落中使用列表
樣式如下:
#inline-list {

border: 1px solid #000;

margin: 2em;

width: 80%;

padding: 5px;

font-family: Verdana, sans-serif;

}



#inline-list p {

display: inline;

}



#inline-list ul, #inline-list li {

display: inline;

margin: 0;

padding: 0;

color: #339;

font-weight: bold;

}
4:水平導航
#h-contain {

padding: 5px;

border: 1px solid #000;

margin-bottom: 25px;

}
#pipe ul {

margin-left: 0;

padding-left: 0;

display: inline;

}



#pipe ul li {

margin-left: 0;

padding: 3px 15px;

border-left: 1px solid #000;

list-style: none;

display: inline;

}





#pipe ul li.first {

margin-left: 0;

border-left: none;

list-style: none;

display: inline;

}
#h-contain定一個一個邊界為1的區塊,水平導航用的也是inline方式,li.first定義第一個
列表元素沒有左邊那個象素為1的border。
下面的樣式是tab方式的水平導航:
#tabs ul {

margin-left: 0;

padding-left: 0;

display: inline;

}



#tabs ul li {

margin-left: 0;

margin-bottom: 0;

padding: 2px 15px 5px;

border: 1px solid #000;

list-style: none;

display: inline;

}





#tabs ul li.here {

border-bottom: 1px solid #ffc;

list-style: none;

display: inline;

}
li的class如果為here,則是選中的
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved