Bài tập về nhà - Buổi 4: Chia layout

Lần 2 - Mã đề A: Trang chi tiết sản phẩm (Áo thun cotton nam)

Yêu cầu: Từ bản gốc goc.html (kết quả Lần 1 của mã đề A), bổ sung positioning và iframe để đạt kết quả như ảnh chụp bên dưới (xem thêm bài làm mẫu ở dapan.html). Đặc trưng riêng của mã đề này: nhãn giảm giá nổi và nút mua ngay nổi.

Ràng buộc cấu trúc riêng cho mã đề A

Khối điểm nhấn đứng trước danh sách chính: Đặt một khối điểm nhấn/featured ở đầu vùng nội dung, trước danh sách hoặc bảng chính. Không thay ràng buộc này bằng cấu trúc của mã đề khác.

Yêu cầu kỹ thuật chung (áp dụng cho cả 8 mã đề Lần 2)

Bổ sung thanh điều hướng cố định khi cuộn trang (position: sticky hoặc fixed).
Bổ sung ít nhất 2 phần tử được định vị bằng cặp relative và absolute.
Bổ sung 1 khối nội dung chỉ hiện ra khi rê chuột vào phần tử khác, kết hợp hover với display và position.
Nhúng ít nhất 1 iframe đặt đúng vào bố cục, không phá vỡ layout xung quanh.
Nộp kèm sơ đồ khối mô tả cấu trúc layout đã dựng (xem danh sách mô tả trong comment đầu dapan.html).

Sơ đồ khối mô tả layout (tóm tắt)

Thanh điều hướng dính trên cùng khi cuộn.
Khu vực nội dung chia 2 cột bằng Flexbox: cột chính rộng, cột phụ hẹp.
Trong cột chính: 1 khối relative làm mốc, chứa nhãn và nút được đặt absolute vào 2 góc (nhãn giảm giá nổi và nút mua ngay nổi).
1 cụm chữ có khối gợi ý chỉ hiện khi hover.
Cột phụ dính khi cuộn, bên trong có iframe (video) không phá vỡ bố cục.