• [ css 计数器 counter ] css中counter计数器实例演示一


    <!DOCTYPE html>
    <html lang='zh-cn'>
    <head>
    <title>Insert you title</title>
    <meta http-equiv='description' content='this is my page'>
    <meta http-equiv='keywords' content='keyword1,keyword2,keyword3'>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type='text/css'>
        html{font:400 13px/1.2em Courier New;}
        .list-item{padding-left:15px;}
        p{text-indent:25px;}
        .list-item{counter-reset:reset 0;}
        #main{counter-reset:counter 0;}
        .list-item:before{
            content:counter(counter)'.';
            counter-increment:counter 1;
        }
        p:before{
            content:counter(counter)'-'counter(reset)'.';
            counter-increment:reset 1;
        }
    </style>
    </head>
    <body>
        <div id='main'>
            <div class='list'>
                <div class='list-item'>list-item_01
                    <p>this is a test</p>
                    <p>this is a test</p>
                </div>
                <div class='list-item'>list-item_02
                    <p>this is a test</p>
                    <p>this is a test</p>
                    <p>this is a test</p>
                </div>
                <div class='list'></div>
            </div>
            <div class='list'>
                <div class='list-item'>list-item_03
                    <p>this is a test</p>
                    <p>this is a test</p>
                    <p>this is a test</p>
                </div>
                <div class='list-item'>list-item_04
                    <p>this is a test</p>
                    <p>this is a test</p>
                </div>
                <div class='list'></div>
            </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    SpringFlex框架搭建
    SqlDataReader的用法 转自https://www.cnblogs.com/sunxi/p/3924954.html
    C#学习笔记:ListBox控件的用法
    C#栈Stack的使用
    C# 队列Queue
    xshell传送文件
    Java基础中字符串与字符的注意点!
    大数据的基础学习:
    Python的空行
    Python基本语法
  • 原文地址:https://www.cnblogs.com/mysearchblog/p/5649534.html
Copyright © 2020-2023  润新知