期末季又来了，连续几年带《Web前端基础》这门课的机房实践，我看到的期末大作业里，十个有八个都是“商城”题材，只是换了个壳：有的叫“团购商城”，有的叫“秒杀商城”，还有的挂个“校园二手”的名头。说实话，这不是题目老套，而是这类项目天然适合用来考察HTML、CSS、JavaScript三件套的基本功。真正把成绩拉开差距的，从来不是谁写得代码更花哨，而是谁能在演示的时候让页面结构、视觉样式、交互逻辑三块都立得住。这篇就把“HTML+CSS+JavaScript购物商城（团购）”这个方向从拆题、搭结构、写样式，到抠交互、躲开常见的运行时报错，一次性梳理清楚。
如果你正对着已经写了一半、但又卡在某一处的期末作业发愁，或者干脆还没动手、只建了一个空文件夹，这篇都值得花十几分钟读完。
1. 先把作业需求吃透：这题到底在考什么
1.1 评分表里那些看不见的“暗线”
课程设计类的作业，老师看重的条件其实相当固定，无非是四个方面：结构语义、样式还原、交互完整度、以及演示流畅度。很多同学栽在交互完整度上——页面做得像模像样，结果购物车的数量不能累加，返回之后再进来数据丢失，一刷新全部清零，平时分就这么被扣走一段。
我一般建议学生先想清楚，如果我是评委，最想看的是什么：不是动画多炫，而是三个问题——你的页面能不能静态浏览，你的按钮能不能产生数据变化，你的数据变化是不是带动了页面上的多处更新。这三点分别对应HTML结构是否清晰、CSS是否让信息层级分明、JavaScript是否真正驱动了DOM变化。
1.2 “团购”两个字带来的差异点
普通商城和团购商城之间的差别，是这题的破局点。普通商城只要做好“商品列表→加入购物车→结算”这一条链路就行，但“团购”意味着你天然多了几个可以演示的动态场景：
- 倒计时：剩余多少分钟多少秒，这个数字还在不停跳动；
- 成团进度：还差多少人才能成团，用文字或者进度条展示；
- 阶梯价格：单买一个价，成团后是另一个价，点击加购时价格跟着变；
- 结果状态：成团成功或者失败之后，页面上的提示语要切换。
这些全都是JavaScript的发挥空间，也是答辩时最容易加分的亮点。哪怕你的倒计时只做了分钟和秒，成团进度只做了文字提示，也比一堆静态卡片值钱得多。前端课设最怕的是几张图片加上几行说明文字，那叫画册，不叫商城。
2. 页面结构设计：十几个HTML标签怎么排兵布阵
2.1 先规划页面，再写第一个标签
动手之前，把页面拆出来。以最简方案为例，可以只有三个页面：
index.html：首页，展示团购专区和商品列表；list.html：商品分类列表页，用来体现多页面跳转；cart.html：购物车页面，承载结算逻辑。
能力有余力的话，再加一个detail.html做商品详情弹层或者详情页。但不要贪多，三个页面足够了，把一个页面写扎实比开十个页面全都很敷衍要强得多。
页面骨架可以统一一个模板。开头三行别乱写，这仨几乎是浏览器识别的“身份证”：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">DOCTYPE告诉浏览器“我按标准模式解析”；lang="zh-CN"给搜索引擎和浏览器标识语言；charset="UTF-8"保证中文不至于变成乱码。我盯作业时见过不少学生HTML文件能正常打开，但中文全挤成了乱码方块，往head里一看，要么没写charset，要么写成了gb2312又没有配套文件，十有八九就是栽在这一行上。
2.2 分清语义标签，别全用div糊
用div糊页面其实也能跑，但结构会变得一塌糊涂。老师一眼扫过去，页面里几十个div层层嵌套，基本就能判断你是刚入门的选手。我建议遵循这样一套最简骨架：
<header> 站点logo + 导航 + 搜索框 </header> <main> <section> 团购专区（倒计时 + 拼团进度） </section> <section> 商品列表（卡片网格） </section> </main> <footer> 版权信息 + 联系方式 </footer>商品卡片内部的语义化也值得注意。图片要有alt信息，价格要有独立标签包裹，加入购物车按钮用button而不是div加onclick。这样写出来的HTML，哪怕不去看CSS，光阅读标签结构，也能读懂页面信息顺序，答辩时被问到“你这个页面结构怎么设计”的时候，能讲出来龙去脉。
2.3 多页面之间的路径问题：./和../的分界线
页面一多，路径问题就来了。这也是为什么我建议固定这种目录结构：
shopping-mall/ ├── index.html ├── list.html ├── cart.html ├── css/ │ ├── common.css │ └── index.css ├── js/ │ └── main.js └── images/ ├── goods01.jpg └── goods02.jpg从index.html引用css，是css/common.css，但在cart.html里就要改成../css/common.css。原理很简单：../指的是“上一级目录”。很多错误都是这一层关系没理顺——页面能打开，图片全是裂图，样式全部丢失，F12一看全是404。
顺便提一个很多学生踩过的大坑：不要用绝对路径，比如/css/common.css或者C:\Users\...。前者换个目录结构就崩，后者换台电脑就崩。这种代码交上去，任课老师在自己电脑上解压后打开，十有八九是白的。
3. CSS修饰：让网页达到“拿得出手”的最低标准
3.1 三种样式引入方式怎么选
CSS引入方式有三种：外链、内部样式、内联样式。期末项目里大多数页面都会共享导航和页脚，所以建议主样式放外链文件，做到一处修改全局生效；每个页面独有的样式，如果想图省事，可以放在该页面<head>的<style>标签里；内联样式能不用就不用，它写起来快，但后期调整任何一个按钮的颜色都要一个元素一个元素地找，比用外链改一个变量麻烦好几倍。
尤其是页面数量超过两个的情况下，公共样式必须拆分。把导航、按钮、卡片这种组件级样式独立出来，页面之间引用同一个common.css。这样答辩前发现按钮色系不统一，只需要改一处。
3.2 布局方案怎么取舍
关于布局，我看了很多学生的作业，最常出现的组合是：全局用flex，局部网格用grid，个别绝对定位的标签用absolute。实际上这三板斧完全可以覆盖大多数需求，不太建议期末考试里写一大堆float出来。
float太古老，而且还要处理“清除浮动”的问题，容易给自己挖坑。相比之下：
flex适合一维排列：顶部导航、卡片横向排布、按钮居中；grid适合二维网格：商品列表、分类图标矩阵；position: relative/absolute适合做角标、悬浮标签、回到顶部按钮。
拿商品列表举例子，用grid最省心：
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }这句代码的意思就是“一行四列，列与列之间间隔20像素”，商品数量多的时候自动换行。理解它之后，你会发现比自己用浮动或者inline-block一个个挤位置高效太多了。
3.3 让页面“动起来”但没有变成“蹦迪现场”
很多同学特喜欢加特效，这是好事，但要有节制。我整理两个热门效果，正好是很多学生总在查的那两个：
第一个是“涟漪光圈扩散”。通常用在按钮点击或者焦点状态上，效果是点击按钮后以点击处为圆心扩散一圈光圈。核心思路是用伪元素加上动画：
.btn-ripple { position: relative; overflow: hidden; } .btn-ripple::after { content: ""; position: absolute; border-radius: 50%; width: 100px; height: 100px; background: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple 0.6s ease-out; } @keyframes ripple { to { transform: scale(4); opacity: 0; } }这个效果本身不难，难点在于：动画结束后要回到淡出状态，否则整个按钮上会一直残留一个光斑。这就是为什么动画里最后要把opacity降为0。
第二个热门是3D旋转效果，也就是类似transform: rotateY(60deg) translateZ(300px)这类代码。先泼一盆冷水：这个效果写的时候容易，演示效果却很容易翻车，因为大多数情况下你忘记给父容器设置perspective透视值，整个旋转看起来就只是一条扁平的线性缩放，毫无3D感。加上透视的正确写法是：
.parent { perspective: 1000px; } .child { transform: rotateY(60deg) translateZ(300px); }另外要注意书写顺序：rotateY(60deg) translateZ(300px)是先旋转后位移，位移会沿着旋转后的Z轴方向进行；如果调换顺序，就成了先平移再旋转，效果完全不同。这个细节做作业时并不难，但答辩时被问到“为什么这样写顺序要对调？”你要是能回答出来“旋转会改变局部坐标系，所以translateZ的朝向跟着变了”，这印象分直接拉满。
4. JavaScript核心逻辑：购物车与团购的完整链路
4.1 倒计时显示与更新逻辑
团购的核心体验，我理解就是“时间紧迫+差一点就成团”。倒计时是最基础的元素。很多学生照着教程抄代码，结果卡在刷新页面后倒计时归零。原因很简单：你的倒计时起点是写死的当前时间，而它又没存到任何持久化存储里。
我给你一个稳妥的做法：
// 假设团购结束时间为未来某个时间戳，先固定写死 const endTime = new Date().getTime() + 3600 * 1000; function updateCountdown() { const now = new Date().getTime(); const diff = endTime - now; if (diff <= 0) { document.querySelector("#countdown").textContent = "已结束"; return; } const hours = Math.floor(diff / (60 * 60 * 1000)); const minutes = Math.floor((diff % (60 * 60 * 1000)) / (60 * 1000)); const seconds = Math.floor((diff % (60 * 1000)) / 1000); document.querySelector("#countdown").textContent = hours + ":" + minutes + ":" + seconds; } setInterval(updateCountdown, 1000);这段代码的核心是：把时间差算出来，然后不断更新页面文本。不要每次更新时重新读取系统时间再重新计算结束时间，否则一刷新页面，倒计时就会重新从满值开始，被老师发现绝对扣分成团逻辑的分。
4.2 购物车的数据结构：用数组管理一切
购物车逻辑，最忌讳的做法是直接去操作DOM来加减数量。比如做了一排“+1”按钮，每次点击就用innerText把数字改一改，看起来是工作了，但一旦要算总价、要删除商品，你会发现数据在页面上四处分散，根本无从管理。
正确做法是：维护一个cart数组，页面上所有数字都由这个数组渲染出来。数据变，页面就跟着变，页面交互只负责改数据：
let cart = []; function addToCart(id, name, price) { const item = cart.find(goods => goods.id === id); if (item) { item.count += 1; } else { cart.push({ id, name, price, count: 1 }); } renderCart(); } function renderCart() { const cartList = document.querySelector("#cart-list"); cartList.innerHTML = ""; let total = 0; cart.forEach(item => { total += item.price * item.count; const li = document.createElement("li"); li.textContent = `${item.name} x ${item.count} - ¥${item.price * item.count}`; cartList.appendChild(li); }); document.querySelector("#total-price").textContent = total; }这套模式的精髓就是“单向数据流”：数据源是唯一的，页面永远是从数据渲染出来的，绝不要在按钮点击事件里直接改HTML文字。我见过的最夸张的一份作业，加购数量直接写死在按钮的文案上，每次点击重新读按钮文字再拼接字符串，这种代码在期末答辩现场很难扛住老师的追问。
4.3 拼团人数阈值与价格联动
团购项目与众不同的地方在于“价格会变”。可以设计成：当前已参团人数大于等于成团人数时，价格显示为团购价；人数不足时，显示原价并提示“还差N人成团”。
const groupThreshold = 10; let joinedCount = 3; function updateGroupInfo() { const remain = groupThreshold - joinedCount; const priceLabel = document.querySelector("#group-price"); if (remain <= 0) { priceLabel.textContent = "已成团，团购价 ¥89"; } else { priceLabel.textContent = "还差 " + remain + " 人成团，当前价 ¥129"; } }加入购物车按钮点击时，同时把joinedCount加1，再更新提示信息。这样每次点击都有明显的页面反馈，演示时效果立竿见影。这里注意点：成团人数可以用一个变量控制，不要写死在HTML文本里，否则JavaScript根本改不了它。
4.4 数据持久化：用localStorage保数据
一旦加入了localStorage，整个项目的档次就上来了。刷新页面购物车商品还在，这是很多普通作业做不到的。用法也简单：
// 存入 localStorage.setItem("cart", JSON.stringify(cart)); // 读取 const storedCart = JSON.parse(localStorage.getItem("cart") || "[]"); if (storedCart.length) cart = storedCart;这套方案要注意的点是：读取出来的是字符串，必须用JSON.parse转成数组，很多学生直接localStorage.getItem("cart")拿到的是一串字符串，然后当成数组用.length之外的方法，运行时报错，一查全是类型问题。
5. 写期末项目最常遇见的几个坎：运行时报错的完整排查思路
5.1 明明文件都在，样式却加载不出来
这个场景太常见了：项目文件夹放在桌面，双击打开index.html，结果页面光秃秃的，没有颜色没有布局，F12控制台里有时会看到一条红色的报错，大意是读取本地样式表被浏览器拦截了。
我的排查顺序是这样的，先看控制台Network面板，样式文件请求的响应状态是什么。如果是404，说明你的路径写错了，检查href是不是多了/或者少了../；如果状态显示的是一个报错，且页面是通过双击以file://协议打开的，那就是浏览器安全策略的问题——本地文件直接读取别的本地文件会被拦截。
解决方案很简单，在项目根目录启动一个本地服务，而不是直接双击HTML文件。两个最常用的方式，选择一个即可：
# 方式一：如果你装了 Python 环境 python -m http.server 8080 # 方式二：如果你用 VS Code 写代码，装 Live Server 插件，右键选择 Open with Live Server启动后在浏览器里访问http://localhost:8080/index.html，所有文件引用都会被认为是同源请求，加载问题迎刃而解。
5.2 JavaScript里最常见的拼写陷阱
几分钟前我还在给学生改作业，他贴了一段报错截图给我，报错是document.queryselector is not a function。注意，JavaScript里所有的选择器方法都是驼峰命名的，querySelector中的S必须大写，querySelectorAll同理。大小写错一个字母，浏览器直接不认，这是新手期最高频的报错，没有之一。
另一个高频报错是“找不到元素”：Cannot read properties of null。出现这个问题的原因往往是脚本放在了HTML最前面的<head>里，而<head>里的代码执行时，后面的<body>还没解析到，document.querySelector("#cart-list")找不到元素，返回null。
解决方式有两个：一是把<script>标签放到<body>末尾；二是把JS代码包在document.addEventListener("DOMContentLoaded", function(){ ... })里，等DOM树加载完成后再执行。期末作业我推荐前者，简单、直接、不容易忘。
5.3 关于IE11兼容性，说个现实情况
每到课设期间，总有学生问我：“老师，为什么IE浏览器打开我的页面样式全乱了？”这里有个绕不开的话题：IE11不支持很多现代CSS特性，比如CSS Grid、某些flex属性、CSS变量等，你写的grid-template-columns在IE里大概率不生效。
但我给的建议是：期末作业阶段，优先保证Chrome浏览器下的效果。演示前在答辩用的电脑上确认一遍用的是Chrome或者Edge。如果老师明确要求浏览器兼容，那就在布局上降级，商品列表改用flex加flex-wrap，很多IE对flex还留有一线生存空间。不要在已经写完grid布局后，再花大量时间回溯兼容写法，作业的核心还是把功能跑通。
5.4 图片加载不出来，大概率是这两个原因
一是图片文件名大写字母与引用不一致，比如文件名是iPhone.jpg，但HTML里写的是iphone.jpg，Windows本机打开看不出问题，放到Linux服务器上一演示就裂了。二是图片路径层级不对，参考前面目录结构那一段，检查引用的相对路径。
顺带提一个让演示加分的小细节：给商品图片设置统一的宽高和覆盖方式，不然图片尺寸参差不齐，再好的布局都会被撑得乱七八糟。一个经典的CSS魔术就是：
.product-card img { width: 100%; height: 200px; object-fit: cover; }object-fit: cover让图片按比例裁剪填满这一块区域，既不会拉伸变形，也不会卡片产生锯齿感。
6. 展示与答辩环节，那些能救命的细节
作业写得再扎实，如果展示环节翻车了，前面全白费。我特别想提醒这几个点，都是实战中总结出来的经验：
第一，演示前清一遍浏览器缓存。特别是CSS文件改动之后，浏览器可能加载的是旧缓存，页面样式和代码不一致，你自己反复刷新看不出问题，但答辩的时候有延迟更新或者样式错乱，非常影响观感。
第二，所有交互操作都演示一遍完整的闭环。我的建议是准备一张“演示脚本”：从首页入场，点击导航进入列表页，点击某件商品加入购物车，跳转至购物车页面，修改数量，计算总价，然后刷新页面展示localStorage效果。按这个脚本走完，整套逻辑闭环了，比临时在页面上乱点要稳得多。
第三，被提问时，别慌，要有意识地回答“为什么这样设计”。比如被问到“为什么这里用flex而不用table”，可以回答“table本质上是为了展示表格数据设计的，它的格子之间天然存在间隙和撑开问题，flex可以更好地控制主轴方向的排列和间距”。不用背源码，能讲清楚原因，比背一百行代码都管用。
第四，别忘了关掉那些开着的不相关的标签页和控制台报错。我就见过学生演示到一半，页面上突然弹出一个浏览器的翻译插件气泡，还有学生控制台里挂着一排红色的404报错还浑然不觉。演示之前，抽两分钟清理“战场”，这比临时改一行代码有用得多。
写了这么多年课程设计指导，看到最后能拿到高分的学生往往不是最聪明的，而是最能沉下心把基础链路走完的：结构清晰、样式统一、交互有反馈、逻辑能自洽。如果你现在正在为这个购物商城（团购）作业发愁，不妨按这条线重新捋一遍自己的代码，把那些“能跑但一刷新就崩”的隐患逐个清掉，你会发现期末答辩其实没那么吓人。
