zoukankan      html  css  js  c++  java
  • 对多个项目添加连续编号示例

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <style type="text/css">
            /*h1:before {
            content:'第'counter(mycounter)'章'
            }*/
    
            /*添加样式 颜色:blue,字体42px*/
             /*h1:before {
            content:counter(mycounter)'.';
            color:blue;
            font-size:42px;
           
            }*/
        
           /*添加样式 颜色:blue,字体42px 计数:upper-alpha*/
            /*h1:before {
            content:counter(mycounter,upper-alpha)'.';
            color:blue;
            font-size:42px;
           
            }*/
             /*<元素>{
            counter-increment:计数器名
         }*/
            /*h1 {
            counter-increment:mycounter;
        
            }*/
    
            h1:before {
            content:counter(mycounter)'.';
            color:skyblue;
            /*font-size:20px;*/
            }
            h1 {
            counter-increment:mycounter;
            counter-reset:subcounter;
            }
    
            h2:before {
            content:counter(mycounter)'-'counter(subcounter)'.';
            color:skyblue;
            /*font-size:20px;*/
            }
            h2 {
            counter-increment:subcounter;
            counter-reset:subsubcounter;
            margin-left:40px;
            }
    
            h3:before {
            content:counter(mycounter)'-'counter(subcounter)'-'counter(subsubcounter)'.';
            color:skyblue;
            /*font-size:20px;*/
            }
            h3 {
            counter-increment:subsubcounter;
           margin-left:40px;
        
            }
        </style>
    </head>
    <body>
        <!--<h1>大标题</h1>
        <p>示例文字</p>
        <h1>大标题</h1>
        <p>示例文字</p>
        <h1>大标题</h1>
        <p>示例文字</p>
        <h1>大标题</h1>
        <p>示例文字</p>-->
        <h1>大标题</h1>
        <h2>中标题</h2>
        <h3>小标题</h3>
        <h3>小标题</h3>
        <h2>中标题</h2>
        <h3>小标题</h3>
        <h3>小标题</h3>
        <h1>大标题</h1>
        <h2>中标题</h2>
        <h3>小标题</h3>
        <h3>小标题</h3>
        <h2>中标题</h2>
        <h3>小标题</h3>
        <h3>小标题</h3>
    </body>
    </html>


    效果如下:

  • 相关阅读:
    Maven打jar包
    windows关闭占用某端口的进程
    windows系统下发布python模块到pypi
    【转】vmware 安装 osx 无法登录 appstore 的解决办法 (伪造smbios设备信息)
    【转】Java并发编程:volatile关键字解析
    自定义JSP标签
    不一样的ssm
    eclipse制作exe文件
    ftp服务器搭建及简单操作
    OC中的socket通信
  • 原文地址:https://www.cnblogs.com/jason-davis/p/4012285.html
Copyright © 2011-2022 走看看