Cách tạo: Điều hướng dưới cùng

Tạo menu điều hướng dưới cùng

Bước 1 - Thêm HTML：

<div class="navbar">
  <a href="#home" class="active">Trang chủ</a>
  <a href="#news">Tin tức</a>
  <a href="#contact">Liên hệ</a>
</div>

Bước 2 - Thêm CSS：

/* Đặt thanh 导航 ở dưới cùng của trang và cố định */
.navbar {
  màu nền: #333;
  dư lượng: ẩn;
  vị trí: cố định;
  dưới: 0;
  chiều rộng: 100%;
}
/* Đặt phong cách liên kết trong thanh 导航 */
.navbar a {
  chải: trái;
  hiển thị: khối;
  màu: #f2f2f2;
  canh văn bản: giữa;
  đệm: 14px 16px;
  decoration văn bản: không;
  cỡ chữ: 17px;
}
/* Thay đổi màu liên kết khi chuột悬停 */
.navbar a:hover {
  màu nền: #ddd;
  màu: đen;
}
/* Thêm màu cho liên kết hoạt động/hiện tại */
.navbar a.active {
  màu nền: #04AA6D;
  màu: trắng;
}

Thử trực tiếp

Trang liên quan

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

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