Khóa học Lập trình miễn phí

Card Layout với Flexbox

Lập trình

Mô tả: Tạo layout thẻ sản phẩm sử dụng Flexbox

Hướng dẫn

Lời giải

Tạo layout cho danh sách sản phẩm: - Sử dụng Flexbox để sắp xếp các thẻ - Mỗi thẻ có ảnh, tiêu đề, mô tả và giá - Layout responsive: trên mobile hiển thị 1 cột, tablet 2 cột, desktop 3 cột

Code mẫu

<!DOCTYPE html>
<html>
<head>
  <style>
    .products-container {
      /* Viết CSS của bạn ở đây */
    }
    
    .product-card {
      /* Viết CSS của bạn ở đây */
    }
  </style>
</head>
<body>
  <div class="products-container">
    <div class="product-card">
      <img src="https://via.placeholder.com/300x200" alt="Product 1">
      <h3>Sản phẩm 1</h3>
      <p>Mô tả sản phẩm 1</p>
      <span class="price">100.000đ</span>
    </div>
    <!-- Thêm nhiều product-card khác -->
  </div>
</body>
</html>

Thông tin bài tập

Khóa học: HTML & CSS Nâng cao

Bài học: Flexbox Layout

Loại bài tập: Lập trình

Độ khó: Trung cấp

Thời lượng: 65 phút