Tại sao dùng thẻ ul và li tạo menu
Trong bài này mình sẽ hướng dẫn cách sử dụng thẻ UL trong HTML, đây là thẻ dùng để tạo ra danh sách dạng list, bằng cách kết hợp với thẻ li để tạo ra các phần tử con.
Show Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Thẻ ul sẽ định nghia một danh sách không định rõ thứ tự. Sử dụng kết hợp thẻ ul với thẻ li để tạo danh sách không đánh số. Nếu bạn muốn tạo danh sách đánh số thì phải sử dụng thẻ OL. Menu là một trong những yếu tố quan trọng nhất đối với mọi website. Về cơ bản, đó là một tập hợp các liên kết được tùy biến cho phép khách truy cập trang đi từ trang này đến các trang khác. Một số trang web có menu điều hướng ở trên cùng, có trang thì ở bên phải hay bên trái. Tạo menu ngang trong HTML và CSS chỉ với 5 bướcHướng dẫn này sẽ giúp bạn tạo menu ngang trong HTML và CSS với 5 bước đơn giản dưới đây. Bước 1: Tạo HTML Mark-upĐể bắt đầu việc tạo menu ngang trong HTML, hãy tạo một HTML mark-up bằng một link đi đến style sheet ở ngoài (style.css). Nó cũng sẽ được dùng để tạo kiểu cho menu.
Bước 2: Viết CSS cho Menu DivisionSau khi tạo xong HTML mark-up, bây giờ ta cần viết code CSS cho Menu Divsion.
Trong phần xác định menu, kích thước chiều rộng được đặt là >> Xem thêm: Code convention là gì? Các quy tắc chung khi viết code Bước 3: Thêm item vào menuĐể tạo menu item, chúng ta cần phải sử dụng thẻ danh sách không có thứ tự (unordered tag list). Hãy thêm phần sau vào trong HTML document giữa các menu division tag. Đối với mỗi tag của item, có một anchor tag () để tạo một liên kết. Tại thời điểm này, mọi thuộc tính Bước 4: Tạo kiểu cho danh sáchSau khi thêm xong code HTML, dù có vẻ ổn nhưng chưa được bắt mắt cho lắm, nhưng chúng ta có thể dùng code CSS menu ngang để thay đổi. Trong bước này, chúng ta sẽ tạo kiểu cho danh sách và các liên kết, giúp menu ngang CSS thêm sống động hơn. Sau khi tạo một danh sách không có thứ tự, mỗi item đều được hiển thị theo thứ tự từ trên xuống, cùng một vòng tròn mờ xung quanh theo mặc định. Chúng ta đang muốn tạo menu ngang trong HTML chứ không phải menu dọc, do đó ta cần thay đổi bố cục mặc định này. Đồng thời cũng cần xóa các bullet đầu dòng khỏi danh sách. Dùng lệnh sau để tạo menu ngang bằng CSS:
#menu ul Phần
#menu ul li
Xem thêm: Favicon là gì? Hướng dẫn tạo và thêm Favicon cho website Bước 5: Tạo kiểu cho các liên kếtBước cuối cùng trong việc tao menu ngang trong HTML là tạo kiểu cho các liên kết. Lưu ý rằng trong HTML document, các thẻ
Cấu trúc này là bắt buộc để có thể tạo kiểu cho các liên kết. Cấu trúc nó như sau:
Sau đó, hãy sử dụng code sau:
#menu ul li a:link Đoạn này sẽ áp dụng một style chung cho các liên kết trong menu.
Để thấy rõ hơn tác dụng của padding, bạn có thể thử thêm dòng
Sau đó, xóa phần
# menu ul li a:visited Phần này giúp đảm bảo các link vẫn giữ nguyên định dạng sau khi đã được click vào. # menu ul li a:hover Nếu bạn di chuột đến một link nào đó, bạn sẽ thấy màu nền chuyển thành màu xanh lục, văn bản vẫn giữ màu trắng và có một chút bóng ở phía dưới. Đây là những gì code trên đã làm. Nếu bạn đang sử dụng mã nguồn WordPress thì bạn cũng có thể sửa code WordPress với HTML và CSS trong giao diện của nó. Tổng kết việc tạo menu ngang trong HTMLNhư vậy là ta đã hoàn tất việc tạo menu ngang trong HTML, nhìn đơn giản nhưng vẫn đủ chuyên nghiệp. Bạn hoàn toàn có thể tạo thêm nhiều menu đẹp khác nữa bằng các code CSS và HTML. Chúc các bạn thành công! Chia sẻ bài viết Đánh giá 5/5 - (3 bình chọn) Nguyễn Hưng Kết nối với mình qua Mình là Bo - admin của Quản Trị Linux. Mình đã có 10 năm làm việc trong mảng System, Network, Security và đã trải nghiệm qua các chứng chỉ như CCNP, CISSP, CISA, đặc biệt là chống tấn công DDoS. Gần đây mình trải nghiệm thêm Digital Marketing và đã hòan thành chứng chỉ CDMP của PearsonVUE. Mình rất thích được chia sẻ và hỗ trợ cho mọi người, nhất là các bạn sinh viên. Hãy kết nối với mình nhé! |