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. SpringBoot常用应用程序属性

    参考地址: https://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.h ...

  2. 探讨下在Delphi里面进程之间的数据共享

    进程是一个具有一定独立功能的程序关于某个数据集合的一次运行活动.它是操作系统动态执行的基本单元,在传统的操作系统中,进程既是基本的分配单元,也是基本的执行单元.现在小编就和大家来探讨一下在Delphi ...

  3. app接口测试总结

    前段时间在测试一个项目,任务是测试app的API.总结下遇到的问题类型: 1 通过app提交数据,隐形数据有误.(主要通过验证数据库) 比如用户通过app输入工单提交.接口数据中,用户输入的信息都正确 ...

  4. java的sleep方法详解

    java的sleep方法详解: sleep并不是永久占有CPU,没有那个线程能永久占用CPU.它是指在自己时间片内睡眠,而不是急着交出CPU.yield()就是自己愿意立即交出时间片.因此一个线程sl ...

  5. 网格中的BFS，逆向(POJ2049)

    题目链接:http://poj.org/problem?id=2049 解题报告: 网格中的BFS,最主要的是边界问题. 1.这里在左右,上下两个方向上,分别判断墙,和门,细节是,向上有t个墙,for ...

  6. aop 和castle 的一些 学习文章

    https://www.cnblogs.com/zhaogaojian/p/8360363.html

  7. update_TypeError

    TypeError: ( 'An update must have the same type as the original shared variable ( shared_var=W, shar ...

  8. centos7 kvm安装使用

    kvm简介 KVM 全称是 Kernel-Based Virtual Machine.也就是说 KVM 是基于 Linux 内核实现的. KVM有一个内核模块叫 kvm.ko,只用于管理虚拟 CPU ...

  9. MongoDB在MFC下使用C++驱动编译错误的解决

    .post p{text-indent: 2em;} 今天使用MongoDB的C++驱动,在编译连接的时候一直出现错误,显示的string_data.h下93行max宏的问题,可视其本身并不是调用ma ...

  10. HttpServerUtility 和 HttpUyility

    参考:msdn HttpServerUtility 提供用于处理 Web 请求的 Helper 方法. 2017/08/07            加密解码 这个类没有构造函数,所以不能直接new. ...