商城单品页从零搭建：基础布局与核心交互实操指南

一、准备工作

1. 工具安装

下载VS Code：https://code.visualstudio.com/download，Windows安装时勾选「添加到PATH」，Mac直接拖拽到应用程序即可。完成后打开VS Code，扩展市场搜索「Live Server」插件并安装，用于本地实时预览页面。

2. 项目目录创建

在电脑任意位置新建文件夹命名为「商城单品页」，打开VS Code点击「打开文件夹」，选择该文件夹后，在左侧文件面板右键点击「新建文件」，命名为index.html（必须精确命名，浏览器默认加载该文件）。

二、页面结构搭建

1. 完整HTML骨架代码

将以下代码完整复制到index.html中，所有标签需闭合，无省略：

```html ```

2. 结构拆分说明

页面分为两大核心区：商品图片区（product-img）、商品信息区（product-info），通过flex布局实现左右排列，适配不同屏幕宽度，无需额外写响应式代码即可适配基础端。

三、样式调试与修改

1. 核心样式调整

所有样式均在head的style标签内修改，无需改动HTML结构：

• 修改商品图大小：调整.product-img的width/height数值，单位为px
• 修改按钮颜色：把.add-cart-btn的background属性值改为目标色值（如000代表黑色）
• 修改商品名称：直接替换.product-name标签内的文字即可

2. 避免布局异常

全局选择器的margin/padding重置必须保留，可确保不同浏览器默认样式统一，不会出现多余间距。

四、本地预览与交互测试

1. 在VS Code左侧文件面板右键点击index.html，选择Open with Live Server； 2. 浏览器会自动打开页面，修改style标签内的代码后，按Ctrl+S（Windows）/Cmd+S（Mac），页面会实时刷新； 3. 点击「加入购物车」按钮，会弹出提示框，说明交互逻辑正常。

五、常见问题解决

1. 页面不显示：检查是否选择Open with Live Server，而非直接双击打开index.html； 2. 图片加载失败：替换img标签的src属性为有效图片链接（如本地图片用相对路径：./product.jpg）； 3. 按钮无响应：检查script标签是否在body末尾，确保DOM元素已加载完成再绑定事件。

六、基础扩展操作

如需添加商品缩略图切换，可在.product-img内添加多个img，JS部分修改为监听缩略图点击事件，替换主图的src属性即可，无需改动原有核心结构。