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