CSS+HTML 小米商品展示代码

'# CSS+HTML 小米商品展示代码

一、背景与问题

在电商网站中，商品展示是用户与产品交互的第一接触点。小米商城的首页设计融合了现代美学与实用功能，其核心在于通过CSS和HTML实现响应式布局、视觉分层、信息层级控制以及交互反馈。

传统开发中，商品展示常面临三大技术挑战：

多设备适配（PC/移动端）
图片资源优化与响应式加载
布局结构与视觉效果的平衡

小米商城的展示方案采用CSS Grid+Flexbox组合布局，结合媒体查询实现响应式设计，同时通过伪类选择器和动画实现交互反馈。本文将深入解析其技术实现原理，并探讨实际应用中的最佳实践。

二、基本原理

1. 布局体系

小米商品展示采用CSS Grid布局实现多列展示，通过grid-template-columns定义列数，grid-gap控制间距。对于移动端，使用媒体查询切换为单列布局：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 20px;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

2. 视觉分层

通过Z-index实现视觉层级控制，结合transform实现3D效果：

.card {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.card:hover {
  z-index: 2;
  transform: translateY(-10px);
}

3. 动画机制

使用CSS动画实现商品悬停反馈，通过关键帧动画控制动态效果：

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 75%);
  background-size: 2000px 100px;
  animation: shimmer 2s infinite linear;
}

三、环境准备

# 创建项目结构
mkdir mi-shop
cd mi-shop
mkdir css js assets

在index.html中引入CSS和JS文件：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="grid-container" id="productGrid">
    <!-- 动态生成商品卡片 -->
  </div>
  <script src="js/app.js"></script>
</body>
</html>

四、核心实现

1. 商品卡片布局（HTML+CSS）

<!-- 商品卡片模板 -->
<div class="card">
  <div class="image-container">
    <img src="assets/product1.jpg" alt="小米13">
    <div class="shimmer"></div>
  </div>
  <div class="content">
    <h3>小米13</h3>
    <p>全新旗舰智能手机</p>
    <div class="price">¥4999</div>
    <button class="btn">加入购物车</button>
  </div>
</div>

/* 基础样式 */
.card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.image-container {
  position: relative;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

.shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 75%);
  background-size: 2000px 100px;
  animation: shimmer 2s infinite linear;
}

2. 响应式优化

/* 移动端适配 */
@media (max-width: 768px) {
  .card {
    margin-bottom: 20px;
  }
  
  .content {
    padding: 15px;
  }
  
  .btn {
    width: 100%;
  }
}

3. 动态交互

// app.js
document.addEventListener('DOMContentLoaded', () => {
  const grid = document.getElementById('productGrid');
  
  // 模拟数据
  const products = [
    { id: 1, name: '小米13', price: 4999, image: 'assets/product1.jpg' },
    { id: 2, name: '小米手环7', price: 299, image: 'assets/product2.jpg' },
    { id: 3, name: '小米路由器', price: 199, image: 'assets/product3.jpg' }
  ];
  
  // 动态生成卡片
  products.forEach(product => {
    const card = document.createElement('div');
    card.className = 'card';
    
    const imageContainer = document.createElement('div');
    imageContainer.className = 'image-container';
    
    const img = document.createElement('img');
    img.src = product.image;
    img.alt = product.name;
    
    const shimmer = document.createElement('div');
    shimmer.className = 'shimmer';
    
    imageContainer.appendChild(img);
    imageContainer.appendChild(shimmer);
    
    const content = document.createElement('div');
    content.className = 'content';
    
    const title = document.createElement('h3');
    title.textContent = product.name;
    
    const description = document.createElement('p');
    description.textContent = '全新旗舰智能手机';
    
    const price = document.createElement('div');
    price.className = 'price';
    price.textContent = `¥${product.price}`;
    
    const btn = document.createElement('button');
    btn.className = 'btn';
    btn.textContent = '加入购物车';
    
    content.appendChild(title);
    content.appendChild(description);
    content.appendChild(price);
    content.appendChild(btn);
    
    card.appendChild(imageContainer);
    card.appendChild(content);
    
    grid.appendChild(card);
  });
});

