Bagaimana untuk membuat bar navigasi menegak menggunakan HTML dan CSS?-html tutorial-php.cn

Bagaimana untuk membuat bar navigasi menegak menggunakan HTML dan CSS?

WBOY

Lepaskan： 2023-09-24 19:49:03

ke hadapan

1621 orang telah melayarinya

Bagaimana untuk membuat bar navigasi menegak menggunakan HTML dan CSS?

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>

Salin selepas log masuk

Gunakan tag navigasi

Cara kedua untuk membina bar navigasi menegak menggunakan HTML dan CSS ialah menggunakan tag navigasi. HTML5 menambahkan teg

yang digunakan secara khusus untuk navigasi. Anda boleh membuat bar navigasi menggunakan 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>

Salin selepas log masuk

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 (

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!