Bagaimana untuk membuat: Navigasi pemisah

Belajar bagaimana untuk membuat navigasi pemisah menggunakan CSS.

Buat navigasi pemisah

Kunjungi tahap pertama - Tambahkan HTML:

<div class="topnav">
  <a href="#home">Beranda</a>
  <a href="#news">Berita</a>
  <a href="#contact">Kontak</a>
  <a href="#about" class="split">Bantuan</a>
</div>

Kunjungi tahap kedua - Tambahkan CSS:

/* Buat navigasi puncak dengan latar belakang hitam */
.topnav {
  background-color: #333;
  kelebihan: tak ada;
}
/* Tetapkan gaya tautan di dalam navigasi */
.topnav a {
  float: kiri;
  warna: #f2f2f2;
  text-align: tengah;
  padding: 14px 16px;
  garis penulisan: tak ada;
  ukuran tulisan: 17px;
}
/* Ubah warna tautan saat tetikus berada di atasnya */
.topnav a:hover {
  background-color: #ddd;
  warna: hitam;
}
/* Dalam bagian navigasi, buat tautan (pemisah) yang berada di kanan */
.topnav a.split {
  float: kanan;
  background-color: #04AA6D;
  warna: putih;
}

亲自试一试

相关页面

Panduan:Bagaimana membuat navigasi atas yang responsif

Panduan:Navigasi bawah bar CSS