前端——設定列表中不同型別的列表標記
阿新 • • 發佈：2018-12-11
列表分為兩種：有序列表和無序列表。這兩種列表的列表標記也不一樣。它們的列表標記可以用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>
效果如圖：
