答案：使用HTML和CSS创建响应式电商商品列表，通过Flex布局实现四列、两列、单列适配，结合图片覆盖、文字截断、悬停阴影和按钮交互，确保结构清晰、样式简洁且移动端友好。
用CSS制作一个简单的电商商品列表，关键在于结构清晰、样式简洁、适配移动端。下面是一个实用的基础实现方式，包含HTML结构和对应的CSS样式。
1. 基础HTML结构
每个商品使用一个<div class="product-item">包裹，包含图片、标题、价格和按钮：<font face="Courier New"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">
<div class="product-list">
<div class="product-item">
@@##@@
<h3 class="product-title">商品名称</h3>
<p class="product-price"><strong>¥99.00</strong></p>
<button class="btn-buy">加入购物车</button>
</div>
<p><!-- 可复制更多商品 -->
</div></p></pre>登录后复制
</div></font><h3>2. 核心CSS样式</h3>
<p>使用Flex布局让商品横向<a style="color:#f60; text-decoration:underline;" title="排列" href="https://www.php.cn/zt/56129.html" target="_blank">排列</a>并自适应屏幕，同时控制间距和视觉统一性：</p>
<font face="Courier New"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">
.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></pre>登录后复制
</div></font><h3>3. 关键设计点说明</h3>
<p>为了让商品列表更实用，注意以下几点：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/xiazai/code/11192">
<img src="https://img.php.cn/upload/webcode/000/000/004/176527081129079.jpg" alt="新秀B2C商城系统">
</a>
<div class="aritcle_card_info">
<a href="/xiazai/code/11192">新秀B2C商城系统</a>
<p>新秀B2C商城系统是一款简洁易用PHP商城系统。可免费下载使用，可用于商业用途，没有时效限制，除版权标识外，所有代码都允许修改。后台功能简介：1、商城设置：基本信息，配送方式，配送范围，支付方式，财务管理；2、商品管理：商品列表，添加商品，商品分类，商品品牌，商品属性；3、订单管理：订单列表，缺货登记；4、用户互动：用户管理，留言管理，评论管理，网站公告，在线客服，用户协议；5、文章管理：文章列表</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="新秀B2C商城系统">
<span>0</span>
</div>
</div>
<a href="/xiazai/code/11192" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="新秀B2C商城系统">
</a>
</div>
<ul>
<li>
<strong><a style="color:#f60; text-decoration:underline;" title="响应式布局" href="https://www.php.cn/zt/23291.html" target="_blank">响应式布局</a></strong>：通过媒体查询适配不同设备，PC端四列，<a style="color:#f60; text-decoration:underline;" title="平板" href="https://www.php.cn/zt/17177.html" target="_blank">平板</a>两列，手机单列</li>
<li>
<strong>图片统一尺寸</strong>：使用<code>object-fit: cover防止图片变形
文字截断：标题过长时显示省略号，保持卡片高度一致
悬停反馈：鼠标经过商品有阴影变化，提升交互感
按钮样式：颜色突出购买按钮，并添加点击状态反馈
4. 扩展建议
如果需要增强功能，可考虑添加：
- 商品标签（如“新品”、“热销”）用
::before或额外span实现
- 评分展示，用星星图标或伪元素绘制
- 加入动画加载效果，如淡入或渐现
- 支持选中状态（如已加入购物车）
基本上就这些，不复杂但足够实用。
广告
788
收藏
取消收藏
