Rumah >hujung hadapan web >tutorial css >Bagaimana untuk membuat kaunter bahagian menggunakan HTML dan CSS?
Bagaimana untuk membuat kaunter bahagian menggunakan HTML dan CSS?
- 王林ke hadapan
- 2023-08-25 20:01:06868semak imbas
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.
-
. kali elemen pada halaman web.
-
kenaikan balas − Sifat kenaikan balas digunakan untuk menambah pembilang CSS Kami menggunakan sifat ini untuk meningkatkan nilai pembilang setiap kali elemen tertentu muncul pada halaman web. -
.
kandungan − Atribut kandungan digunakan untuk menentukan kandungan yang akan dipaparkan dalam elemen. -
Terjemahan bahasa Cina bagi Contoh 1
ialah: Contoh 1
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>
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>
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!