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

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

Live demo: https://ttnguyenblog.github.io/bai-thuc-hanh-4/

Source code: https://github.com/ttnguyenblog/bai-thuc-hanh-4

Trên đây là hướng dẫn làm bài tập thực hành môn lập trình web 4. Cảm ơn các bạn đã tham khảo trên ttnguyen.net.