Thanh điều hướng CSS
Demo: Thanh điều hướng
Thanh điều hướng
Có điều hướng dễ sử dụng là điều quan trọng đối với bất kỳ trang web nào.
Với CSS, bạn có thể biến đổi các menu HTML nhàm chán thành các thanh điều hướng đẹp mắt.
Thanh điều hướng = Danh sách các liên kết
Thanh điều hướng cần có HTML tiêu chuẩn làm cơ sở.
Trong các ví dụ của chúng tôi, chúng tôi sẽ xây dựng thanh điều hướng từ danh sách HTML tiêu chuẩn.
Thanh điều hướng về cơ bản là một danh sách các liên kết, vì vậy việc sử dụng các phần tử <ul> và <li> hoàn toàn hợp lý:
Thí dụ
<ul>
<li><a href="default.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>
Bây giờ chúng ta hãy xóa dấu đầu dòng, lề và phần đệm khỏi danh sách:
Thí dụ
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Ví dụ được giải thích:
list-style-type: none;
- Tháo đạn. Thanh điều hướng không cần các điểm đánh dấu danh sách- Đặt
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 cả thanh điều hướng dọc và ngang, bạn sẽ tìm hiểu thêm trong các chương tiếp theo.