每年期末，HTML+CSS+JavaScript的大作业里，购物商城几乎是"指定选题"级别的存在，尤其是像丝芙兰这种视觉调性很明确的彩妆商城，做出来的效果往往比五花八门的杂货铺要好看得多。我前前后后帮不少学弟学妹看过这类期末作业，也陪跑过几个完整项目，发现真正的问题从来不是"会不会写代码"，而是"不知道怎么把三个东西组织成一件完整的作品"。

这篇文章就围绕这样一个典型场景展开：用HTML+CSS+JavaScript实现一个丝芙兰风格的购物商城，作为网页开发课程的期末大作业。我会从选题分析、页面结构、视觉还原、交互实现、数据持久化到答辩演示，把整个项目从0到1拆开讲清楚。适合正在赶这份作业、想拿高分、或者后续想把它扩展成作品集项目的同学参考。内容按"先想清楚评分逻辑，再动手写代码"的顺序来，建议从头看到尾。

1. 先想清楚：购物商城期末作业到底在"考"什么

很多同学拿到题目就直接开写，写到一半发现页面丑、功能乱、改不动。这不是手速问题，是没搞懂老师通过这份作业想验证什么。我看了几十份类似作业之后，总结下来评分点基本落在四个维度上，你们可以一条条对照自查。

1.1 四个能力维度

第一个维度是页面结构能力。老师会看你的站点是不是有合理的多页面规划，还是说把所有东西堆在一个index.html里。能拆出首页、商品列表页、详情页、购物车页，每页有清晰的header、nav、main、footer，这本身就说明你有"站点"的概念，而不是只会做"单张网页"。

第二个维度是样式还原能力。HTML写出来谁都会，难的是让页面看起来像个正经商业站点。字体、间距、配色、卡片悬浮效果、响应式布局，这些都属于CSS的考察范围。丝芙兰这类彩妆商城之所以适合做作业，就是因为它的视觉语言非常统一——黑、白、红三色为主，大量留白，商品卡片规整，做完之后"像不像"一眼就能看出来。

第三个维度是交互实现能力。购物商城的标配交互就三样：轮播图、商品筛选、购物车增删改。能独立实现这三样，说明DOM操作、事件监听、数组方法这些JavaScript核心内容都过关了。反过来，如果这三样全是复制粘贴的插件，老师一问原理就会露馅。

第四个维度是数据管理能力。购物车加进去之后，刷新页面数据还在不在？商品数量改了，总价有没有同步更新？这里涉及JavaScript里的状态管理思路，以及localStorage之类的浏览器存储方案。别小看这一条，很多作业就是栽在这里。

1.2 为什么大多数作业看起来像"网页拼贴画"

我给一份典型的低分作业画过像：一个超长的index.html，样式全部写在