答案：使用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实现 - 评分展示，用星星图标或伪元素绘制
- 加入动画加载效果，如淡入或渐现
- 支持选中状态（如已加入购物车）
基本上就这些，不复杂但足够实用。
