2. 盒模型/布局模塊 - 響應式產品展示頁
案例：電商產品網格布局
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">:root {--primary-color: #3498db;}.products-container {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 20px;padding: 20px;}.product-card {border: 1px solid #eee;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 5px rgba(0,0,0,0.1);transition: transform 0.3s, box-shadow 0.3s;}.product-card:hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0,0,0,0.1);}.product-image {width: 100%;height: 180px;object-fit: cover;}.product-info {padding: 15px;}.price {color: var(--primary-color);font-weight: bold;font-size: 1.2em;}/* 響應式調整 */@media (max-width: 600px) {.products-container {grid-template-columns: 1fr;}}</style><body><div class="products-container"><div class="product-card"><img src="img/xiaoxiong.jpeg" class="product-image"><div class="product-info"><h3>小熊玩偶</h3><p>高質量的材質5.0</p><div class="price">￥299</div></div></div><!-- 更多產品卡片... --></div></body>
</html>
)
)