五、完整案例

1. 项目结构

mi-shop/
├── css/
│   └── style.css
├── js/
│   └── app.js
├── assets/
│   ├── product1.jpg
│   ├── product2.jpg
│   └── product3.jpg
└── index.html

2. 完整HTML文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>小米商品展示</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="grid-container" id="productGrid">
    <!-- 动态内容由JavaScript生成 -->
  </div>
  <script src="js/app.js"></script>
</body>
</html>

3. 完整CSS文件

/* style.css */
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f5f7fa;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 20px;
  padding: 20px;
}

.card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.image-container {
  position: relative;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

.shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 75%);
  background-size: 2000px 100px;
  animation: shimmer 2s infinite linear;
}

.content {
  padding: 15px;
}

.content h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
}

.content p {
  margin: 0 0 15px;
  color: #666;
  font-size: 14px;
}

.price {
  font-size: 16px;
  color: #e60000;
  margin-bottom: 10px;
}

.btn {
  background-color: #007aff;
  color: #fff;
  border: none;
  padding: 10px;
  width: 100%;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn:hover {
  background-color: #005bb5;
}

@media (max-width: 768px) {
  .card {
    margin-bottom: 20px;
  }
  
  .content {
    padding: 15px;
  }
  
  .btn {
    width: 100%;
  }
}

六、源码解析

1. 布局关键点

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

auto-fill会根据容器宽度自动计算列数
minmax(250px, 1fr)确保每个卡片最小250px，最大占满可用空间
这种布局方式在移动端会自动切换为单列

2. 动画优化

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

使用渐变背景实现加载动画
background-size: 2000px 100px控制动画速度
animation: shimmer 2s infinite linear设置动画循环

3. 响应式设计

@media (max-width: 768px) {
  .card {
    margin-bottom: 20px;
  }
  
  .content {
    padding: 15px;
  }
  
  .btn {
    width: 100%;
  }
}

设置768px为断点，切换为单列布局
调整卡片间距和按钮宽度
保持内容的可读性

七、进阶使用

1. 动态数据加载

使用fetch API从服务器获取商品数据：

fetch('/api/products')
  .then(response => response.json())
  .then(data => {
    data.forEach(product => {
      // 创建并添加卡片
    });
  });

2. 图片懒加载

使用Intersection Observer实现懒加载：

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('img').forEach(img => {
  img.dataset.src = img.src;
  img.src = 'assets/loading.gif';
  observer.observe(img);
});

3. 动态交互增强

添加购物车功能：

document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const product = btn.closest('.card');
    // 添加到购物车逻辑
    console.log('加入购物车:', product.querySelector('h3').textContent);
  });
});

八、性能与工程实践

1. 图片优化

使用srcset属性适应不同分辨率
压缩图片文件大小（建议小于100KB）
使用WebP格式提升加载速度

<img src="product1.jpg" 
     srcset="product1-320.jpg 320w, product1-480.jpg 480w, product1-800.jpg 800w"
     sizes="(max-width: 600px) 100vw, 320px"
     alt="小米13">

2. CSS优化

使用CSS变量管理主题颜色
避免过度使用@import
合并重复样式规则

:root {
  --primary-color: #007aff;
  --card-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

3. 安全考虑

对用户输入内容进行转义
避免直接使用innerHTML注入内容
设置合理的CSP策略

4. 性能优化

使用CDN加速静态资源
启用浏览器缓存
压缩CSS文件

九、常见问题与踩坑

1. 布局错位问题

错误代码：

.grid-container {
  display: flex;
  flex-wrap: wrap;
}

问题分析： 直接使用flex布局会导致移动端无法正确换行

解决方案：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

2. 图片加载异常

错误现象： 某些设备显示空白图片

解决办法：

添加默认占位图
使用loading="lazy"属性
设置width和height固定尺寸

3. 动画卡顿