Thanh điều hướng CSS

Mô tả: Bảng điều hướng

Bảng điều hướng dọc

Bảng điều hướng ngang


Bảng điều hướng

Bảng điều hướng dễ sử dụng rất quan trọng đối với bất kỳ trang web nào.

Bằng cách sử dụng CSS, bạn có thể chuyển đổi danh sách liên kết HTML nhàm chán thành bảng điều hướng đẹp.

Bảng điều hướng = danh sách liên kết

Bảng điều hướng cần sử dụng HTML tiêu chuẩn làm cơ sở.

Trong ví dụ của chúng tôi, chúng ta sẽ sử dụng danh sách HTML tiêu chuẩn để xây dựng bảng điều hướng.

Bảng điều hướng cơ bản là danh sách liên kết, vì vậy việc sử dụng các phần tử <ul> và <li> rất có ý nghĩa:

Ví dụ

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Thử ngay

Hiện nay, xóa danh sách các mục, cạnh ngoài và cạnh trong (lấp đầy) từ danh sách:

Ví dụ

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Thử ngay

Giải thích ví dụ:

  • list-style-type: none; - Xóa danh sách các mục. Thanh điều hướng không cần dấu phẩy.
  • thiết lập margin: 0; và padding: 0; Xóa cài đặt mặc định của trình duyệt.

Mã trong ví dụ trên là mã tiêu chuẩn được sử dụng trong thanh điều hướng dọc và ngang, bạn sẽ học thêm về nó trong chương tiếp theo.