萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS教程:6.2 項目列表
CSS教程:6.2 項目列表
傳統的HTML語言提供了項目列表的基本功能，包括順序式列表的<ol>標記和無順序列表的<ul>標記等。當引入css後，項目列表被賦予了很多新的屬性．甚至超越了它最初設計時的功能。本節主要圍繞項目列表的基本css屬性進行相關介紹，包括項目列表的編號、縮進和位置等。
一、列表的符號
通常的項目列表主要采用<ul>或者<ol>標記，然後配合<li>標記羅列各個項目。簡單的列表代碼如下，其顯示效果如圖1所示。
本案例文件位於網頁CSS教程資源“第6章\04\list.htm”。
折疊展開XML/HTML 代碼復制內容到剪貼板- <html>
- <head>
- <title>項目列表</title>
- <style>
- ul{
- font-size:0.9em;
- color:#00458c;
- list-style-type:decimal; /* 項目編號 */
- }
- </style>
- </head>
- <body>
- <ul>
- <li>Home</li>
- <li>Contact us</li>
- <li>Web Dev</li>
- <li>Web Design</li>
- <li>Map</li>
- </ul>
- </body>
- </html>
圖1 普通的項目列表
在CSS中項目列表的編號是通過屬性list-style-type來修改的。無論是<ul>標記還是<ol>標記．都可以使用相同的屬性值，而且效果是完全相同的。例如修改<ul>標記的樣式為：
折疊展開CSS 代碼復制內容到剪貼板- list-style-type:decimal; /* 項目編號 */
此時項目列表將按照十進制編號顯示，這本身是<ol>標記的功能。換句話說，在css中<ul>標記與<ol>標記的分界線並不明顯，只要利用list-style-type屬性，二者就可以通用，顯示效果如圖1所示。
當給<ul>或者<ol>標記設置list-style-type屬性時，在它們中間的所有<li>標記都將采用該設置；如果對<li>標記單獨設置list-style-type屬性，則僅僅作用在該條項目上，如下所示。
折疊展開XML/HTML 代碼復制內容到剪貼板- <html>
- <head>
- <title>項目列表</title>
- <style>
- ul{
- font-size:0.9em;
- color:#00458c;
- list-style-type:decimal; /* 項目編號 */
- }
- li.special{
- list-style-type:circle; /* 單獨設置 */
- }
- </style>
- </head>
- <body>
- <ul>
- <li>Home</li>
- <li>Contact us</li>
- <li class="special">Web Dev</li>
- <li>Web Design</li>
- <li>Map</li>
- </ul>
- </body>
- </html>
此時的顯示效果可以看到第3項的項目編號變成了空心圓，但是並沒有影響其他編號。
通常使用的list-style-type屬性的值除了上面看到的十進制編號和空心圓以外還有很多，常用的如下表所示。
關鍵字 顯示效果 disc 實心圓 circle 空心圓 square 正方形 decimal 1，2，3，4，5，6，…… upper-alpha A，B，C，D，E，F，…… lower-alpha a，b，c，d，e，f，…… upper-roman Ⅰ，Ⅱ，Ⅲ，Ⅴ，Ⅵ，Ⅶ，…… none 不顯示任何符號二、圖片符號
除了傳統的各種項目符號外，CSS還提供了屬性list-style-image，可以將項目符號顯示為任意的圖片。例如有下面一段代碼。
折疊展開XML/HTML 代碼復制內容到剪貼板- <html>
- <head>
- <title>項目列表</title>
- <style>
- ul{
- font-size:0.9em;
- color:#00458c;
- list-style-image:url(icon1.jpg); /* 不顯示項目符號 */
- }
- </style>
- </head>
- <body>
- <ul>
- <li>Home</li>
- <li>Contact us</li>
- <li>Web Dev</li>
- <li>Web Design</li>
- <li>Map</li>
- </ul>
- </body>
- </html>
在IE 8的顯示效果如圖2所示，在FireFox中的顯示效果如圖3所示，每個項目的符號都顯示成了一個小圖標，即icon1.jpg。
圖2 圖3 圖片符號在IE8和FireFox中的效果
如果仔細觀察圖片符號在兩個浏覽器中的顯示效果，就會發現圖標與文字之間的距離有著明顯的區別，因此不推薦這種設置圖片符號的方法。如果希望項目符號采用圖片的方式，則建議將list-style-type屬性的值設置為none。然後修改<li>標記的背景屬性background來實現。例如下面這個例子。
本案例文件位於網頁CSS教程資源“第6章\04\icon-style.htm”。
折疊展開XML/HTML 代碼復制內容到剪貼板- <html>
- <head>
- <title>項目列表</title>
- <style>
- ul{
- font-size:0.9em;
- color:#00458c;
- list-style-type:none; /* 不顯示項目符號 */
- }
- li{
- background:url(icon1.jpg) no-repeat; /* 添加為背景圖片 */
- padding-left:25px; /* 設置圖標與文字的間隔 */
- }
- </style>
- </head>
- <body>
- <ul>
- <li>Home</li>
- <li>Contact us</li>
- <li>Web Dev</li>
- <li>Web Design</li>
- <li>Map</li>
- </ul>
- </body>
- </html>
這樣通過隱藏<ul>標記中的項目列表，然後再設置<li>標記的樣式，統一定制文字與圖標之間的距離，就可以實現各個浏覽器之間的效果一致，如圖2所示。
