[ 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'>
    ul{list-style-type:none;}
    #main{font:400 13px/1.2em 微软雅黑;}
    ul{counter-reset:reset 0;}
    ul > li:before{
        content:counters(reset,'-')'.    ';
        counter-increment:reset 1;
    }
</style>
</head>
<body>
    <div id='main'>
        <div class='count'>部门:
            <ul class='reset'>
                <li>市场部:
                    <ul>
                        <li>张三<经理></li>
                        <li>李四<部员></li>
                    </ul>
                </li>
                <li>开发部:
                    <ul>
                        <li>王五<经理></li>
                        <li>赵六<部员></li>
                    </ul>
                </li>
                <li>研究部:
                    <ul>
                        <li>何七<经理></li>
                        <li>沈八<部员></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

 

posted @ 2016-07-07 11:45  窗棂  Views(135)  Comments(0Edit  收藏  举报