Cách tạo: Thanh điều hướng trên cùng

Học cách sử dụng CSS để tạo thanh điều hướng trên cùng.

tạo thanh điều hướng trên cùng

Bước 1 - Thêm HTML：

<div class="topnav">
  <a class="active" href="#home">Trang chủ</a>
  <a href="#news">Tin tức</a>
  <a href="#contact">Liên hệ</a>
  <a href="#about">Về chúng tôi</a>
</div>

Bước 2 - Thêm CSS：

/* thêm màu nền đen cho thanh điều hướng trên cùng */
.topnav {
  màu nền: #333;
  dư lượng: ẩn;
}
/* đặt樣式 cho liên kết trong thanh điều hướng */
.topnav a {
  đ浮动: trái;
  màu: #f2f2f2;
  canh văn bản: giữa;
  keo dán: 14px 16px;
  decoration văn bản: không;
  cỡ chữ: 17px;
}
/* thay đổi màu liên kết khi con trỏ chuột trỏ đến */
.topnav a:hover {
  màu nền: #ddd;
  màu: đen;
}
/* thêm màu cho liên kết hoạt động/trang hiện tại */
.topnav a.active {
  màu nền: #04AA6D;
  màu: trắng;
}

thử trực tiếp

Trang liên quan

Hướng dẫn:Cách tạo thanh điều hướng đầu trang phản hồi

Hướng dẫn:Thanh điều hướng CSS