BTVN Buổi 3 - Lần 1 - Mã đề A

Ngữ cảnh: Trang danh mục sản phẩm của cửa hàng

Xây dựng trang HTML/CSS thuần cho "Cửa hàng Bách Hóa Xanh Nhỏ" với các yêu cầu sau (áp dụng chung cho 8 mã đề, chỉ khác ngữ cảnh nội dung):

• Menu điều hướng nhiều mục và ít nhất 1 danh sách dữ liệu tối thiểu 8 mục.
• Tối thiểu 4 pseudo-class khác nhau, bắt buộc có :hover và một pseudo-class theo vị trí (ví dụ :nth-child, :first-child, :last-child).
• Tối thiểu 2 pseudo-element (::before, ::after) để chèn nội dung trang trí.
• Tối thiểu 3 selector quan hệ khác nhau (descendant, > con trực tiếp...), kèm comment giải thích selector đó chọn chính xác nhóm phần tử nào.
• Không được thêm class hay id mới để giải quyết các yêu cầu định dạng trên, phải chọn phần tử bằng quan hệ và trạng thái.

File goc.html là khung sườn ban đầu (chỉ có CSS cơ bản theo tag selector), cần bổ sung CSS để đạt được kết quả như ảnh minh họa và như dapan.html bên dưới.

Ảnh chụp minh họa kết quả (dapan.html)