首頁 > 文章 > web前端 > 如何使用 HTML 和 CSS 建立節計數器？

如何使用 HTML 和 CSS 建立節計數器？

王林轉載: 2023-08-25 20:01:06740瀏覽

如何使用 HTML 和 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 devperselo custom the appearance the display the counter, web devperselo custom the appearance. 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>

結論

使用HTML和CSS建立章節計數器是幫助訪客瀏覽網站的簡單方法。透過將內容組織成章節並使用CSS顯示計數器，我們可以讓使用者更容易追蹤他們在網站上的位置。透過基本的HTML和CSS技術，我們可以建立一個適用於網站的章節計數器，從而幫助改善使用者體驗。

以上是如何使用 HTML 和 CSS 建立節計數器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html for using Property number this display position

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：CSS 中設定頁面大小的值下一篇：CSS 中設定頁面大小的值

看更多