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

Ủng hộ AnonyHome Team
Chờ một chút: bạn thấy bài viết có ích chứ? Hãy chia sẻ nó với mọi người nhé!

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:

<ul>
<li>
<a href="./home.html" title="Trang Chủ">Trang Chủ</a>
</li>
<li>
<a href="./about.html" title="Giới Thiệu">Giới Thiệu</a>
</li>
<li>
<a href="./contact.html" title="Liên Hệ">Liên Hệ</a>
</li>
</ul>

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

<!DOCTYPE html>
<html>
<head>
<!-- page title -->
<title>...</title>
</head>
<body>
<!-- menu -->
<div id="main-menu">
<ul>
<li>
<a href="./home.html" title="Trang Chủ">Trang Chủ</a>
</li>
<li>
<a href="./about.html" title="Giới Thiệu">Giới Thiệu</a>
</li>
<li>
<a href="./contact.html" title="Liên Hệ">Liên Hệ</a>
</li>
</ul>
</div>
<!-- content -->
<div id="main-content">
...
</div>
<!-- footer -->
<div id="footer">
...
</div>
</body>
<html>

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:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
</style>

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:

<div id="footer">
<center>AnonyHome &copy; 2018</center>
</div>

Đ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
Share
0 0 vote
Vui lòng đánh giá bài viết
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
XEM THÊM
Hôm nay AnonyHome giới thiệu đến…
0
Bạn thích bài viết chứ? Hãy để lại bình luận.x
()
x