如何使用 HTML 和 CSS 创建区块计数器?

cssweb developmentfront end technology更新于 2024/1/12 13:32:17

随着网站日益复杂，对于 Web 开发者来说，实现直观且用户友好的导航系统变得越来越重要，这样用户才能轻松浏览网页内容。近年来，区块计数器就成为一种流行的导航元素，它能够帮助用户清晰地了解内容。

什么是区块计数器?

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

区块计数器有助于用户跟踪他们在网页上的位置，尤其是在网页包含许多区块或子区块的情况下。使用区块计数器，用户可以快速切换到所需的区块，同时还可以查看网页的整体结构。

区块计数器通常使用 CSS 计数器实现，这使得 Web 开发者能够创建和操作用于各种用途的计数器。通过使用 CSS 设置计数器的样式和显示，Web 开发者可以自定义计数器的外观，使其与网站的设计和美观度相得益彰。

区块计数器属性

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

counter-reset − counter-reset 属性用于初始化 CSS 计数器。计数器是一个变量，可以使用 counter-increment 属性进行递增或递减，通常用于跟踪网页上元素的出现次数。
counter-increment − counter-increment 属性用于递增 CSS 计数器。每当网页上出现特定元素时，我们都会使用此属性增加计数器的值。
content − 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>