Bagaimana untuk membuat: Navigasi atas

Belajar cara menggunakan CSS untuk membuat navigasi atas.

Buat navigasi atas

Kesempatan pertama - Tambahkan HTML：

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

Kesempatan kedua - Tambahkan CSS：

/* Tambah warna latar hitam untuk navigasi atas */
.topnav {
  warna latar: #333;
  lebar: tak terbatas;
}
/* Set tingkat gaya tautan di navigasi */
.topnav a {
  gerak: kiri;
  warna: #f2f2f2;
  penjajaran teks: tengah;
  keluasan: 14px 16px;
  tanda garis tebal: tak ada;
  ukuran tulisan: 17px;
}
/* Ubah warna tautan saat menggerakkan mouse */
.topnav a:hover {
  warna latar: #ddd;
  warna: hitam;
}
/* Tambah warna untuk tautan aktif/tautan saat ini */
.topnav a.active {
  warna latar: #04AA6D;
  warna: putih;
}

Buat percubaan sendiri

相关页面

教程：如何创建响应式顶部导航

教程：CSS 导航栏