Bài thực hành lập trình web 4: Grid View

Bài tập thực hành lập trình web dưới dạng grid view (12 cột), với 3 cột bên trái và 9 cột bên phải.

1. Yêu cầu

Bài thực hành 4: Sử dụng HTML và CSS để thiết kế trang web sau, đảm bảo tương thích đa thiết bị.

Yêu cầu:

Tổ chức trang web dưới dạng grid view (12 cột), bên trái độ rộng 3 cột, bên phải độ rộng 9 cột.
Khi co giãn kích thước độ rộng màn hình, số lượng sản phẩm trên mỗi dòng thay đổi để phù hợp với độ rộng cửa sổ.
Menu dạng fly out với các mục con phù hợp nội dung. Khi co giãn kích thước độ rộng cửa sổ về kích thước <= 768px, menu ngang trở thành menu dọc, hiển thị mỗi dòng 2 sản phẩm (Xem hình minh họa bên dưới).
Khi đưa con trỏ văn bản vào ô tìm kiếm, màu nền của ô tìm kiếm được đổi sang màu khác.
Thiết kế footer phù hợp với trang web.