去年帮学弟看他的末网Web期末大作业，打开源码那一刻我就笑了——首页index.html里塞了800多行，站设作业CSS全写在style标签里，源码JS函数名从aaa排到aaf。末网这不是站设作业个例。每年期末，源码总有一批人把网站设计做成了“能跑就行”的末网缝合怪。

先说实话：老师给的站设作业评分标准里，“功能完整”占40%，源码“代码规范”占20%，末网“页面美观”占20%，站设作业剩下的源码是答辩和文档。这意味着你不需要做成淘宝，末网但必须让每个页面都能点、站设作业每个按钮都有反应、源码代码别丑到让助教皱眉。

文件结构别偷懒

我见过最离谱的提交：所有文件堆在桌面，用相对路径引用图片，换台电脑全挂。正确的做法是建一个根目录，比如web-final，里面分css/、js/、images/、pages/四个文件夹。首页index.html放根目录，其他子页面放pages/。这样引用路径清晰，打包发给老师也不会丢文件。

CSS别写行内样式。一个style.css管全局，再按页面拆成login.css、dashboard.css。用Flexbox做布局，别再用float——2024年了，display: flex能解决你90%的排版问题。导航栏用position: sticky固定在顶部，比JS监听滚动条优雅得多。

JavaScript别只会alert

很多人的交互就是onclick="alert('登录成功')"。这拿不到高分。至少做三件事：表单验证、DOM操作、本地存储。

表单验证用正则。邮箱/^[^\s@]+@[^\s@]+\.[^\s@]+$/，手机号/^1[3-9]\d{ 9}$/。验证不通过时，别弹窗，直接在输入框下方显示红色提示文字——用insertAdjacentHTML动态插入<span class="error">，体验好得多。

DOM操作举个例子：做一个待办列表。输入框回车后，用createElement生成<li>，绑定删除按钮的点击事件，再把整个列表存进localStorage。刷新页面数据还在，老师一看就知道你动了脑子。

响应式不是可选项

答辩时老师可能用手机打开你的网站。加一行<meta name="viewport" content="width=device-width, initial-scale=1.0">，然后用媒体查询写两套样式。断点设在768px：大于768px显示侧边栏，小于则隐藏侧边栏、底部出现导航条。我学弟那个项目加了响应式后，直接涨了8分。

细节决定印象分

给所有图片加alt属性。给按钮加:hover变色和:active缩放。用transition: all 0.3s让交互有呼吸感。控制台不能有红色报错——打开F12，把未定义的变量、拼错的函数名全修掉。

最后说个真事：隔壁班有人用Bootstrap套了个模板，功能全但代码全是框架class，答辩时老师问“你这导航栏怎么实现的”，他答不上来，挂了。自己手写，哪怕丑点，你能讲清楚每一行在干嘛，这才是大作业的真正目的。

源码放GitHub上，README写清楚每个文件的作用和启动方式。老师打开仓库地址那一刻，你的印象分已经领先了。

(责任编辑：探索)