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'>
        .reset { padding-left: 20px; counter-reset: wangxiaoer; font:400 16px/1.2em Courier New; }
        .counter:before { content: counters(wangxiaoer, '-') '. '; counter-increment: wangxiaoer;  }
    </style>
    </head>
    <body>
        <div class="reset">
            <div class="counter">我是王小二
                <div class="reset">
                 <div class="counter">我是王小二的大儿子</div>
                    <div class="counter">我是王小二的二儿子
                        <div class="reset">
                            <div class="counter">我是王小二的二儿子的大孙子</div>
                            <div class="counter">我是王小二的二儿子的二孙子</div>
                            <div class="counter">我是王小二的二儿子的小孙子</div>
                        </div>
                    </div>
                    <div class="counter">我是王小二的三儿子</div>
                </div>
            </div>
            <div class="counter">我是王小三</div>
            <div class="counter">我是王小四
                <div class="reset">
                    <div class="counter">我是王小四的大儿子</div>
                </div>
            </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    常见makefile写法
    CMake入门指南
    CMAKE的使用
    Google NewSQL之Spanner
    Google Spanner (中文版)
    全球级的分布式数据库 Google Spanner原理
    idea刷新项目、清除项目缓存
    彻底理解Java的Future模式
    Elasticsearch 三种分页方式
    ElasticSearch 深度分页解决方案
  • 原文地址:https://www.cnblogs.com/mysearchblog/p/5649545.html
Copyright © 2011-2022 走看看