在html中加入序号,CSS3内容处理-插入连续的序号

如果我们想要实现如下图的这种列表,无疑最先想到的是ol标签,通过CSS定义list-style-type: decimal-leading-zero;即可;

5248e374e5666520fe6b6526a889096c.png

但是它有的时候并不能满足我们的需求,比如一篇文章中有好几个大标题,每个标题前面均有连续的编号(可以理解为标签无规律),我们将如何实现?

据咱们现在所掌握的知识,有以下几种方案:

1.还是用ol,然后对有大标题的地方加入class?

但这样看上去并不是那么的优雅,而且大标题用h标签是比较好的选择;

2.人工去加入编号?

但这样又显得非常麻烦;

3.后台程序在输出的时候加入编号?

但这样多多少少会给服务器端带来压力,而且对编号方式(比如单数前加补零01,02....10)进行修改的时候又得由后端修改其算法,维护成本可能比较高;

从而可以看出,虽有解决办法,但基本都不是那么的“优雅完美”!随着时代的发展,互联网的进步,HTML5/CSS的诞生让我们可以轻易地解决以上问题!

完美的解决方案CSS3!

同样我们还是得使用content属性来实现编号,代码如下:元素{counter-increment:定义计数器名;}/*首先定义一个计数器的名字,名字

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值