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，則是選中的