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>
