logo

AnonyHome

Loading...

Register

Khóa Học - Lập Trình - 2018-07-01

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

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

Nhận bài viết mới qua email

Chuyên mục HOT

Chuyên mục tìm hiểu ioT

Xem thêm

Popular

Newest

Related

AnonyHome ra mắt nền tảng học lập trình trực tuyến

2020-09-04

Chia sẻ tài liệu lập trình Android Full – FPT Software

2020-06-21

Chia sẻ Khóa học xây dựng ứng dụng triệu người xài Android Realtime với Firebase qua 5 dự án

2020-06-27

Khóa học lập trình Android Kotlin toàn tập 2020

2020-07-01

Tài liệu Java Spring MVC – Đại học FPT

2020-06-23

Full source code+Database: Quản lý thư viện+Báo cáo chi tiết

2020-02-26

Chia sẻ tài liệu học Lập trình ARM STM32, STM8, vv

2020-03-05

Chia sẻ bộ video Tự Học Angular Tiếng Việt

2020-06-29

AnonyHome ra mắt nền tảng học lập trình trực tuyến

2020-09-04

Chia sẻ code quản lý khoá học và học viên PHP MYSQL

2021-02-25

Bài giảng Java – Chương 3 phần 1

2021-02-24

Bài giảng Java – Chương 2 phần 2

2021-02-04

Bài giảng Java – Chương 2 phần 1

2021-01-22

Sự khác biệt giữa next() và nextLine() trong Java

2021-01-22

Chương 1: Giới thiệu về Java

2021-01-13

Hướng dẫn cài đặt môi trường Java và Eclipse

2021-01-12

AnonyHome ra mắt nền tảng học lập trình trực tuyến

2020-09-04

Chia sẻ code quản lý khoá học và học viên PHP MYSQL

2021-02-25

Bài giảng Java – Chương 3 phần 1

2021-02-24

Bài giảng Java – Chương 2 phần 2

2021-02-04

Bài giảng Java – Chương 2 phần 1

2021-01-22

Sự khác biệt giữa next() và nextLine() trong Java

2021-01-22

Chương 1: Giới thiệu về Java

2021-01-13

Hướng dẫn cài đặt môi trường Java và Eclipse

2021-01-12