当前位置：首页 > news >正文

2. 盒模型/布局模块 - 响应式产品展示页_案例：电商产品网格布局

news 来源：原创 2025/5/14 6:07:15

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>