如何使用 HTML 和 CSS 创建节计数器？

原创

ithorizon 5个月前 (10-19) 阅读数 41 #CSS

随着网站的复杂性增加，对于网页开发人员来说，实施直观和用户友好的导航系统，让用户可以轻松浏览网页上的内容变得越来越重要。近年来，一种名为“section counter”的导航元素越来越受欢迎，它为用户提供了清晰的理解。

什么是节计数器？

A section counter in HTML and CSS is a visual element that displays the current section number or position of the user in a webpage, usually displayed in a navigation menu or alongside the section header.

区块计数器对于用户来说是很有帮助的，特别是当网页有很多部分或子部分时，可以帮助用户跟踪他们在网页上的位置。通过区块计数器，用户可以快速切换到他们想要的部分，并且还可以看到网页的整体结构。

Section counters are usually implemented using CSS counters, which allow web developers to create and manipulate counters for a variety of purposes. By using CSS to style and display the counter, web developers customize the appearance of the counter to fit the design and aesthetics of the website.

立即学习“前端免费学习笔记（深入）”；

Section Counter属性

要在HTML和CSS中创建一个部分计数器，我们需要以下属性。

counter-reset − The counter-reset property is used to initialize a CSS counter. A counter is a variable that can be incremented or decremented using the counter-increment property, and it is commonly used to keep track of the number of times an element on a webpage.
counter-increment − The counter-increment property is used to increment a CSS counter. We use this property to increase the value of the counter each time a specific element appears on the webpage.
content − content属性用于指定要显示在元素中的内容。

Example 1

的中文翻译为：

示例 1

这里是使用HTML和CSS的章节计数器的简单示例

<html>
<head>
   <style>
      body {
         counter-reset: section;
         background-color:#dee3e0;
      }
      h2::before {
         counter-increment: section;
         content: "Section " counter(section) ". ";
      }
   </style>
</head>
   <body>
      <h2>First Secction</h2>
      <p>This is the first section of my website.</p>
      <h2>Second Section</h2>
      <p>This is the second section of my website.</p>
      <h2>Third Section</h2>
      <p>This is the third section of my website.</p>
   </body>
</html>

Example 2

In the below example, we create an animated section counter with the help of HTML and CSS.

<!DOCTYPE html>
<html>
   <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">
   <style>
      * {
         box-sizing: border-box;
      }

      /* 4 counters of 25% of screen size*/
      .column {
         float: left;
         width: 25%;
         padding: 4px;
      }
      .row {
         margin: 5px;
      }

      /* Style the block*/
      .block {
         padding: 10px;
         text-align: center;
         background-color: #bccfc1;
         color: black;
      }

      /* Styling when mouse will move over the counter*/
      .block:hover {
         transform: scale(1.1);
         background-color: red;
         transition-duration: 2s;
         color: white;
      }
      .fa {
         font-size: 60px;
      }
   </style>
</head>
   <body>
      <center>
         <h3> Create Counter Section using HTML and CSS </h3>
         <section class="row">
            <section class="column">
               <section class="block">
                  <p><i class="fa fa-user"></i></p>
                  <h3>200000+</h3>
                  <p>Users</p>
               </section>
            </section>
            <section class="column">
               <section class="block">
                  <p><i class="fa fa-book"></i></p>
                  <h3> 7000+ </h3>
                  <p> Courses </p>
               </section>
            </section>
            <section class="column">
               <section class="block">
                  <p><i class="fa fa-smile-o"></i></p>
                  <h3> 15M+ </h3>
                  <p> Visitors </p>
               </section>
            </section>
            <section class="column">
               <section class="block">
                  <p><i class="fa fa-certificate"></i></p>
                  <h3> 1M+ </h3>
                  <p> Certificates </p>
               </section>
            </section>
         </section>
      </center>
   </body>
</html>