CSS计数器（自定义列表）Demo

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: 0;
    left: 0;
    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: 0;
    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中定义计数器

 

posted @ 2018-01-21 17:34  小白知浅  阅读(273)  评论(0)  编辑  收藏  举报