Cách tạo: Tiêu đề trang tương ứng

Học cách sử dụng CSS để tạo tiêu đề trang tương ứng.

Tiêu đề trang tương ứng

Thiết kế tiêu đề trang dựa trên kích thước màn hình. Điều chỉnh kích thước cửa sổ trình duyệt để xem hiệu ứng.

Home Contact About

Thử ngay

Tạo tiêu đề tương ứng

Bước 1 - Thêm HTML:

<div class="header">
  <a href="#default" class="logo">CompanyLogo</a>
  <div class="header-right">
    <a class="active" href="#home">Home</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>

Bước 2 - Thêm CSS:

/* Sử dụng nền xám và một số lề nội bộ để thiết lập樣式 tiêu đề */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}
/* Đặt樣式 cho liên kết tiêu đề */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}
/* Đặt樣式 cho liên kết Logo (Lưu ý, chúng ta sẽ đặt độ cao dòng và kích thước font thành cùng một giá trị để tránh việc font to hơn khi tiêu đề tăng lên) */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
}
/* Thay đổi màu nền khi trỏ chuột vào */
.header a:hover {
  background-color: #ddd;
  color: black;
}
/* Đặt樣式 cho liên kết hoạt động/hiện tại */
.header a.active {
  background-color: dodgerblue;
  color: white;
}
/* Đưa phần liên kết sang phải */
.header-right {
  float: right;
}
/* Thêm điều kiện tìm kiếm phương tiện để thực hiện tính tương ứng - Khi độ rộng màn hình là 500px hoặc nhỏ hơn, các liên kết sẽ được sắp xếp chồng lên nhau */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}

Thử ngay

Trang liên quan

Giáo trình:Thanh điều hướng CSS