Cách tạo: Liên kết trình duyệt rộng bằng nhau

Học cách tạo thanh trình duyệt với các liên kết trình duyệt rộng bằng nhau.

Tạo thanh trình duyệt phản hồi

Bước 1 - Thêm HTML:

/* Trình duyệt */
<div class="navbar">
  <a class="active" href="#">Trang chủ</a>
  <a href="#">Tìm kiếm</a>
  <a href="#">Liên hệ</a>
  <a href="#">Đăng nhập</a>
</div>

Bước 2 - Thêm CSS:

/* Đặt mẫu cho trình duyệt */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}
/* Liên kết trình duyệt */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* Bốn liên kết rộng bằng nhau. Nếu bạn có hai liên kết, hãy sử dụng 50%, cho ba liên kết, hãy sử dụng 33.33%, và thế tiếp theo. */
  text-align: center; /* Nếu bạn muốn văn bản居中 */
}
/* Thêm màu nền khi di chuột qua */
.navbar a:hover {
  background-color: #000;
}
/* Đặt樣式 cho liên kết hiện tại/trình duyệt hoạt động */
.navbar a.active {
  background-color: #04AA6D;
}
/* Thêm tính năng phản hồi - Trên màn hình nhỏ hơn 500 pixel, làm cho các liên kết trình duyệt dính vào nhau, thay vì hiển thị song song */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* Nếu bạn muốn văn bản thẳng đứng trên màn hình nhỏ */
  }
}

Thử ngay

Trang liên quan

Giáo trình:Thanh導航栏 CSS