Bagaimana untuk membuat: Navigasi bawah

Halaman sebelumnya Menu vertikal
Halaman berikutnya Navigasi bawah yang responsif

Belajar bagaimana untuk menggunakan CSS untuk membuat menu navigasi bawah.

Buat menu navigasi bawah

Kesempatan pertama - Tambahkan HTML：

<div class="navbar">
  <a href="#home" class="active">Rumah</a>
  <a href="#news">Berita</a>
  <a href="#contact">Hubungi</a>
</div>

Kesempatan kedua - Tambahkan CSS：

/* Letakkan navigasi di bawah halaman dan tetapkan */
.navbar {
  warna-latar: #333;
  kelebaran: tak ada;
  posisi: tetap;
  bawah: 0;
  lebar: 100%;
}
/* Setkan gaya untuk link di navigasi */
.navbar a {
  laras: kiri;
  tampilan: blok;
  warna: #f2f2f2;
  tata-tulisan: tengah;
  margin: 14px 16px;
  tanda-garis-tulisan: tak ada;
  ukuran-tulisan: 17px;
}
/* Ubah warna link ketika kursor di atas */
.navbar a:hover {
  warna-latar: #ddd;
  warna: hitam;
}
/* Tambah warna untuk link aktif/buat masa kini */
.navbar a.active {
  warna-latar: #04AA6D;
  warna: putih;
}

尝试亲自