zoukankan      html  css  js  c++  java
  • css中计数器的实现-笔记


    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485533&idx=1&sn=e88dc5fffa60aeec13b341c1b90954dd&source=41#wechat_redirect

    利用到的知识
    伪类
    counter-reset属性,设置增量起始
    counter-increment属性,设置增量的数值
    content属性计算增量
    counter函数

    代码格式如下,注意里面注释

    <!--实现每个ul从1开始计数,显示数字-->
    <!--每个li在ul里面从1开始计数-->
    <ul class="box">标题1
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
    </ul>
    <ul class="box">标题2
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
    </ul>
    <ul class="box">标题3
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
    </ul>

    <style>

    body {
    /*名称随便起,但是要定义在你想计数容器的父容器上*/
    counter-reset: startVal;
    }

    ul {
    /*名称随便起*/
    counter-reset: contentCounter;
    }

    /*利用css中的伪类*/
    ul:before {
    /*定义增量,第一个参数是开始数值,第二个参数是一次增加数量,可以是正数也可以是负数*/
    counter-increment: startVal 3;
    /*这里是计数函数,第一个参数是开始数值,第二个参数可选是显示样式,具体参数不罗列,智能提示有*/
    content: '这里显示标题--' counter(startVal);
    }

    li:before {
    counter-increment: contentCounter;
    content: '内容列表--' counter(contentCounter);
    }
    </style>

  • 相关阅读:
    18网三袁昳 实验三
    18网三袁昳 网络对抗技术实验二
    18网三袁昳 网络对抗技术实验一
    实验六
    实验五(18网三43号)
    实验四 18网三43号
    实验三(18网三43号)
    实验二(18网三43号袁昳)
    实验一(18网三43号)
    实验四(恶意代码技术)
  • 原文地址:https://www.cnblogs.com/victory820/p/6888253.html
Copyright © 2011-2022 走看看