Mục tiêu
Tạo bố cục các fixed header và fixed footer
Luyện tập sử dụng thuộc tính position để tạo fixed menu.
Mô tả- Tạo bố cục các fixed header và fixed footer
Một thiết kế menu điều hướng độc đáo sẽ góp phần thu hút người dùng sử dụng và ở lại trên thiết kế web của bạn. Fixed menu là một xu hướng được nhiều trang web lựa chọn vì gọn nhẹ, lại dễ dàng sử dụng.
Fixed menu, hay còn gọi là floating menu, là menu được gắn cố định ở một vị trí trên trang kể cả khi bạn cuộn trang lên xuống.
Kết quả của phần thực hành là một menu như sau:
Hướng dẫn
Bước 1. Tạo html cơ bản
Bước 2. Tạo cấu trúc menu : thêm đoạn code sau vào thẻ <body>
Bước 3. Bổ sung mã CSS:
Trong đó, một số thuộc tính quan trọng của class navbar là:
- Thuộc tính position có giá trị là fixed. Đây là cách để giữ cho menu cố định tại một vị trí
- Thuộc tính top có giá trị là 0. Nó xác định vị trí trên cùng của trình duyệt.
- Thuộc tính width có giá trị là 100%. Nó xác định độ rộng của menu sẽ bằng độ rộng của trình duyệt.
Trên đây CodeGym đã cùng với bạn luyện tập sử dụng thuộc tính position để tạo fixed menu. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!