1. 前置工具准备

按照以下步骤安装必备工具，无其他多余操作：

• 下载VS Code：访问https://code.visualstudio.com/download ，选对应系统版本，默认完成安装
• 安装Live Server插件：打开VS Code，点击左侧扩展图标（四个小方块），搜索「Live Server」，点击Ritwick Dey开发的插件，再点安装

必须完成以上两步，否则无法正常预览商城

2. 项目文件创建

在电脑任意位置新建文件夹命名为「mall」，打开VS Code，点击顶部「文件→打开文件夹」，选中刚建的「mall」文件夹。在VS Code左侧资源管理器右键点击「mall」，新建2个文件：index.html（核心页面）、style.css（样式文件）

3. 复制商城核心代码

3.1 粘贴index.html代码

双击打开index.html，全选粘贴以下代码，不能省略任何一行：

```html

简易商城

精选商品

绿色运动鞋

¥199

加入购物车

蓝色休闲裤

¥149

加入购物车

黑色通勤背包

¥299

加入购物车

粉色纯棉T恤

¥99

加入购物车

```

3.2 粘贴style.css代码

双击打开style.css，全选粘贴以下代码，不得修改任何样式值：

```css { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; color: 333; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .mall-header { background: 2c3e50; color: white; padding: 1rem 0; } .logo { font-size: 1.5rem; font-weight: bold; } .main-nav .nav-menu { display: flex; list-style: none; gap: 2rem; margin-top: 0.5rem; } .main-nav a { color: white; text-decoration: none; transition: color 0.3s; } .main-nav a:hover { color: 3498db; } .mall-main { padding: 2rem 0; } .section-title { text-align: center; font-size: 1.8rem; margin-bottom: 2rem; color: 2c3e50; } .product-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; } .product-card { width: calc(25% - 1.125rem); background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; transition: transform 0.3s; } .product-card:hover { transform: translateY(-5px); } .product-img { width: 100%; height: auto; display: block; } .product-name { padding: 0.5rem 1rem; font-size: 1rem; } .product-price { padding: 0 1rem; font-size: 1.2rem; font-weight: bold; color: e74c3c; margin-bottom: 0.5rem; } .add-cart-btn { width: calc(100% - 2rem); margin: 0 1rem 1rem; padding: 0.6rem; background: 3498db; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background 0.3s; } .add-cart-btn:hover { background: 2980b9; } .mall-footer { background: 2c3e50; color: white; text-align: center; padding: 1.5rem 0; margin-top: 2rem; } @media (max-width: 768px) { .main-nav .nav-menu { flex-direction: column; gap: 0.5rem; text-align: center; } .product-card { width: calc(50% - 0.75rem); } } @media (max-width: 480px) { .product-card { width: 100%; } } ```

4. 本地预览调试

在VS Code底部状态栏点击「Go Live」按钮，禁止直接双击index.html打开，否则图片和样式路径失效，此时浏览器会自动弹出预览页面。

验证要求：调整浏览器窗口，宽度小于768px时商品变2列、导航垂直排列；小于480px时商品变1列；鼠标悬停商品卡片会上浮，按钮样式正常。

5. 扩展提示

替换商品图片：在「mall」内新建「images」文件夹，放入本地图片，修改index.html中img标签的src为「images/你的图片名.jpg」即可；新增商品直接复制product-card块替换内容即可。