实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table{border-collapse:collapse;}
table,th,td{
border:1px solid black;
}
th,td{
padding:5px;
width:100px;
text-align:center;
}
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>
<h1>列表全部样式实例</h1>
<table>
<tr>
<th>none 类型</th>
<th>Disc 类型</th>
<th>Circle 类型</th>
<th>Square 类型</th>
<th>Decimal 类型</th>
<th>Decimal-leading-zero 类型</th>
<th>Lower-roman 类型</th>
</tr>
<tr>
<td>
<ul class="none">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="Disc">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="Circle">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="Square">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="Decimal">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="Decimal-leading-zero">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="lower-roman">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
</tr>
<tr>
<th>Upper-roman 类型</th>
<th>Lower-alpha 类型</th>
<th>Upper-alpha 类型</th>
<th>Lower-greek 类型</th>
<th>Lower-latin 类型</th>
<th>Upper-latin 类型</th>
<th>Hebrew 类型</th>
</tr>
<tr>
<td>
<ul class="upper-roman">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="lower-alpha">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="upper-alpha">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="lower-greek">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="lower-latin">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="upper-latin">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="hebrew">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
</tr>
<tr>
<th>Armenian 类型</th>
<th>Georgian 类型</th>
<th>Cjk-ideographic 类型</th>
<th>Hiragana 类型</th>
<th>Katakana 类型</th>
<th>Hiragana-iroha 类型</th>
<th>Katakana-iroha 类型</th>
</tr>
<tr>
<td>
<ul class="armenian">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="georgian">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="cjk-ideographic">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="hiragana">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="katakana">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="hiragana-iroha">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
<td>
<ul class="katakana-iroha">
<li>苹果</li>
<li>雪梨</li>
<li>菠萝</li>
</ul>
</td>
</tr>
</table>
</body>
<html>
运行效果：
评论