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. python-daemon

    http://legacy.python.org/dev/peps/pep-3143/#python-daemon install yum install python-daemon example ...

  2. System Center Configuration Manager 2016 必要条件准备篇（Part4）

    步骤4.重新启动Configuration Manager主服务器 注意:在Configuration Manager服务器(CM01)上以本地管理员身份执行以下操作 打开管理命令提示符并发出以下 ...

  3. COGS 678. 双重回文数

    ★   输入文件:dualpal.in   输出文件:dualpal.out   简单对比时间限制:1 s   内存限制:128 MB Dual Palindromes 双重回文数 描述 [USACO ...

  4. PHP：__get()、__set()、__isset()、__unset()、__call()、__callStatic()六个魔术方法

    哎呀呀,今天小仓鼠学到了魔术方法,简称魔法,哈哈哈哈,神经病啊~ 平时在面试的时候,也会遇到问魔术方法有哪些的问题哦!今天我们来了解一下下~ 1.__get() 形式: __get($objName) ...

  5. Altium_Designer-PCB中布局元器件时的翻转问题

    这个问题是我在第一次对PCB元器件布局时发现的,当时我绘制好原理图生成PCB后,出现了这样一个情况: 在我反复尝试走线后,走好线发现很困难,最后我才想到如果能把这个器件反转一下问题不就都解决了吗!自己 ...

  6. QT学习之QScript

    QT中有解析Json的一个类叫QScript.貌似还有一个QJson,但听说解析的方便性不如QScript,具体没有深入探究,这里仅简单记录一下QScript的使用. 首先,主要使用到的类有QScri ...

  7. 幻灯片的JQuqey的制作效果，只要几行代码

    使用jquery.KinSlideshow.js就可以很轻松的实现幻灯片效果   htm代码: [html]   <div id="focusNews" style=&quo ...

  8. node.js 下使用 util.inherits 来实现继承

    上一篇博客说到了node.js继承events类实现事件发射和事件绑定函数,其中我们实现了一个公用基类 _base ,然后在模型中差异化的定义了各种业务需要的模型并继承 _base 公共基类.但是其中 ...

  9. 创建Android环境并且安装cordova

    需要eclipse.Andriod SDK.java.Apache ant.Node.js.Genymotion 目录链接: 1.安装adt-eclipse 2.安装JAVA 3.安装Apache a ...

  10. Oracle 使用Nid 修改数据库的DBID 和 Database Name

    How to Change the DBID, DBNAME Using NID Utility (Doc ID 863800.1) Changing the DBID and Database Na ...