列表分为两种:有序列表和无序列表。这两种列表的列表标记也不一样。它们的列表标记可以用list-style-type来设置。有序列表常用的有decimal、lower-roman、higher-roman等;无序列表常用的有disco、square、circle等。
1、有序类表
语法示例:
<html>
<head>
<style type="text/css">
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol class="decimal">
<li>冰阔落</li>
<li>茶</li>
<li>柠檬茶</li>
</ol>
<ol class="lroman">
<li>冰阔落</li>
<li>茶</li>
<li>柠檬茶</li>
</ol>
<ol class="uroman">
<li>冰阔落</li>
<li>茶</li>
<li>柠檬茶</li>
</ol>
<ol class="lalpha">
<li>冰阔落</li>
<li>茶</li>
<li>柠檬茶</li>
</ol>
<ol class="ualpha">
<li>冰阔落</li>
<li>茶</li>
<li>柠檬茶</li>
</ol>
</body>
</html>
效果如下:
2、无序列表
语法示例:
<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>
<body>
<ul class="disc">
<li>冰阔落</li>
<li>茶</li>
<li>柠檬茶</li>
</ul>
<ul class="circle">
<li>冰阔落</li>
<li>茶</li>
<li>柠檬茶</li>
</ul>
<ul class="square">
<li>冰阔落</li>
<li>茶</li>
<li>柠檬茶</li>
</ul>
<ul class="none">
<li>冰阔落</li>
<li>茶</li>
<li>柠檬茶</li>
</ul>
</body>
</html>
效果如图: