前端——设置列表中不同类型的列表标记

19 篇文章 0 订阅

列表分为两种:有序列表和无序列表。这两种列表的列表标记也不一样。它们的列表标记可以用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>

效果如图:

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值