Bar navigasi ialah ciri grafik yang membolehkan pengguna menavigasi tapak web atau aplikasi. Ia biasanya dibentangkan sebagai senarai pautan di bahagian atas atau sisi skrin dan membantu pengguna menavigasi ke pelbagai kawasan atau halaman dalam tapak web. HTML dan CSS boleh digunakan untuk membina bar navigasi mendatar atau menegak.
HTML digunakan untuk menentukan struktur dan kandungan bar navigasi, manakala CSS digunakan untuk mereka bentuk dan menjadikan bar navigasi kelihatan menarik. Anda boleh meningkatkan keseluruhan pengalaman pengguna dan memudahkan pengguna mencari perkara yang mereka cari di tapak anda dengan menambahkan bar navigasi.
Terdapat banyak cara untuk membina bar navigasi menggunakan HTML dan CSS, antaranya adalah seperti berikut -
Gunakan senarai tidak tertib (UL)
Gunakan tag navigasi
Sekarang mari kita fahami setiap kaedah secara terperinci dengan contoh.
Cara pertama untuk membina bar navigasi menegak menggunakan HTML dan CSS ialah menggunakan senarai tidak tertib (UL). Anda boleh membuat bar navigasi dalam HTML menggunakan Senarai Tidak Tertib (UL) dan Item Senarai (LI) dan menghiasinya dengan CSS.
Berikut ialah contoh mencipta bar navigasi menegak menggunakan senarai tidak tertib (UL) dalam HTML dan CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
background-color: #333;
width: 200px;
height: 100%;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: block;
}
.navbar a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #111;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Cara kedua untuk membina bar navigasi menegak menggunakan HTML dan CSS ialah menggunakan tag navigasi. HTML5 menambahkan teg
Berikut ialah contoh mencipta bar navigasi menegak menggunakan teg navigasi dalam HTML dan CSS.
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 200px;
height: 100%;
background-color: #333;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: block;
}
a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: #111;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
Mencipta bar navigasi menegak menggunakan HTML dan CSS ialah proses mudah yang boleh dilakukan dalam pelbagai cara. Kaedah yang paling biasa ialah menggunakan senarai tidak tertib (
Atas ialah kandungan terperinci Bagaimana untuk membuat bar navigasi menegak menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
