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

最新推荐文章于 2024-01-30 19:06:20 发布

weixin_39525933

最新推荐文章于 2024-01-30 19:06:20 发布

阅读量256

点赞数

文章标签： application实现网页计数 html select设置默认值

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

weixin_39525933

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
application实现网页计数_HTML+CSS 基础知识-计数器

1、概述实质：计数器就是初始化变量然后进行自增赋值，就类似 a+=1CSS 中的计数器本质上来说就是由 CSS 维护的变量，计数器的值可以通过 CSS 规则递增来跟踪计数器的使用次数，例如可以使用计数器来自动为网页中的标题编号。简单来说，有序列表就是一个比较简单的计数器，但计数器可以实现编号更为复杂的情况。<!DOCTYPE html><html lang="en"&g...
复制链接

扫一扫