Thiết Kế Menu

Ở bài học trước chúng ta đã tạo ra một bố cục layout HTML đóng vai trò như một khung sườn để tạo từng trang web riêng biệt.

Ở bài học này chúng ta sẽ tiếp tục hoàn thiện layout này bằng việc thêm vào một menu bao gồm danh sách các đường dẫn để đi tới các trang web riêng biệt.

Mã HTML Tạo Menu

Phía trong thẻ <div id="main-menu">...</div> bạn xoá bỏ dấu ... và thay vào đó thêm vào đoạn mã HTML như sau:

...
<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>
    ...

Bây giờ nếu như bạn dùng trình duyệt để mở tập tin layout.html thì bạn sẽ thấy kết quả hiển thị như sau:

Hiển thị trang layout.html trên trình duyệt

Khi thiết kế website thông thường các menu được đặt ở phía đầu trang sẽ được dàn để hiện thị theo hàng ngang thay vì hiển thị theo hàng dọc như ở trên. Để làm điều này chúng ta sẽ thêm CSS trang chí cho menu mới được thêm vào.

Thêm Mã CSS Trang Chí Menu

Ở phía cuối trang sau thẻ đóng </div> của thẻ <div id="footer"> chúng ta sẽ sẽ thêm một thẻ <style> với nội dung như sau:

<style type="text/css">
#main-menu ul {
    padding-left: 0;
    list-style-type: none;
}
#main-menu ul li {
    float: left;
    margin-right: 15px;
}
</style>

Quay trở lại trình duyệt và tải lại trang layout.html bạn sẽ thấy kết quả hiển thị trên trình duyệt lúc này sẽ như sau:

Hiển thị trang layout.html trên trình duyệt sau khi thêm mã CSS

Trước khi kết thúc bài học này để chuyển sang các bài học tiếp theo chúng ta sẽ cập nhật lại thẻ <div class="footer">...</div> bằng việc xoá dấu ... và thêm một đoạn HTML đơn giản vào bên trong thẻ như sau:

<!-- footer -->
<div id="footer">
ABC Co, Ltd. &copy; 2018
</div>

Đoạn code trên sử dụng HTML entity &copy; để thêm vào biểu tượng copyright cho phần footer của trang. Bạn hãy tải lại tập tin layout.html trên trình duyệt để tự mình kiểm tra kết quả.

Nội dung không được để trống

Hướng Dẫn Liên Quan