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.
– Giao diện sau khi co giãn kích thước độ rộng cửa sổ về kích thước <= 768px.
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.