當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

023_CSS列表

發布時間：2025/4/17 CSS 52 豆豆

生活随笔收集整理的這篇文章主要介紹了 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. 效果圖

總結

以上是生活随笔為你收集整理的023_CSS列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

列表
_CSS