023_CSS列表
1. CSS列表屬性允許你放置、改變列表項標志, 或者將圖像作為列表項標志。
2. CSS列表屬性
3. 列表類型
3.1. list-style-type屬性設置列表項標記的類型。
3.2. 默認值
3.3.?可能的值?
3.4. 例子
3.4.1. 代碼
<!DOCTYPE html> <html><head><title>所有的列表樣式類型</title><meta charset="utf-8" /><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></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>3.4.2. 效果圖
4. 列表項圖像
4.1. list-style-image屬性使用圖像來替換列表項的標記。
4.2. 這個屬性指定作為一個有序或無序列表項標志的圖像。圖像相對于列表項內容的放置位置通常使用list-style-position屬性控制。
4.3. 請始終規定一個"list-style-type"屬性以防圖像不可用。
4.4. 默認值
4.5. 可能的值
5. 列表標志位置
5.1. list-style-position屬性設置在何處放置列表項標記。
5.2. 默認值
5.3. 可能的值
5.4. 例子
5.4.1. 代碼
<!DOCTYPE html> <html><head><title>列表標志位置</title><meta charset="utf-8" /><style type="text/css">ul {list-style-image: url('eg_arrow.gif');}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>5.4.2. 效果圖
6. 簡寫列表樣式
6.1. list-style簡寫屬性在一個聲明中設置所有的列表屬性。
6.2. list-style可以按順序設置如下屬性:
- list-style-type
- list-style-position
- list-style-image
6.3. 可以不設置其中的某個值, 比如: "list-style:?circle inside;"也是允許的。未設置的屬性會使用其默認值。
6.4. 默認值
6.5. 例子
6.5.1. 代碼
<!DOCTYPE html> <html><head><title>簡寫列表樣式</title><meta charset="utf-8" /><style type="text/css">ul {list-style: square inside url('eg_arrow.gif');}</style></head><body><ul><li>咖啡</li><li>茶</li><li>可口可樂</li></ul></body> </html>6.5.2. 效果圖
總結
- 上一篇： 037_CSS媒介类型
- 下一篇： 031_CSS表格