zoukankan      html  css  js  c++  java
  • [ 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>
  • 相关阅读:
    java final计算
    浅析Java中的final关键字
    easyui
    Java:类与继承
    java中&和&&
    XML
    JSON
    SQL
    selenium
    Metasploit
  • 原文地址:https://www.cnblogs.com/mysearchblog/p/5649534.html
Copyright © 2011-2022 走看看