答案：使用HTML和CSS创建响应式电商商品列表，通过Flex布局实现四列、两列、单列适配，结合图片覆盖、文字截断、悬停阴影和按钮交互，确保结构清晰、样式简洁且移动端友好。
用CSS制作一个简单的电商商品列表，关键在于结构清晰、样式简洁、适配移动端。下面是一个实用的基础实现方式，包含HTML结构和对应的CSS样式。
1. 基础HTML结构
每个商品使用一个 ¥99.00
使用Flex布局让商品横向排列并自适应屏幕，同时控制间距和视觉统一性： .product-item {
width: calc(25% - 12px); / 四列布局，减去gap影响 /
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
background: #fff;
transition: box-shadow 0.3s ease;
} .product-item:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
} @media (max-width: 768px) {
.product-item {
width: calc(50% - 8px); / 移动端两列 /
}
} @media (max-width: 480px) {
.product-item {
width: 100%; / 小屏单列 /
}
} .product-img {
width: 100%;
height: 180px;
object-fit: cover;
} .product-title {
font-size: 14px;
color: #333;
padding: 12px 12px 8px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .product-price {
font-size: 16px;
color: #f44336;
padding: 0 12px 8px;
margin: 0;
} .btn-buy {
width: 100%;
padding: 10px;
background-color: #2196F3;
color: white;
border: none;
border-top: 1px solid #1976D2;
font-size: 14px;
cursor: pointer;
transition: background 0.2s;
} .btn-buy:hover {
background-color: #1976D2;
} 为了让商品列表更实用，注意以下几点： 立即学习“前端免费学习笔记（深入）”； 如果需要增强功能，可考虑添加： 基本上就这些，不复杂但足够实用。
商品名称
2. 核心CSS样式
.product-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
max-width: 1200px;
margin: 0 auto;
}
3. 关键设计点说明
object-fit: cover防止图片变形4. 扩展建议
::before或额外span实现
