5、CSS 列表
CSS 列表屬性允許你放置、改變列表項標志，或者將圖像作為列表項標志。
所有的CSS列表屬性
| list-style | 簡寫屬性。用于把所有用于列表的屬性設置于一個聲明中 |
| list-style-image | 將圖像設置為列表項標志。 |
| list-style-position | 設置列表中列表項標志的位置。 |
| list-style-type | 設置列表項標志的類型。 |
CSS 列表屬性作用如下：
1、不同的列表項標記
例如，在一個無序列表中，列表項的標志 (marker) 是出現在各列表項旁邊的圓點。在有序列表中，標志可能是字母、數字或另外某種計數體系中的一個符號。
要修改用于列表項的標志類型，可以使用屬性 list-style-type：
ul {list-style-type : square}//把無序列表中的列表項標志設置為方塊。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head><body> <p>無序列表實例:</p><ul class="a"><li>Coffee</li><li>Tea</li><li>Coca Cola</li> </ul><ul class="b"><li>Coffee</li><li>Tea</li><li>Coca Cola</li> </ul><p>有序列表實例:</p><ol class="c"><li>Coffee</li><li>Tea</li><li>Coca Cola</li> </ol><ol class="d"><li>Coffee</li><li>Tea</li><li>Coca Cola</li> </ol></body> </html>2、作為列表項標記的圖像
有時，常規的標志是不夠的。你可能想對各標志使用一個圖像，這可以利用 list-style-image 屬性做到：
ul li {list-style-image : url(xxx.gif)}只需要簡單地使用一個 url() 值，就可以使用圖像作為標志。
<html> <head> <style type="text/css"> ul { list-style-image: url('/i/eg_arrow.gif') } </style> </head><body> <ul> <li>咖啡</li> <li>茶</li> <li>可口可樂</li> </ul> </body></html>3、列表標志位置
CSS2.1 可以確定標志出現在列表項內容之外還是內容內部。這是利用 list-style-position 完成的。
<html> <head> <style type="text/css"> ul.inside { list-style-position: inside } ? ul.outside { list-style-position: outside } </style> </head> ? <body> <p>該列表的 list-style-position 的值是 "inside"：</p> <ul class="inside"> <li>Earl Grey Tea - 一種黑顏色的茶</li> <li>Jasmine Tea - 一種神奇的“全功能”茶</li> <li>Honeybush Tea - 一種令人愉快的果味茶</li> </ul> ? <p>該列表的 list-style-position 的值是 "outside"：</p> <ul class="outside"> <li>Earl Grey Tea - 一種黑顏色的茶</li> <li>Jasmine Tea - 一種神奇的“全功能”茶</li> <li>Honeybush Tea - 一種令人愉快的果味茶</li> </ul> </body> </html>?
4、簡寫列表樣式
為簡單起見，可以將以上 3 個列表樣式屬性合并為一個方便的屬性：list-style，就像這樣：
li {list-style : url(example.gif) square inside}list-style 的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其它的就會填入其默認值。
實例：所有的列表樣式類型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> <style type="text/css"> ul.none {list-style-type: none} ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.decimal {list-style-type: decimal} ul.decimal-leading-zero {list-style-type: decimal-leading-zero} ul.lower-roman {list-style-type: lower-roman} ul.upper-roman {list-style-type: upper-roman} ul.lower-alpha {list-style-type: lower-alpha} ul.upper-alpha {list-style-type: upper-alpha} ul.lower-greek {list-style-type: lower-greek} ul.lower-latin {list-style-type: lower-latin} ul.upper-latin {list-style-type: upper-latin} ul.hebrew {list-style-type: hebrew} ul.armenian {list-style-type: armenian} ul.georgian {list-style-type: georgian} ul.cjk-ideographic {list-style-type: cjk-ideographic} ul.hiragana {list-style-type: hiragana} ul.katakana {list-style-type: katakana} ul.hiragana-iroha {list-style-type: hiragana-iroha} ul.katakana-iroha {list-style-type: katakana-iroha} </style></style> </head> <body> <ul class="none"> <li>"none" 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="disc"> <li>Disc 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="circle"> <li>Circle 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="square"> <li>Square 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="decimal"> <li>Decimal 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="decimal-leading-zero"> <li>Decimal-leading-zero 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="lower-roman"> <li>Lower-roman 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="upper-roman"> <li>Upper-roman 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="lower-alpha"> <li>Lower-alpha 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="upper-alpha"> <li>Upper-alpha 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="lower-greek"> <li>Lower-greek 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="lower-latin"> <li>Lower-latin 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="upper-latin"> <li>Upper-latin 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="hebrew"> <li>Hebrew 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="armenian"> <li>Armenian 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="georgian"> <li>Georgian 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="cjk-ideographic"> <li>Cjk-ideographic 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="hiragana"> <li>Hiragana 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="katakana"> <li>Katakana 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="hiragana-iroha"> <li>Hiragana-iroha 類型</li> <li>茶</li> <li>可口可樂</li> </ul><ul class="katakana-iroha"> <li>Katakana-iroha 類型</li> <li>茶</li> <li>可口可樂</li> </ul></body> </html>
總結
