Bagaimana untuk membuat kaunter bahagian menggunakan HTML dan CSS?-tutorial css-php.cn

Bagaimana untuk membuat kaunter bahagian menggunakan HTML dan CSS?

王林

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

ke hadapan

838 orang telah melayarinya

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

Apabila kerumitan tapak web semakin meningkat, semakin penting bagi pembangun web untuk melaksanakan sistem navigasi intuitif dan mesra pengguna yang membolehkan pengguna menavigasi kandungan pada halaman web dengan mudah. Dalam beberapa tahun kebelakangan ini, elemen navigasi yang dipanggil "kaunter bahagian" telah menjadi semakin popular, memberikan pengguna pemahaman yang jelas.

Apakah kaunter bahagian?

Kaunter bahagian dalam HTML dan CSS ialah elemen visual yang memaparkan nombor bahagian semasa atau kedudukan pengguna dalam halaman web, biasanya dipaparkan dalam menu navigasi atau bersebelahan dengan pengepala bahagian.

Sekat kaunter berguna untuk pengguna, terutamanya apabila halaman web mempunyai banyak bahagian atau sub-bahagian, untuk membantu pengguna menjejaki di mana mereka berada di halaman web. Dengan kaunter blok, pengguna boleh bertukar dengan cepat ke bahagian yang mereka mahu dan juga melihat struktur keseluruhan halaman web.

Kaunter bahagian biasanya dilaksanakan menggunakan kaunter CSS, yang membolehkan pembangun web mencipta dan memanipulasi kaunter untuk pelbagai tujuan Dengan menggunakan CSS untuk menggayakan dan memaparkan kaunter, pembangun web menyesuaikan penampilan kaunter agar sesuai dengan reka bentuk dan estetika. laman web.

Harta Kaunter Bahagian

Untuk membuat pembilang bahagian dalam HTML dan CSS kami memerlukan sifat berikut.

kenaikan balas
.
kandungan
Terjemahan bahasa Cina bagi Contoh 1
ialah:

Berikut ialah contoh mudah pembilang bab menggunakan HTML dan 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>

Salin selepas log masuk

Contoh 2

Dalam contoh di bawah, kami mencipta kaunter bahagian animasi dengan bantuan HTML dan 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>

Salin selepas log masuk

Kesimpulan

Membuat kaunter bab menggunakan HTML dan CSS ialah cara mudah untuk membantu pelawat anda menavigasi tapak web anda. Dengan menyusun kandungan ke dalam bab dan menggunakan CSS untuk memaparkan pembilang, kami boleh memudahkan pengguna menjejaki di mana mereka berada di tapak. Dengan teknik asas HTML dan CSS, kami boleh mencipta pembilang bab yang sesuai untuk tapak web kami, membantu meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk membuat kaunter bahagian menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!