application实现网页计数_HTML+CSS 基础知识-计数器

083048109ef2361d8bd68bed9984fbd5.png

1、概述

实质:计数器就是初始化变量然后进行自增赋值,就类似 a+=1

CSS 中的计数器本质上来说就是由 CSS 维护的变量,计数器的值可以通过 CSS 规则递增来跟踪计数器的使用次数,例如可以使用计数器来自动为网页中的标题编号。
​
简单来说,有序列表就是一个比较简单的计数器,但计数器可以实现编号更为复杂的情况。
<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <title>计数器示例</title>
  <style>
    #demo ol {
      counter-reset: section;
      list-style-type: none;
    }
​
    #demo ol li {
      counter-increment: section;
    }
​
    #demo ol li:before {
      content: counters(section, ".") ". ";
    }
  </style>
</head>
​
<body>
  <div id="demo">
    <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>
如上述示例所示,操作计数器的值是通过如下 2 个属性实现:
​
counter-reset 属性
counter-increment 属性
​
在 HTML 页面中显示计数器是通过如下 2 个函数实现:
​
counter() 函数
counters() 函数

2.1、counter-rest 属性(初始化)

实质:变量的初始化

CSS 

2.2、counter-increment 属性(递增或递减)

CSS 

2.3、counter() 函数(打印输出)

CSS 

2.4、counters () 函数

CSS 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值