Barru Navigasi CSS

演示：导航栏

垂直导航栏

水平导航栏


导航栏

易用的导航对于任何网站都很重要。

通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。

导航栏 = 链接列表

导航栏需要标准 HTML 作为基础。

在我们的实例中，将用标准的 HTML 列表构建导航栏。

导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义：

Contoh

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Coba Sendiri

Sekarang, hapus butiran senarai serta marjin luar dan marjin dalaman (isian) daripada senarai:

Contoh

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Coba Sendiri

Pengertian Contoh:

  • list-style-type: none; - Buang butiran senarai. Baris penghubung tidak memerlukan tanda butiran.
  • tetapkan margin: 0; dan padding: 0; Buang tetapan lalai pemeriksa

Kod di contoh di atas adalah kod standar yang digunakan dalam navigasi tinggi dan horizontal, dan anda akan belajar lebih banyak tentang hal ini di bab berikutnya.