CSS list-style-type 範例參考
<style type="text/css">
<!--
ul.A {
list-style-type:decimal;
}
ol.B {
list-style-type:lower-roman;
}
-->
</style>
<ul class="A">
<li>項目一</li>
<li>項目二</li>
</ul>
<ol class="B">
<li>項目一</li>
<li>項目二</li>
</ol>
以上範例呈現結果如<!--
ul.A {
list-style-type:decimal;
}
ol.B {
list-style-type:lower-roman;
}
-->
</style>
<ul class="A">
<li>項目一</li>
<li>項目二</li>
</ul>
<ol class="B">
<li>項目一</li>
<li>項目二</li>
</ol>
- 項目一
- 項目二
- 項目一
- 項目二
CSS list-style-type 常用參數表
| 參數 | 定義 |
| none | 不顯示符號 |
| disc | 實心圓形 |
| circle | 空心圓形 |
| square | 實心正方形 |
| lower-alpha | 小寫英文字母 |
| upper-alpha | 大寫英文字母 |
| decimal | 阿拉伯數字 |
| decimal-leading-zero | 十進位制的阿拉伯數字，前方自動補零 |
| armenian | 亞美尼亞語 |
| lower-greek | 希臘語 |
| lower-roman | 小寫羅馬數字 |
| upper-roman | 大寫羅馬數字 |
帶入常用參數的範例
<ul style="list-style-type:square;">
<li>none</li>
<li>none</li>
</ul>
<ul style="list-style-type:decimal;">
<li>decimal</li>
<li>decimal</li>
</ul>
<ul style="list-style-type:decimal-leading-zero;">
<li>decimal-leading-zero</li>
<li>decimal-leading-zero</li>
</ul>
<ul style="list-style-type:lower-alpha;">
<li>lower-alpha</li>
<li>lower-alpha</li>
</ul>
<ul style="list-style-type:upper-alpha;">
<li>upper-alpha</li>
<li>upper-alpha</li>
</ul>
<ul style="list-style-type:lower-roman;">
<li>lower-roman</li>
<li>lower-roman</li>
</ul>
以上範例輸出結果<li>none</li>
<li>none</li>
</ul>
<ul style="list-style-type:decimal;">
<li>decimal</li>
<li>decimal</li>
</ul>
<ul style="list-style-type:decimal-leading-zero;">
<li>decimal-leading-zero</li>
<li>decimal-leading-zero</li>
</ul>
<ul style="list-style-type:lower-alpha;">
<li>lower-alpha</li>
<li>lower-alpha</li>
</ul>
<ul style="list-style-type:upper-alpha;">
<li>upper-alpha</li>
<li>upper-alpha</li>
</ul>
<ul style="list-style-type:lower-roman;">
<li>lower-roman</li>
<li>lower-roman</li>
</ul>
- none
- none
- decimal
- decimal
- decimal-leading-zero
- decimal-leading-zero
- lower-alpha
- lower-alpha
- upper-alpha
- upper-alpha
- lower-roman
- lower-roman
相關主題研究