Khóa Học, Lập Trình

Bài 2: Thiết kế menu cho trang web

AnonyHome Written by AnonyHome
· 1 min read >

Trở lại với chuỗi bài tự học thiết kế website của AnonyHome. Trong bài trước chúng ta đã hoàn tất việc thiết kế bố cục cho trang web. 
Bạn nào chưa xem thì có thể xem tại đây : Bài 1- Thiết kế bố cục của trang web.
Trong bài hôm nay chúng ta sẽ chuyển qua phần thiết kế menu cho trang web của chúng ta.

Thiết kế Menu cho trang web 

Tiếp tục với file  layout.html buổi trước chúng ta đã tạo. Bây giờ các bạn xóa bỏ dấu trong cặp thẻ <div id="main-menu"></div>.Sau đó bạn thêm đoạn code này vào:

Bây giờ code của file layout.html của chúng ta sẽ như sau:

Chạy thử và kiểm tra kết quả. Bạn sẽ được như sau:

Như vậy là ta đã có 3 menu cần thiết. Nhưng có vẻ chúng chưa được đẹp lắm. Bây giờ chúng ta thêm chút CSS vào cho nó nhé.

Chèn CSS cho Menu

Bây giờ trước thẻ đóng </head> Các bạn chèn cho mình đoạn code sau:

Quay trờ lại trình duyệt và mở lại file layout.html bạn sẽ được kết quả như sau:

Nhìn có vẻ ổn hơn rất nhiều đúng không. Tiếp theo một phần nhỏ nữa, chúng ta sẽ chỉnh sửa lại một chút trong thẻ <div id="footer">...</div> bằng việc xoá dấu ... và thêm đoạn code sau:

Đoạn code trên đơn giản là chỉ để thêm ký tự copyright vào trang của chúng ta. Oke bây giờ bạn tải lại trang và kiểm tra kết quả. 
Kết thúc bài hướng dẫn của mình hôm nay tại đây. Hẹn gặp lại các bạn ở những bài tiếp theo. Và đừng quên theo dõi AnonyHome để cập nhật bài viết trong series tự thiết kế website bằng html của AnonyHome nhé!


Xem quảng cáo trên trang để ủng hộ AnonyHome

Leave a Reply

Your email address will not be published. Required fields are marked *