zoukankan      html  css  js  c++  java
  • css的content属性,以及如何通过css content属性实现css计数器?

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>css的content属性,以及如何通过css content属性实现css计数器?</title>
        <style>
            body{margin:0;padding:0;}
            
            .m-container{background:#000080;border:1px solid red;}
            .m-left{float:left;20%;height:200px;background:#DDD}
            .m-clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
            .m-clearfloat{zoom:1} 
    
            .m-test ol { counter-reset: section; list-style-type: none; }
            .m-test ol li { counter-increment: section; }
            .m-test ol li:before { content: counters(section, "-") ". "; }
            /*.m-test ol li:before { content: counters(section, "-", upper-roman) ". "; } */ /*大写罗马数字*/
            /*.m-test ol li:before { content: counters(section, "-", lower-alpha) ". "; }*/ /*字母*/
        </style>
    </head>
    <body>
    
    <div class="m-container m-clearfloat">
        <div class="m-left">Left</div>
    </div>
    
    <div class="m-test">
        <ol>
            <li>水果
                <ol>
                    <li>苹果</li>
                    <li>苹果</li>
                    <li>苹果</li>
                </ol>
            </li>
            <li>水果
                <ol>
                    <li>香蕉</li>
                    <li>
                        香蕉
                        <ol>
                            <li>海南香蕉</li>
                            <li>海南香蕉</li>
                            <li>海南香蕉</li>
                            <li>海南香蕉</li>
                        </ol>
                    </li>
                    <li>香蕉</li>
                </ol>
            </li>
            <li>水果</li>
        </ol>
    </div>
     
    </body>
    </html>



    备注:欢迎加入web前端求职招聘qq群:668352707

  • 相关阅读:
    Consul常用命令
    ECharts 避免变窄
    TP3.2 日期默认格式
    新订单提示效果
    php 按照字典序排序 微信卡券签名算法用到
    td宽度自适应 窄的地方自动收缩
    git 删除本地分支,删除远程分支
    分页Model
    chrome表单自动填充如何取消
    tp3.2 如何比较两个字段
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924877.html
Copyright © 2011-2022 走看看