css制作简单电商商品列表样式-css教程-PHP中文网

css制作简单电商商品列表样式

P粉602998670

发布： 2025-10-31 18:53:35

原创

152人浏览过

答案：使用HTML和CSS创建响应式电商商品列表，通过Flex布局实现四列、两列、单列适配，结合图片覆盖、文字截断、悬停阴影和按钮交互，确保结构清晰、样式简洁且移动端友好。

css制作简单电商商品列表样式

用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>

登录后复制