答案：使用html和css创建响应式电商商品列表，通过flex布局实现四列、两列、单列适配，结合图片覆盖、文字截断、悬停阴影和按钮交互，确保结构清晰、样式简洁且移动端友好。
用CSS制作一个简单的电商商品列表，关键在于结构清晰、样式简洁、适配移动端。下面是一个实用的基础实现方式，包含HTML结构和对应的css样式。
1. 基础HTML结构
每个商品使用一个<div class="product-item">包裹，包含图片、标题、价格和按钮：
<div class="product-list"> <div class="product-item"> <img src="product1.jpg" alt="商品1" class="product-img"> <h3 class="product-title">商品名称</h3> <p class="product-price"><strong>¥99.00</strong></p> <button class="btn-buy">加入购物车</button> </div> <p><!-- 可复制更多商品 --> </div></p>
2. 核心CSS样式
使用flex布局让商品横向排列并自适应屏幕，同时控制间距和视觉统一性：
.product-list { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px; max-width: 1200px; margin: 0 auto; } <p>.product-item { width: calc(25% - 12px); /<em> 四列布局，减去gap影响 </em>/ border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; transition: box-shadow 0.3s ease; }</p><p>.product-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }</p><p>@media (max-width: 768px) { .product-item { width: calc(50% - 8px); /<em> 移动端两列 </em>/ } }</p><p>@media (max-width: 480px) { .product-item { width: 100%; /<em> 小屏单列 </em>/ } }</p><p>.product-img { width: 100%; height: 180px; Object-fit: cover; }</p><p>.product-title { font-size: 14px; color: #333; padding: 12px 12px 8px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }</p><p>.product-price { font-size: 16px; color: #f44336; padding: 0 12px 8px; margin: 0; }</p><p>.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; }</p><p>.btn-buy:hover { background-color: #1976D2; }</p>
3. 关键设计点说明
为了让商品列表更实用，注意以下几点：
立即学习“前端免费学习笔记（深入）”；
- 响应式布局：通过媒体查询适配不同设备，PC端四列，平板两列，手机单列
- 图片统一尺寸：使用
object-fit: cover防止图片变形 - 文字截断：标题过长时显示省略号，保持卡片高度一致
- 悬停反馈：鼠标经过商品有阴影变化，提升交互感
- 按钮样式：颜色突出购买按钮，并添加点击状态反馈
4. 扩展建议
如果需要增强功能，可考虑添加：
- 商品标签（如“新品”、“热销”）用
::before或额外span实现 - 评分展示，用星星图标或伪元素绘制
- 加入动画加载效果，如淡入或渐现
- 支持选中状态（如已加入购物车）
基本上就这些，不复杂但足够实用。