Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat bar navigasi menegak menggunakan HTML dan CSS?
Bagaimana untuk membuat bar navigasi menegak menggunakan HTML dan CSS?
- WBOYke hadapan
- 2023-09-24 19:49:031568semak imbas
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.
kaedah
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.
Gunakan senarai tidak tertib (UL)
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.
Contoh
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>
Gunakan tag navigasi
Cara kedua untuk membina bar navigasi menegak menggunakan HTML dan CSS ialah menggunakan tag navigasi. HTML5 menambahkan teg
Contoh
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>
KESIMPULAN
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 (
- ) atau teg
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!