Trang chủ » Blog » [Thực hành] Tạo bố cục các fixed header và fixed footer

[Thực hành] Tạo bố cục các fixed header và fixed footer

bởi CodeGym | 26/12/2023 16:30 | Bài thực hành | Blog

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é!

Tags:

0 Lời bình

Gửi Lời bình

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

3 + 12 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM