如何使用HTML和CSS创建部分计数器

随着网站的复杂性增加，Web开发人员越来越重要的一项任务是实现直观且用户友好的导航系统，使用户能够轻松浏览网页上的内容。近年来，一种名为部分计数器的导航元素变得越来越受欢迎，它为用户提供了清晰的理解。

什么是部分计数器

HTML和CSS中的部分计数器是一种可视化元素，通常显示在导航菜单或部分标题旁，用于显示用户在网页中的当前部分编号或位置。

部分计数器有助于用户跟踪其在网页上的位置，特别是当网页具有许多部分或子部分时。使用部分计数器，用户可以快速切换到他们想要访问的部分，并且还可以看到网页的整体结构。

部分计数器通常使用CSS计数器实现，这允许Web开发人员为各种目的创建和操作计数器。通过使用CSS来样式和显示计数器，Web开发人员可以根据网站的设计和美学自定义计数器的外观。

部分计数器属性

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

counter-reset - 该属性用于初始化CSS计数器。计数器是一个变量，可以使用counter-increment属性递增或递减，通常用于跟踪网页上某个元素出现的次数。
counter-increment - 该属性用于递增CSS计数器。我们使用这个属性来每次特定元素出现在网页上时增加计数器的值。
content - 该属性用于指定应该为一个元素显示的内容。

示例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>

示例2

在下面的示例中，我们借助HTML和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>