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>
  • 相关阅读:
    C# 3.0特性
    C# 4.0特性
    Mvc系统学习9——Areas学习
    MVC系统学习8——AsyncController
    MVC系统学习7—Action的选择过程
    MVC系统学习6—Filter
    MVC系统学习5——验证
    对象排序
    Spring上下文信息获取简单实现
    设计模式
  • 原文地址:https://www.cnblogs.com/mysearchblog/p/5649534.html
Copyright © 2011-2022 走看看