在XHTML中我们无法对列表项目符号做出更改,而CSS赋予了我们这样的能力。
1.无序列表项目样式属性(list-style-type)
……
<style type="text/css">
.w1 { list-style-type:circle;}
.w2 { list-style-type:square;}
.w3 { list-style-type:disc ;}
</style>
……
<ul class="w1">
<li>无序列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
<ul class="w2">
<li >无序列表项目1</li>
<li >无序列表项目2</li>
<li >无序列表项目3</li>
</ul>
<ul class="w3">
<li >无序列表项目1</li>
<li >无序列表项目2</li>
<li >无序列表项目3</li>
</ul>
……
……
<style type="text/css">
.y1 { list-style-type:decimal ;}
.y2 {list-style-type:upper-roman ;}
.y3 {list-style-type:lower-roman ;}
</style>
……
<ol class="y1">
<li>有序列表项目1</li>
<li>有序列表项目1</li>
<li>有序列表项目1</li>
</ol>
<ol class="y2">
<li>有序列表项目1</li>
<li>有序列表项目1</li>
<li>有序列表项目1</li>
</ol>
<ol class="y3">
<li>有序列表项目1</li>
<li>有序列表项目1</li>
<li>有序列表项目1</li>
</ol>
……
3.用图片做列表项目符号(list-style-image)
……
<style type="text/css">
.xing { list-style-image:url(../images/list.gif);}
</style>
……
<ul class="xing" >
<li>无序列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
……