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. open ssh 常用的东西

    清除已经存在的但是不同设备的连接信息 ssh-keygen -f "/users/he/.ssh/known_hosts" -R 192.168.1.118 无密码登录openss ...

  2. python模块详解 shelve

    shelve模块是一个简单的k,v 将内存数据通过文件持久化的模块,可以持久化任何pickle可以支持的python数据.简单的说对 pickle的更上一层的封装. 写文件 import shelve ...

  3. 【js基础修炼之路】— 我理解的原型链

    提起原型链,大家并不陌生,但是对于新人来说一提到原型方面的东西就会比较懵.在我自一次面试的时候,面试官也给我提了这样的问题,当时就按照我的理解说了一些,但是很肤浅,在此我希望给刚入门的前端小伙伴聊一下 ...

  4. Uva 10375 选择与除法 唯一分解定理

    题目链接:https://vjudge.net/contest/156903#problem/E 题意:已知 求:C(p,q)/C(r,s) 其中p,q,r,s都是10^4,硬算是肯定超数据类型的. ...

  5. B. Qualifying Contest_排序

    B. Qualifying Contest time limit per test 1 second memory limit per test 256 megabytes input standar ...

  6. python 面向对象(三)--继承和多态

    在OOP程序设计中,当我们定义一个class的时候,可以从某个现有的class继承,新的class称为子类(Subclass),而被继承的class称为基类.父类或超类(Base class.Supe ...

  7. Python IDE PyCharm的快捷键大全

    Python IDE PyCharm的快捷键大全 1.编辑(Editing) Ctrl + Space 基本的代码完成(类.方法.属性) Ctrl + Alt + Space 快速导入任意类 Ctrl ...

  8. cudaMallocPitch – 向GPU分配存储器

    概要 cudaError_t cudaMallocPitch( void** devPtr,size_t* pitch,size_t widthInBytes,size_t height ) 说明 向 ...

  9. Linux利用i节点删除乱码文件

    Linux删除乱码文件 当文件名为乱码的时候,无法通过键盘输入文件名,所以在终端下就不能直接利用rm,mv等命令管理文件了. 但是我们知道每个文件都有一个i节点号,我们可以考虑通过i节点号来管理文件. ...

  10. java.util包中 Set 和 List 的区别

    http://ligaosong.iteye.com/blog/903692 对于Set 和 List都是 接口 Collection 的子接口 1.Set 不允许重复,List允许重复 2.Set ...