首页 > Web开发 > 详细

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

时间:2016-07-07 12:44:07      阅读:196      评论:0      收藏:0      [点我收藏+]
<!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>

 

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

原文:http://www.cnblogs.com/mysearchblog/p/5649545.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!