CSS list-style-type 屬性語法
list-style-type: 顯示符號參數;
顯示符號參數就是要在項目符號前面顯示的符號,每一種符號有特定的參數,可以設定的參數如下表。CSS list-style-type 允許的符號參數
參數 | 定義 |
none | 不顯示 |
disc | 實心的圓形 |
circle | 空心的圓形 |
square | 實心的正方形 |
lower-alpha | 英文字母小寫 |
upper-alpha | 英文字母大寫 |
decimal | 阿拉伯數字 |
decimal-leading-zero | 十進位制的阿拉伯數字,前方會自動補零。 |
armenian | 亞美尼亞語 |
lower-greek | 希臘語 |
lower-roman | 小寫羅馬數字 |
upper-roman | 大寫羅馬數字 |
上表參考自 Wibibi 的 CSS list-style-type 內容。
CSS list-style-type 的實際操作範例
<ul style="list-style-type:circle;">
<li>前方顯示空心圓形</li>
<li>前方顯示空心圓形</li>
<li>前方顯示空心圓形</li>
</ul>
<ol style="list-style-type:circle;">
<li>前方顯示空心圓形</li>
<li>前方顯示空心圓形</li>
<li>前方顯示空心圓形</li>
</ol>
<ul style="list-style-type:lower-alpha;">
<li>前方顯示英文字母小寫</li>
<li>前方顯示英文字母小寫</li>
<li>前方顯示英文字母小寫</li>
</ul>
<ol style="list-style-type:lower-alpha;">
<li>前方顯示英文字母小寫</li>
<li>前方顯示英文字母小寫</li>
<li>前方顯示英文字母小寫</li>
</ol>
<ul style="list-style-type:lower-roman;">
<li>前方顯示小寫羅馬數字</li>
<li>前方顯示小寫羅馬數字</li>
<li>前方顯示小寫羅馬數字</li>
</ul>
<ol style="list-style-type:lower-roman;">
<li>前方顯示小寫羅馬數字</li>
<li>前方顯示小寫羅馬數字</li>
<li>前方顯示小寫羅馬數字</li>
</ol>
範例顯示結果<li>前方顯示空心圓形</li>
<li>前方顯示空心圓形</li>
<li>前方顯示空心圓形</li>
</ul>
<ol style="list-style-type:circle;">
<li>前方顯示空心圓形</li>
<li>前方顯示空心圓形</li>
<li>前方顯示空心圓形</li>
</ol>
<ul style="list-style-type:lower-alpha;">
<li>前方顯示英文字母小寫</li>
<li>前方顯示英文字母小寫</li>
<li>前方顯示英文字母小寫</li>
</ul>
<ol style="list-style-type:lower-alpha;">
<li>前方顯示英文字母小寫</li>
<li>前方顯示英文字母小寫</li>
<li>前方顯示英文字母小寫</li>
</ol>
<ul style="list-style-type:lower-roman;">
<li>前方顯示小寫羅馬數字</li>
<li>前方顯示小寫羅馬數字</li>
<li>前方顯示小寫羅馬數字</li>
</ul>
<ol style="list-style-type:lower-roman;">
<li>前方顯示小寫羅馬數字</li>
<li>前方顯示小寫羅馬數字</li>
<li>前方顯示小寫羅馬數字</li>
</ol>
- 前方顯示空心圓形
- 前方顯示空心圓形
- 前方顯示空心圓形
- 前方顯示空心圓形
- 前方顯示空心圓形
- 前方顯示空心圓形
- 前方顯示英文字母小寫
- 前方顯示英文字母小寫
- 前方顯示英文字母小寫
- 前方顯示英文字母小寫
- 前方顯示英文字母小寫
- 前方顯示英文字母小寫
- 前方顯示小寫羅馬數字
- 前方顯示小寫羅馬數字
- 前方顯示小寫羅馬數字
- 前方顯示小寫羅馬數字
- 前方顯示小寫羅馬數字
- 前方顯示小寫羅馬數字
如果你想更進一步將顯示符號改為圖片,請參閱:CSS list-style-image 列表開頭顯示圖示。
更多項目符號設計
- CSS list-style 列表設計
- CSS list-style-position 列表位置
- 利用 CSS 設計 ul li 橫向水平顯示
- HTML ul li 列表 (項目清單)
- HTML ol li 列表 (數字編號項目清單)