How to create a section counter using HTML and CSS?-CSS Tutorial-php.cn

How to create a section counter using HTML and CSS?

王林

Release： 2023-08-25 20:01:06

forward

725 people have browsed it

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

As the complexity of websites increases, it becomes increasingly important for web developers to implement intuitive and user-friendly navigation systems that allow users to easily navigate the content on the web page. important. In recent years, a navigation element called a “section counter” has become increasingly popular, providing users with clear understanding.

What is a 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.

Block counters are helpful for users, especially when the web page has many sections or sub-sections, to help users keep track of where they are on the web page. With the block counter, users can quickly switch to the section they want and also see the overall structure of the web page.

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 Property

To create a section counter in HTML and CSS, we need the following properties.

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 − The content attribute is used to specify the content to be displayed in the element.

The Chinese translation of

Example 1

is:

Example 1

Here is a simple example of a chapter counter using HTML and 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>

Copy after login

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>

Copy after login

in conclusion

Creating a chapter counter using HTML and CSS is a simple way to help visitors navigate your website. By organizing content into chapters and using CSS to display counters, we can make it easier for users to keep track of where they are on the site. With basic HTML and CSS techniques, we can create a chapter counter suitable for our website, helping to improve the user experience.

The above is the detailed content of How to create a section counter using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!