Bagaimana untuk membangun: navigasi memotong

Belajar bagaimana menggunakan CSS untuk membangun navigasi memotong.

Membangun navigasi memotong

Kesudahan - Tambahkan HTML:

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

Kesudahan - Tambahkan CSS:

/* Membangun navigasi atas dengan latar belakang hitam */
.topnav {
  warna latar belakang: #333;
  kelebihan: tak dapat ditampilkan;
}
/* Menetapkan gaya pautan dalam navigasi */
.topnav a {
  gerak: kiri;
  warna: #f2f2f2;
  tekanan teks: tengah;
  lebar: 14px 16px;
  garis tebal tulisan: tak ada;
  ukuran tulisan: 17px;
}
/* Mengubah warna pautan saat kursor bergerak */
.topnav a:hover {
  warna latar belakang: #ddd;
  warna: hitam;
}
/* Dalam navigasi dalam membangun pautan (diluar) */
.topnav a.split {
  gerak: kanan;
  warna latar belakang: #04AA6D;
  warna: putih;
}

亲自试一试

相关页面

Tutorial:Bagaimana untuk membuat navigasi atas yang responsif

Tutorial:Navigasi palar CSS