html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/begin.css"/>

    </head>

    <body>

        <section>

            <h2>登记个人信息</h2>

            <ol>

                <li>课程进度推进通知</li>

                <li>即时沟通

                    <ol>

                        <li>QQ</li>

                        <li>微信</li>

                    </ol>

                </li>

                <li>快递收件地址</li>

            </ol>

        </section>

        <section>

            <h2>熟悉课程出品流程</h2>

            <figure>

                课程出品流程

            </figure>

        </section>

        <section>

            <h2>观看在线示例课程</h2>

            <figure>

                Dart语言开发

            </figure>

            <figure>

                Docker知识体系

            </figure>

        </section>

    </body>

</html>

css

body {

    background-color: #eee;

    color: #666;

    counter-reset: xiaobaizhiqian;

}

section {

    width: 800px;

    margin: 0 auto 20px auto;

    background-color: #fff;

    padding: 10px 20px 20px 20px;

    position: relative;

    overflow: hidden;

    counter-increment: xiaobaizhiqian;

    counter-reset: xiaobaizhiqian-pic;

}

section p {

    line-height: 1.5;

}

figure::before,li::before,section:before{

    font-weight: bold;

    color: #FF5C00;

}

section:before {

    content: "「新手任务-"counter(xiaobaizhiqian)"」";

    background-color: #35B558;

    color: #fff;

    text-align: center;

    position: absolute;

    top:;

    left:;

    padding: 15px 20px;

}

@-moz-document url-prefix() {

    section:before{

        content: "「新手任务-"counter(xiaobaizhiqian,simp-chinese-formal)"」";

    }

}

section h2 {

    position: relative;

    top: -20px;

    left: 168px;

}

ol {

    list-style: none;

    counter-reset: xiaobaizhiqian-li;

}

li::before {

    counter-increment: xiaobaizhiqian-li;

    content:counters(xiaobaizhiqian-li,".")"：";

}

figure {

    padding:;

    margin: 0 20px 20px 0;

    display: inline-block;

}

figure::before {

    counter-increment: xiaobaizhiqian-pic;

    content: "图"counter(xiaobaizhiqian-pic,lower-roman);

}

 注意：要将计数器应用在哪个元素上，就在其父元素定义计数器，如果并列有多个元素，那么在这几个元素共同的父元素定义计数器，如本例中有多个section，如果需要每个section都使用计数器，那么就需要将计数器定义在body上；再举个例，本例中给figure标签使用计数器，将计数器定义在了section标签中，离开了section标签后，figure标签计数器便会重新从1开始，如果要使其连贯，则将计数器定义在body中即可

在section中定义计数器

在body中定义计数器

CSS计数器（自定义列表）Demo的更多相关文章

  1. CSS计数器(序列数字字符自动递增)详解———张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4303 一.挖坟不可耻 ...

  2. CSS计数器（自定义列表）

    概念 CSS3计数器(CSS Counters)可以允许我们使用css对页面中的任意元素进行计数,实现类似于有序列表的功能(自定义有序列表) 与有序列表相比,它的突出特性在于可以对任意元素计数,同时实 ...

  3. 使用CSS计数器美化数字有序列表

    在web设计中,使用一种井井有条的方法来展示数据是十分重要的,这样用户就可以很清晰的理解网站所展示的数据结构和内容,使用有序列表就是实现数据有组织的展示的一种简单方法. 如果你需要更加深入地控制有序列 ...

  4. 排行榜妙用——CSS计数器

    碰到的坑 小伙伴你们是否有碰到以下的情况,排行榜前3名的样式不一样,你们是怎么处理的么?

  5. css计数器详解

    什么是css计数器 体验更佳排版请戳原文链接:http://blog.liuxianan.com/css-counters.html 就是采用css给一些html元素自动生成编号,比如类似1.3.2这 ...

  6. CSS计数器妙用

    做web的经常会遇到类似排行榜的需求, 特别是要求前n名的样式和后面人不一样. 通常大多数人对于这个需求的做法都是在后端处理好排名名次, 在前端填入内容, 然后针对前n名做特殊的样式处理. 但是这样有 ...

  7. Vuex 教程案例：计数器以及列表展示

    本案例github:https://github.com/axel10/Vuex_demo-Counter-and-list 本篇教程将以计数器及列表展示两个例子来讲解Vuex的简单用法. 从安装到启 ...

  8. CSS 计数器详解

    在前端开发中总少不了列表项,对于列表项序号,射鸡师一般会列出个1,2,3...序号.在不了解css计数器属性之前,我一般会用精灵图,用类名来区分序列号图片.这样做尽管可以达到目的,但是很不方便,开发过 ...

  9. 转载：CSS计数器的趣味时光之css计算数据

    CSS计数器是“啊太好了,竟不知道CSS可以做这啊”这类非常有趣的众多特性之一.简言之,用CSS使你持续某增加某个量,而无需JavaScript. 简单计数器 我们从这个简单的分页示例开始: 你见到的 ...

  10. CSS计数器的趣味时光

    CSS计数器是“啊太好了,竟不知道CSS可以做这啊”这类非常有趣的众多特性之一.简言之,用CSS使你持续某增加某个量,而无需JavaScript. 简单计数器 我们从这个简单的分页示例开始: 你见到的 ...

随机推荐

  1. Struts2_总结

    还未学习的内容,如果到时候要用到,再去学.1.Lamda 表达式(很复杂,很少用)2.验证框架(默认验证方法 validation.方法开始前验证.开始后验证)3.UI标签(用的不多)4.类型转换中的 ...

  2. 将 Azure SQL 内数据下载到本地，满足企业的「数据收集」

    嫌长不看版 本文介绍了通过复制和导出两个操作,将 Azure SQL 数据库中的内容转移至其他位置(例如本地环境)的具体做法.借此可以帮助用户在 Azure 中运行数据库的同时,在本地或指定的其他位置 ...

  3. $("#Upfile").MultiFile();

    Jquery的multifile 1.多文件上传: 2.如上几个验证不重复,和限制上传数量的验证显示的是英文,改成中文文本时,如果不用国标解码,到时候提示框会出现乱码现象.所以一般需要中文显示的时候, ...

  4. 【Troubleshooting 】Outlook 客户端无法显示电子邮件图像

    出于安全原因,Outlook 2013/2016不会在电子邮件中显示图像,但您可以右键单击图像并选择" 下载图片 "选项.我最近注意Outlook停止显示图像,并且没有下载图像的选 ...

  5. vscode：快速生成html的方法

    第一步:在空文档中输入! 第二步:按下tab键. 以上

  6. javascript中的循环引用对象处理

    先说明一下什么是循环引用对象: var a={"name":"zzz"}; var b={"name":"vvv"}; ...

  7. POJ-2352 && hdu-1541 Stars---树状数组的运用

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1541 题目大意 : 在坐标上有n个星星,如果某个星星坐标为(x, y), 它的左下位置为:(x0,y ...

  8. POJ-3041 Asteroids---二分图&最小覆盖点

    题目链接: https://vjudge.net/problem/POJ-3041 题目大意: 给一个N*N的矩阵,有些格子有障碍,要求我们消除这些障碍,问每次消除一行或一列的障碍, 最少要几次. 解 ...

  9. ffmpeg处理RTMP流媒体的命令大全

    最近浏览国外网站时候发现,翻译不准确的敬请谅解. 1.将文件当做直播送至live ffmpeg -re -i localFile.mp4 -c copy -f flv rtmp://server/li ...

  10. 获取页面的url

    设当前页完整地址是:http://www.jb51.net/aaa/bbb.aspx?id=5&name=kelli "http://"是协议名 "www.jb5 ...