CSS3内容处理-插入连续的序号及在编号中追加文字

一、插入连续的序号
如果我们想要实现如下图的这种列表,无疑最先想到的是ol标签,通过CSS定义list-style-type: decimal-leading-zero;即可;
但是它有的时候并不能满足我们的需求,比如一篇文章中有好几个大标题,每个标题前面均有连续的编号(可以理解为标签无规律),我们将如何实现?
据咱们现在所掌握的知识,有以下几种方案:
1.还是用ol,然后对有大标题的地方加入class?
但这样看上去并不是那么的优雅,而且大标题用h标签是比较好的选择;

2.人工去加入编号?
但这样又显得非常麻烦;

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

从而可以看出,虽有解决办法,但基本都不是那么的“优雅完美”!随着时代的发展,互联网的进步,HTML5/CSS的诞生让我们可以轻易地解决以上问题!
完美的解决方案CSS3!
同样我们还是得使用content属性来实现编号,代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3内容处理-插入连续编号 | 虾咪博客(shrimsea.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}
h2{counter-increment:myCounter;}
h2:before{content:counter(myCounter);}
</style>
</head>
    
<body>
<h2>大标题:虾咪博客(shrimsea.com)!</h2>
<p>虾咪博客是一个值得收藏的网站.</p>
<h2>大标题:虾咪博客(shrimsea.com)!</h2>
<p>虾咪博客是一个值得收藏的网站.</p>
<h2>大标题:虾咪博客(shrimsea.com)!</h2>
<p>虾咪博客是一个值得收藏的网站.</p>
<h2>大标题:虾咪博客(shrimsea.com)!</h2>
<p>虾咪博客是一个值得收藏的网站.</p>
<h2>大标题:虾咪博客(shrimsea.com)!</h2>
<p>虾咪博客是一个值得收藏的网站.</p>
</body>
</html>

二、在编号中追加文字

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf8">
        <title>CSS3内容处理-在编号中追加文字 | 虾咪博客(shrimsea.com)!</title>
        <style type="text/css">
        *{margin:0; padding:0;}
                body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}
                h2{counter-increment:myCounter;}
                h2:before{content:"第"counter(myCounter)"章:";}
        </style>
    </head>
    
    <body>
        <h2>大标题:虾咪博客(shrimsea.com)!</h2>
        <p>虾咪博客是一个值得收藏的网站.</p>
        <h2>大标题:虾咪博客(shrimsea.com)!</h2>
        <p>虾咪博客是一个值得收藏的网站.</p>
        <h2>大标题:虾咪博客(shrimsea.com)!</h2>
        <p>虾咪博客是一个值得收藏的网站.</p>
        <h2>大标题:虾咪博客(shrimsea.com)!</h2>
        <p>虾咪博客是一个值得收藏的网站.</p>
        <h2>大标题:虾咪博客(shrimsea.com)!</h2>
        <p>虾咪博客是一个值得收藏的网站.</p>
    </body>
</html>

人已赞赏
设计园地

给文本文字添加图片背景

2018-5-26 0:17:19

设计园地

网站使用 rel="noopener" 打开外部锚

2018-7-4 11:55:40

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索