Comment créer un compteur de sections en utilisant HTML et CSS ?-tutoriel CSS-php.cn

Comment créer un compteur de sections en utilisant HTML et CSS ?

王林

Libérer： 2023-08-25 20:01:06

avant

838 Les gens l'ont consulté

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

À mesure que la complexité des sites Web augmente, il devient de plus en plus important pour les développeurs Web de mettre en œuvre des systèmes de navigation intuitifs et conviviaux qui permettent aux utilisateurs de naviguer facilement dans le contenu de la page Web. Ces dernières années, un élément de navigation appelé « compteur de sections » est devenu de plus en plus populaire, offrant aux utilisateurs une compréhension claire.

Qu'est-ce qu'un compteur de sections ?

Un compteur de section en HTML et CSS est un élément visuel qui affiche le numéro de section actuel ou la position de l'utilisateur dans une page Web, généralement affiché dans un menu de navigation ou à côté de l'en-tête de section.

Les compteurs de blocages sont utiles aux utilisateurs, en particulier lorsque la page Web comporte de nombreuses sections ou sous-sections, pour aider les utilisateurs à savoir où ils se trouvent sur la page Web. Avec le compteur de blocages, les utilisateurs peuvent rapidement basculer vers la section de leur choix et également voir la structure globale de la page Web.

Les compteurs de sections sont généralement implémentés à l'aide de compteurs CSS, qui permettent aux développeurs Web de créer et de manipuler des compteurs à diverses fins. En utilisant CSS pour styliser et afficher le compteur, les développeurs Web personnalisent l'apparence du compteur pour l'adapter à la conception et à l'esthétique de celui-ci. le site Web.

Propriété du compteur de sections

Pour créer un compteur de sections en HTML et CSS, nous avons besoin des propriétés suivantes.

counter-reset - La propriété counter-reset est utilisée pour initialiser un compteur CSS. Un compteur est une variable qui peut être incrémentée ou décrémentée à l'aide de la propriété counter-increment, et elle est couramment utilisée pour garder une trace du nombre. de fois un élément sur une page Web.
counter-increment - La propriété counter-increment est utilisée pour incrémenter un compteur CSS. Nous utilisons cette propriété pour augmenter la valeur du compteur chaque fois qu'un élément spécifique apparaît sur la page Web.
content - L'attribut content est utilisé pour spécifier le contenu à afficher dans l'élément.

La traduction chinoise de

Exemple 1

est :

Exemple 1

Voici un exemple simple de compteur de chapitres utilisant HTML et 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>

Copier après la connexion

Exemple 2

Dans l'exemple ci-dessous, nous créons un compteur de sections animé à l'aide de HTML et 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>

Copier après la connexion

Conclusion

Créer un compteur de chapitres en utilisant HTML et CSS est un moyen simple d'aider les visiteurs à naviguer sur votre site Web. En organisant le contenu en chapitres et en utilisant CSS pour afficher les compteurs, nous pouvons permettre aux utilisateurs de savoir plus facilement où ils se trouvent sur le site. Avec des techniques HTML et CSS de base, nous pouvons créer un compteur de chapitres adapté à notre site Web, contribuant ainsi à améliorer l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!