简介：以“小米有品”为主题的购物网站前端项目，面向网页开发初学者与在校学生，尤其适合需要完成课程作业或进行综合练手的读者。项目使用HTML搭建页面骨架，CSS控制视觉表现，覆盖首页、登录注册、购物车、商品列表与商品详情等电商典型页面。首页包括导航栏、轮播图、商品分类、新品推荐等模块，购物车涉及表格、列表与总价计算，注册登录页面需要输入框和按钮，同时通过媒体查询实现响应式布局，以适配不同屏幕设备。资源包为RAR格式，共48个文件，包含7个HTML页面、4个CSS样式表、1个JavaScript脚本以及大量PNG/JPG图片素材，压缩包大小约3.49MB，文件按页面类型与图片目录组织，便于直接解压浏览。已有3314人学习下载，读者可借助完整的页面和样式代码，理解HTML与CSS的配合逻辑，并可直接用于购物网站课程作业、前端入门练习或改造成自己的作品。
1. HTML+CSS购物网站怎么做：先搭一个能打开的静态小米有品首页
用纯HTML和CSS照着小米有品首页的视觉风格，手写一个静态商城页面，是前端学习里公认性价比最高的综合实战：一个页面同时覆盖文档结构、CSS布局、轮播图、卡片交互、动效和响应式这些知识点，做完它，HTML和CSS的基础就不用回头补了。
这个项目适合三类人：刚学完HTML和CSS、想找一个综合实战练手的新手；准备前端面试、需要一个能讲清楚的静态项目撑场面的求职者；以及给学生布置网页课设、需要一个安全不跑偏题目的老师。别急着上框架，也别急着碰JavaScript，先用静态页面把布局和视觉手感练扎实，后面学JS再往上叠交互。
这个项目不涉及后端、数据库和账号系统，浏览器直接打开就能看。从拆解首页结构、导航栏、商品卡片、纯CSS轮播图，到3D动效、避坑与交付，下面完整走一遍。
2. 首页拆解与导航栏：从设计稿到HTML结构的落地顺序
2.1 不要把整个首页当一块，先切成六个版块
很多新手拿到“小米有品”这种参考站点，第一件事是打开编辑器一顿写标签，写到一半发现导航该放哪、商品区怎么分组全都乱了。我一般的做法是：先不开编辑器，拿纸把页面从上到下拆成版块，标出每个版块的语义化标签，再动手写HTML。页面版的拆分顺序直接决定后面CSS好不好写。
小米有品首页从上到下的结构，拆出来大概是六个版块：顶部信息栏、搜索区、分类导航、Banner轮播、商品推荐区、页脚。前三个可以合进<header>，中间两块放进<main>，页脚用<footer>。不需要过度语义化，但要保证每个版块在HTML里的先后顺序和视觉顺序一致，这样即使CSS加载失败，页面内容读起来也是顺畅的。
先写一版完整的HTML骨架：
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米有品 - HTML+CSS静态商城</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="site-header"> <div class="topbar">…顶部窄条…</div> <div class="search-bar">…Logo + 搜索框…</div> <nav class="category-nav">…分类导航…</nav> </header> <main class="site-main"> <section class="banner">…轮播占位…</section> <section class="product-grid">…商品卡片区…</section> </main> <footer class="site-footer"> …服务承诺 / 链接 / 版权… </footer> </body> </html>逻辑说明：<header>里放的是“用户一进来最先看到的东西”，顶部信息栏、搜索区和分类导航都属于这个范畴，它们一起形成商城的第一屏。<main>包住轮播和商品区，一个页面理论上只允许一个<main>，里面的<section>用来切分主题不同的内容块。lang="zh-cn"声明页面语言为简体中文，meta viewport这行在移动端调试时必须有，否则手机上看页面会被缩放成一整条。
参数说明：href="css/style.css"用的是相对路径，这是 CSS 样式引入方式里最推荐的一种，项目整体搬走或者交作业压缩包发给别人，只要目录结构不变就不会断。新手最容易踩的坑是把CSS写成href="file:///C:/..."这种绝对路径，换一台电脑就废。项目目录建议固定成index.html加css/img/两个文件夹，后面图片和样式都按这个相对路径走。
2.2 导航栏的HTML与CSS：flex布局和三个关键间距
导航栏是购物网站的门面，它承担的是“用户快速找到分类”的职责。小米有品这类站点的导航栏共性非常明显：左边是首页入口，中间一排分类，右边放“关注/签到”这类零散入口。实现上直接用display: flex配合justify-content: space-between就能撑满整行，不需要浮动，也不需要定位。
先看导航栏HTML：
<nav class="category-nav"> <ul class="nav-list"> <li><a href="#">首页</a></li> <li><a href="#">手机</a></li> <li><a href="#">电视</a></li> <li><a href="#">家电</a></li> <li><a href="#">电脑</a></li> <li><a href="#">智能家居</a></li> </ul> <a href="#" class="nav-signin">签到有礼</a> </nav>对应的CSS：
.category-nav { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 20px; background: #fff; border-bottom: 1px solid #e5e5e5; } .nav-list { display: flex; list-style: none; gap: 24px; } .nav-list a { display: inline-block; padding: 6px 2px; font-size: 14px; color: #333; text-decoration: none; transition: color 0.2s ease; } .nav-list a:hover { color: #ff6700; }逻辑说明：导航用了两层flex，外层category-nav管左右分布，内层nav-list管分类之间的间隔。align-items: center保证左侧菜单和右侧签到链接在垂直方向居中，不然height: 48px加上不同字号会把子元素顶得上蹿下跳。list-style: none去掉<ul>默认的项目符号，这是每个项目里都必须写的清除样式。
参数说明：gap: 24px是分类项之间的间距，用gap而不是给每个<a>加margin，好处是最后一个分类右边不会多出多余的间距，整行看起来更均衡。padding: 6px 2px的上下6px是给hover文字变色时留出可点击热区，左右2px配合整体gap，点到文字附近也能触发跳转。hover态跟主色#ff6700保持一致，这是商城类站点最经典的强调色。
2.3 全局样式：reset、border-box和字体栈
写任何页面，第一步永远是重置浏览器默认样式，否则body自带8px外边距、ul自带左内边距、标题自带加粗和边距，这些默认值会让你的布局在Chrome、Firefox、Safari里长得不一样。新手经常做出来的页面“换个浏览器就丑了”，八成是没做reset。
项目中我一般用最轻量的一版：
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif; background: #f5f5f5; color: #333; line-height: 1.6; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; }逻辑说明：*通配选择器把页面上所有元素的内外边距清空，box-sizing: border-box是重中之重，它让 padding 和 border 算进 width 里面，以后写width: 50%再加padding: 10px不会把盒子撑破。color: inherit让链接文字颜色跟随父元素，这样分类导航里设置一次颜色，全局的a标签都不用逐个调。img的display: block消除图片底部的几像素间隙，那是图片默认按文字基线对齐留下的空隙。
字体栈的写法注意顺序："PingFang SC"是苹果系的中文黑体，"Microsoft YaHei"是Windows的微软雅黑，-apple-system兜底iOS系统字体，最后sans-serif保证任何系统都有字体可渲染。背景用#f5f5f5这种浅灰，是商城页面的常见做法，能让白色卡片浮出来。
3. 商品卡片与轮播图：用纯CSS把商城核心版块画出来
3.1 商品卡片的布局：一张图、一块文字、一个价格
商品卡片是商城首页出现频率最高的组件，小米有品一套页面上有十几张卡片，但它们的结构完全相同：商品图在上、标题在下、价格在标题下。这个规律抓准了，写CSS就变成同一套样式套多份数据的问题。
HTML结构：
<ul class="product-grid"> <li class="card"> <a href="#"> <div class="card-img" style="background: #e8e8e8;"> <img src="img/product-1.jpg" alt="米家电动牙刷"> </div> <div class="card-info"> <h3>米家电动牙刷 声波震动 软毛护龈</h3> <p class="price">￥99</p> </div> </a> </li> <!-- 重复此结构，替换图片和文字 --> </ul>对应CSS：
.product-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .card { width: 234px; background: #fff; border-radius: 8px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); } .card-img img { width: 100%; height: 234px; object-fit: cover; } .card-info { padding: 12px 14px 16px; } .card-info h3 { font-size: 14px; font-weight: normal; } .price { font-size: 16px; color: #ff6700; font-weight: bold; }逻辑说明：外层product-grid用flex-wrap: wrap，每张卡片固定宽234px，宽度不够时自动换行，一个页面从5列变3列变2列，完全是flex自动算的，不需要媒体查询。卡片本身border-radius加overflow: hidden，把图片的直角裁成圆角，同时保证hover阴影不会超出圆角范围露出方角。
参数说明：transform: translateY(-6px)是卡片hover反馈里最常用的写法，向上浮起6px配合阴影，比单纯的变色有质感。0.25s ease的时长设定有讲究，小于0.2s会感觉生硬，大于0.4s会拖沓，0.25s是操作反馈的甜点区间。object-fit: cover让不同尺寸的商品图自动裁剪填满234x234的区域不变形，实际商品图的比例不可能完全统一，这一行是卡片高度整整齐齐的关键。
页面里的“鼠标移入事件”在这里其实不是事件，是CSS伪类:hover。新手经常把hover叫成“事件”，严格说事件是JS的概念，CSS里叫伪类。用hover做视觉反馈不需要写JS，这是纯CSS方案的优势。
3.2 标题超长省略与价格对齐：两个必会的三件套
商品标题经常超长，“XXpro 5000毫安大容量 超长续航”十几个字，在234px宽的卡片里肯定放不下，直接换行会把卡片撑得高低不齐。商城页面的通用做法是单行省略，或者两行省略后截断。
单行省略三件套：
.card-info h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }逻辑说明：white-space: nowrap禁止换行，overflow: hidden把超出部分藏起来，text-overflow: ellipsis在隐藏位置显示省略号。三行缺一不可，少一行都不生效。
如果想让标题保留两行，第二行末尾出现省略号，需要另一种写法：
.card-info h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }逻辑说明：display: -webkit-box开启老版弹性盒模型，-webkit-line-clamp: 2限定最多显示2行，-webkit-box-orient: vertical指定纵向排列。注意这组的兼容性不如单行三件套，Firefox从68版本开始支持-webkit-line-clamp，但老版本浏览器会直接显示全部文字，不会崩，所以可以放心用。
单行省略和两行省略选哪个，取决于产品视觉风格。密集展示的商城卡片一般用单行，大图卡片用两行。我自己的习惯是：拿不准就选单行，最保守，任何屏幕下都不会错位。
3.3 纯CSS轮播图：不要写JS也能循环播放
轮播图是这个项目里新手最犯怵的版块。很多人第一反应是“轮播必须用JS”，实际上纯CSS用animation加transform: translateX完全能做，只是不能支持手动点击切换——那是JS交互的范畴。静态项目里纯CSS轮播足以撑起视觉完成度，还能让新手理解动画的本质是“在一定时间内改变CSS属性值”。
HTML结构，5张banner图放在一个轨道容器里：
<section class="banner"> <div class="banner-track"> <div class="slide" style="background: #f0d5b7;">新品首发</div> <div class="slide" style="background: #d1e3f5;">智能家电节</div> <div class="slide" style="background: #c9e8d0;">以旧换新</div> <div class="slide" style="background: #f5d1d1;">好物5折</div> <div class="slide" style="background: #e3d1f5;">米粉节</div> </div> </section>对应CSS：
.banner { width: 100%; max-width: 1226px; margin: 14px auto 0; overflow: hidden; border-radius: 8px; } .banner-track { display: flex; width: 500%; animation: bannerScroll 15s linear infinite; } .slide { width: 20%; height: 360px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #666; } @keyframes bannerScroll { 0% { transform: translateX(0); } 20% { transform: translateX(0); } 25% { transform: translateX(-20%); } 45% { transform: translateX(-20%); } 50% { transform: translateX(-40%); } 70% { transform: translateX(-40%); } 75% { transform: translateX(-60%); } 95% { transform: translateX(-60%); } 100% { transform: translateX(-80%); } }逻辑说明：轨道容器.banner-track是5张图的水平拼合，宽度设为500%，每张.slide占20%，正好一张图等于轨道宽度的五分之一，那么translateX(-20%)就是向左移动一张图的宽度。关键在动画关键帧的设计：0%和20%都保持原位，意思是第一张图停留5秒；25%时移到-20%，也就是用1秒完成从第一张到第二张的滑动——这里的百分比和总时长15秒是直接对应的。
参数说明：15秒循环，5张图，每张停留5秒、切换1秒、停留5秒……最后100%落在-80%，即显示第五张。linear保证整个动画匀速，如果你想切换速度更丝滑，可以改成cubic-bezier(0.4, 0, 0.2, 1)。跳回第一张的瞬间发生在动画循环重启时，也就是从-80%跳回0，因为第五张和第一张视觉上相邻，这个跳变用户几乎感知不到。注意.banner必须设overflow: hidden，否则5张图会横向溢出撑破页面。
4. 交互感与动效：CSS 3D旋转、字体渐变与吸顶导航的参数调优
4.1 3D翻转：rotateY正负怎么判断
商品卡片的进阶玩法是做3D翻转：正面是商品图，背面是卖点文案，鼠标移上去卡片像扑克牌一样翻过来。这个效果在小米有品的活动页里很常见，实现上不需要3D库，CSS的transform配合perspective就够。
先看清楚transform: rotateY(60deg) translateZ(300px)这类组合变换到底长什么样。rotateY(60deg)是绕Y轴旋转60度，Y轴在CSS坐标系统里是竖直向下的；translateZ(300px)是沿Z轴往屏幕外移动300px。两者组合的效果是：卡片右边缘向屏幕里压进去，左边缘向观察者翘起来，同时整张卡片朝人脸靠近了300px。这种组合在CSS里执行顺序是从右往左的，先位移再旋转，所以新手调参数时经常发现“为什么移动方向和我想的不一样”。
正负判断有一条能记住的规则：rotateY的正值让元素的右侧向屏幕里转、左侧向屏幕外转；负值正好相反。以一张卡片为例，rotateY(180deg)就是左右完全翻转，正面变成背面。下面是一个可以直接照抄的商品卡3D翻转：
.card-3d { width: 234px; height: 320px; perspective: 1000px; } .card-3d-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s ease; } .card-3d:hover .card-3d-inner { transform: rotateY(180deg); } .card-face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; } .card-face.back { transform: rotateY(180deg); }逻辑说明：父容器.card-3d设perspective: 1000px，这是3D景深的距离，数值越小立体感越强但畸变也越明显，1000px是折中的默认值。.card-3d-inner的transform-style: preserve-3d告诉浏览器保留子元素的3D位置，没有这一行，子元素会被压平成一个平面，翻转效果就废了。.card-face用绝对定位让正反两面重叠，backface-visibility: hidden让背面朝用户时那一面隐藏，否则翻转后能看到正面的镜像。
参数说明：hover时rotateY(180deg)实现完整翻转。.card-face.back自己也要转180度，这是为了让背面文字的阅读方向在翻转后是正的，否则你会看到镜像文字。0.6s ease的翻转时长比普通hover的0.25s长，因为3D动效需要更多时间让眼睛跟随。
这里再多说一句，rotateX和rotateY的判断规则一样：正值让下侧或右侧往屏幕里转，负值让它们往屏幕外翘。想确认方向时不用背规则，直接在浏览器开发者工具里改角度，鼠标拖一下就知道哪个方向了。
4.2 字体渐变与吸顶导航：两个最常用的商业站技巧
商城页面的价格、活动标题经常用渐变色，不是整块图片，而是文字本身从一种颜色过渡到另一种颜色。CSS里做文字渐变的核心是background-clip: text，把背景裁剪成文字的形状，再把文字颜色设为透明。
.price-gradient { font-size: 24px; font-weight: bold; background: linear-gradient(90deg, #ff6700, #ff9500); -webkit-background-clip: text; background-clip: text; color: transparent; }逻辑说明：linear-gradient(90deg, #ff6700, #ff9500)定义从左到右的橙黄渐变，background-clip: text把背景限制在文字笔画范围内，color: transparent让文字本体透明，露出来的就是背景渐变。-webkit-background-clip是为了兼容旧版Chrome和Safari，现在标准属性background-clip: text已经得到主流浏览器支持，但前缀写法保留着不碍事。
吸顶导航是电商页另一个标配：页面往下滚，导航栏始终吸附在屏幕顶部。最省事的方案是position: sticky，它的优势是不脱离文档流——原始空间还在，下方内容不会突然顶上来。
.category-nav { position: sticky; top: 0; z-index: 100; background: #fff; }逻辑说明：top: 0是吸顶的触发位置，导航栏距离视口顶部为0时开始固定。z-index: 100保证滚动时商品卡片不会盖住导航。sticky有一个非常隐蔽的限制：它的吸附效果只在父容器范围内生效，而且如果父容器或祖先元素设置了overflow: hidden或overflow: auto，sticky会直接失效。这个坑在下面避坑章会重点展开。
需要注意，sticky对父容器高度有要求。如果<header>的高度正好等于导航栏高度，没有多余空间，滚动时导航栏没有“可吸附的旅途中转区”，效果也会不出现。一般把吸顶导航放到<body>或者很高的容器内，问题就自然消失。
4.3 动效参数：别一上来就调炫的，先把三个基础参数设对
动效翻车，绝大多数不是效果本身的问题，而是三个基础参数没设对：时长、缓动函数、触发范围。
时长决定手感。hover反馈、按钮态变化用0.15s~0.25s，让操作感觉跟手；卡片翻转、弹窗出现这类较大幅度的动效用0.4s~0.6s；轮播、走马灯这类连续播放的用8s~20s的周期。小于0.1s的动画用户根本感知不到，大于1s的会让等待变得焦躁。页面里所有动效时长尽量统一成几个固定档位，整个项目的节奏才协调。
缓动函数决定质感。ease是默认值，开头快结尾慢，用于大多数场景；linear适合轮播这类持续匀速的运动；cubic-bezier(0.4, 0, 0.2, 1)是 Material Design 的标准曲线，用在卡片浮起、对话框这类“快进慢出”的场合很高级。不要去背贝塞尔曲线参数，直接在浏览器开发者工具的动画面板里拖动曲线手柄，看到满意再复制。
触发范围决定性能。transition只作用于你在属性列表里声明的属性，不要写transition: all 0.3s，这会让hover时所有可动画属性一起过渡，包括box-shadow这种重绘代价高的属性。最佳实践是只过渡transform和opacity，这两个属性由GPU加速，不触发重排，在手机上滚动时不会掉帧。
5. 避坑排查：静态购物网站最容易翻车的5个细节
5.1 吸顶导航突然固定不住，页面往下滚它就跑了
现象：position: sticky写上了，top: 0也写了，导航栏在页面顶部时一切正常，一往下滚动就直接滚动走，完全不吸附。
原因：sticky的吸附范围被祖先容器的overflow属性限制了。常见的触发场景是：为了清除浮动或者做圆角裁切，在<header>或<body>上写了overflow: hidden，浏览器就会把sticky的参考范围限制在祖先容器内，容器滚出视口，导航跟着走。
解决：检查所有祖先元素，把<header>、<main>、<body>上的overflow: hidden删掉，或者把sticky元素往上提，直接挂在<body>的子级。如果确实需要overflow: hidden来裁切子元素，就改用position: fixed加body { padding-top: 48px; }的组合，用固定定位加占位高度模拟吸顶效果。
5.2 轮播图画到一半突然跳回第一张，或者干脆不循环
现象：纯CSS轮播播放到第二张或第三张时，画面突然闪回第一张，循环节奏乱七八糟；有时候第一张停留时间明显比其他张短。
原因：关键帧百分比和时间轴没对齐。比如5张图总时长15秒，每张应该停留3秒，但关键帧里第一段停留写成了0%到30%（4.5秒），第二段停留只给到50%（3秒），百分比之间的间隔就决定了每张图的停留时间，写错就乱。
解决：先把总时长拆成“切换+停留”的基本单元。5张图等于5次停留加5次切换，总共15秒，每张停留2.5秒、切换0.5秒。每个停留段占2.5/15 ≈ 16.6%，切换段占3.3%。写关键帧时按这个节奏排，最后100%落在最后一张停留结束的位置。还有一种更简单的检查方法：临时把animation-duration改成30s，停留和切换的节奏会被放大，哪里不对一眼就能看出来。
5.3 商品标题超长换行，把卡片撑得参差不齐
现象：一部分卡片标题是一行，另一部分是两行，商品卡片的高度对不齐，整个商品区像锯齿一样。
原因：没有给标题设置省略规则，也没有给卡片设固定高度。标题字数不同，换行后行数不同，卡片被内容撑高。
解决：给.card-info h3加上单行省略三件套，同时给.card-info设置固定高度，比如height: 48px，内部用flex或padding控制内容垂直位置。如果一定要两行标题，用上一章说的-webkit-line-clamp: 2，同时给.card-info设高度为两行文字的高度加padding，保证任何卡片都占一样高的空间。记住，省略规则要写在父容器有宽度约束的前提下，否则max-width: 100%缺了，省略号还是不出来。
5.4 本地打开CSS样式时灵时不灵，换个电脑直接裸奔
现象：双击index.html用浏览器打开，样式有时正常、有时完全丢失，控制台报错“Access to CSS stylesheet at 'file:///...' has been blocked”，图片也经常裂掉。
原因：浏览器对本地file://协议下的外部资源有限制策略，而且file://路径是绝对路径，项目文件夹一移动，路径全断。这个问题在交作业、发压缩包时最容易爆雷，别人解压到桌面后路径对不上，样式自然加载不出来。
解决：项目里CSS、图片全部用相对路径引用，CSS链接写成css/style.css，图片写成img/product-1.jpg。本地预览不要双击打开，起一个本地HTTP服务，在项目文件夹下执行python -m http.server 8000，浏览器访问http://localhost:8000。这样既绕开了file协议的限制，也模拟了真实的部署环境，路径问题在本地就能暴露。新手可以养成一个习惯：任何静态页面都以http://localhost方式预览，不直接双击。
5.5 外边距塌陷：给第一个商品卡片设margin-top，结果整个父容器跑了
现象：想给商品卡片区上方留出间距，写了.product-grid { margin-top: 20px }，结果整个商品区连同上方的banner一起被顶下去了，间距出现在了页面最外层。
原因：这是CSS的经典“外边距折叠”问题。垂直方向相邻的两个外边距会合并成较大的那一个，父容器和第一个子元素的上外边距也会合并，最后的外边距跑到父容器外面去了。
解决：有三个方案任选。第一种，父容器改用padding-top而不是子元素的margin-top，这是最直接的做法。第二种，给父容器加overflow: hidden或border-top: 1px solid transparent，阻断外边距合并。第三种，用flex或grid布局，在.product-grid上用gap: 14px控制内部间距，完全不依赖margin，也就不会被折叠。我的习惯是：同一个容器内的间距统一用flex的gap，不同版块之间的间距用padding，全局不用margin，从根上消灭这一类问题。
6. 验证与收尾：让本地页变成可交付的作品
页面写完不是结束，交付前要过三关：验证标准、验证路径、验证体验。
先做标准验证。打开W3C的HTML验证服务，把index.html整个文件内容粘贴进去，或者拖文件上传，它会列出所有标签嵌套错误、未闭合标签、属性拼写错误。大多数时候报错集中在<img>缺alt、<section>缺标题这类问题上，按提示修完，页面兼容性会明显提升。CSS可以用npx stylelint之类的工具查语法，不过静态项目规模不大，浏览器开发者工具里没有报错基本就够。
再验证路径。启动本地服务后，用浏览器的无痕模式打开，禁用缓存刷新一次，确认CSS和图片都加载成功。接着检查所有链接是否可点，把鼠标停在每个分类上确认hover态正常。这里有个实操技巧：在开发者工具Console里执行document.querySelectorAll('a').length，能快速统计链接数量，再逐个点一遍，比肉眼扫页面可靠。
最后一个动作是压缩交付。把项目文件夹里的node_modules、.DS_Store这类无关文件清掉，只保留index.html、css、img，然后压缩成zip。给别人时在压缩包内也保留同样的目录层级，不要在一个文件夹里再套一层文件夹，否则对方解压后路径又多了一层，容易出问题。
页面交付后如果有余力，可以再走一步：用CSS变量替换主色。在:root里定义--primary: #ff6700，所有用到主色的地方都换成var(--primary)，下次想快速换个主题色，只改一行。这种升级能让你从“写CSS”进入“设计CSS”的意识层面。
这个项目做完，比较值得的收获是你亲手证明了“不用JavaScript也能做出一个完整的商城首页”。我现在做静态落地页仍然保留这个习惯：先用纯CSS把视觉稿还原到九成，再考虑要不要加JS交互。很多页面做到最后会发现，JS只是锦上添花，CSS基本功才是决定页面美丑的分水岭。希望这些步骤和踩坑记录能帮你少走几趟弯路。
本文还有配套的精品资源，点击获取
