Chia sẻ Tài nguyên

Nơi chia sẻ các Bài tập, Kiến thức về lập trình, công nghệ.

[HTML-CSS] Bài thực hành CSS tổng hợp 1.1 - Tạo Menu ngang

Giúp sinh viên biết cách tạo menu ngang cho website bằng cách sử dụng các thẻ ul, li, a và thuộc tính display, float.

Yêu cầu sinh viên biết cách sử dụng các kỹ thuật sau:

  • Sử dụng thẻ tạo danh sách UL để tạo sườn cho menu ngang.
  • Sử dụng CSS để format cho các item của menu theo đúng định dạng.

Hình minh họa HTML - Menu ngang:

Hướng dẫn style CSS:

  • Thiết lập thuộc tính cho thẻ UL: kiểu display là block, rộng 100%.
  • Thiết lập thuộc tính cho thẻ LI: list-style:none, sử dụng float left; kiểu display là block, dùng margin để đẩy rời khoảng cách giữa các item.
  • Thiết lập thuộc tình cho thẻ A: mà chữ là màu trắng, font đậm, khi hover lên item của menu thì gạch chân item đó.
  • ......
  • Sinh viên tự style thêm để đạt được kết quả như hình dưới.

Hình kết quả đạt được:

thuc-hanh-css-tao-menu

css

 

Bài viết liên quan: