简介面向网页设计课程期末作业与前端初学者的个人博客网站源码包内置完整的站点页面与在线效果演示可直接运行预览。压缩包共53个文件、45.44MB其中包含4个HTML页面首页、信息页、列表页、关于页、5个CSS样式表、6个JS交互脚本及19张JPG、2张PNG图片另有17个URL书签链接整体采用HTMLCSSDiv布局结构清晰便于对照学习。资源已吸引7366人学习浏览借助演示地址能够直观看到页面渲染效果适合作为期末作业模板或练手项目。页面中涵盖了header、nav、article、aside、footer等常用标签并配有jquery、滚动加载等脚本读者可以从中掌握网页骨架搭建、样式美化与基础交互实现的完整思路在此基础上进行替换改造即可快速完成一份合格的网页设计作业。1. 网页设计期末作业带演示真正的分水岭不在代码量而在“能不能当场跑起来”网页设计期末作业是 Web 前端课程里最容易被低估的一关。你花两周写完的 HTMLCSS 页面到了验收现场只开了一个file://协议下的本地文件图片裂了、字体乱了、动画卡了老师问“为什么我这里显示不对”时你只能重复“我这边是好的啊”。这类作业的隐藏评分项从来不是页面多炫而是三件事代码结构是否规范、交互是否有真实反馈、演示环节是否经得起换机器换浏览器。带演示这个后缀意味着你得把作业当作一个可交付的小型 web 项目来做而不是一堆散落的网页文件。适合谁读正在赶网页设计大作业的学生、需要辅导作业的从业者以及想用最短路径把静态页面做成“能演示、能答辩、能交差”的成品的人。2. 作业选题的范围与结构设计一个页面撑不起评分表三个页面才是及格线2.1 选题怎么定从“能讲清楚”倒推别从“好看”正推网页设计期末作业最常见的翻车点不是技术是选题。很多人选“科技感官网”“炫酷游戏页”结果做到一半发现自己只会贴背景图和堆动画库。更稳的思路是选一个你能讲清楚业务逻辑的主题。按我见过的作业选题分布美食、旅游、校园、传统文化这四类占七成以上原因很简单这类主题的素材好找、图片语义清晰、信息层级不用硬拗。比如“中秋节网页设计”这类题目本身就是给了场景和内容的命题作文你要做的只是把节日元素拆成导航、Banner、习俗介绍、留言板四个模块每个模块对应一个页面或一个区块。我一般会建议学生按“三页结构”来做首页负责展示和引流子页负责信息密度联系页负责表单交互。三页不是指三个独立 HTML 文件而是三个逻辑单元可以是index.html加两个子页面也可以是一个单页应用里的三个锚点区块。期末作业的评分表通常包含结构完整度是否有 header/nav/main/footer、内容相关度、样式丰富度、交互实现度四个维度三页结构能让你在每个维度都有东西可写。2.2 目录结构与文件命名给评分老师留一条能看懂的路好多作业交上来是一堆新建文件夹 (2)/未命名-1.html这类命名先扣一半印象分。规范的文件组织不是形式主义是让答辩时的你自己也能在三分钟内找到要改的代码。一个我常用的作业目录模板长这样web-homework/ ├── index.html # 首页Banner 内容概览 页脚 ├── about.html # 子页主题详细介绍 ├── contact.html # 子页留言表单 联系方式 ├── css/ │ ├── style.css # 全局样式变量、重置、公共组件 │ └── pages.css # 各页面差异化样式 ├── js/ │ └── main.js # 导航响应、表单校验、滚动动画 ├── images/ │ ├── banner.jpg # 首屏大图 │ └── content/ # 内容区配图 └── assets/ └── fonts/ # 本地字体文件可选这个结构的核心逻辑是“静态资源按类型分、页面文件按路由分、样式按作用域分”。如果你用的是纯 HTMLCSSJS 而不是 Vue 或 React这个结构足够支撑到答辩结束。有个小建议图片目录下的文件名用英文小写加连字符不要用中文名和空格。很多学生在本机跑得好好的交到老师那里图片全裂就是因为文件名里有中文或空格服务器或浏览器对 URL 编码的处理方式不同踩坑率极高。2.3 布局方案选哪种Flex 做结构Grid 做二维排布别混着乱用页面布局是网页设计作业里代码量最大也最容易被批“不够专业”的部分。现在的浏览器对 Flex 和 Grid 的支持已经非常成熟你不用再碰 Float 布局和 Table 布局那些老古董。我的习惯是整体页面骨架用 Flex 撑起来——导航栏、左右分栏、卡片排列都是 Flex 的舒适区需要做图片墙、产品展示、日历这种二维排列时用 Grid 的grid-template-columns直接划分列数。举一个实际的 Banner 区域写法这是作业里最常用的头部结构header classsite-header div classlogo img srcimages/logo.png altlogo span中秋食记/span /div nav classmain-nav ul lia hrefindex.html classactive首页/a/li lia hrefabout.html中秋起源/a/li lia hrefcontact.html留言互动/a/li /ul /nav /header对应的 CSS 用 Flex 把左右两端拉开.site-header { display: flex; justify-content: space-between; align-items: center; padding: 0 40px; height: 64px; background: #1a1a2e; position: sticky; top: 0; z-index: 100; } .main-nav ul { display: flex; gap: 32px; list-style: none; } .main-nav a { color: #eee; text-decoration: none; font-size: 14px; padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color 0.3s ease; } .main-nav a:hover, .main-nav a.active { border-bottom-color: #e94560; }这里的position: sticky是演示时的加分点——滚动页面时导航栏固定在顶部这种“滚动即视感”比静态导航更容易让老师看出你做了交互。transition给的 0.3 秒悬停过渡是低成本高感知的细节鼠标滑过导航时底部边框变色肉眼可见的反馈比任何口头描述都管用。3. 页面从静态到带演示效果交互、动效与表单的落地代码3.1 滚动渐显动画用 IntersectionObserver 替代“一上来全显示”网页设计作业想要“带演示”的感觉最立竿见影的做法是给页面加滚动渐显效果。很多学生的做法是页面加载时所有内容一次性铺开老师滚轮一滑就完了没有节奏感。用 IntersectionObserver 可以做到元素进入视口时才淡入上移代码量不大答辩时还能讲出“性能友好”这个点——它不阻塞主线程不像传统的scroll事件监听那样频繁触发计算。// js/main.js const fadeElements document.querySelectorAll(.fade-in); const observer new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting) { entry.target.classList.add(visible); observer.unobserve(entry.target); // 只触发一次避免重复动画 } }); }, { threshold: 0.15, // 元素露出 15% 时触发 rootMargin: 0px 0px -40px 0px // 底部预留 40px略晚一点触发更自然 }); fadeElements.forEach((el) observer.observe(el));对应的 CSS 里定义两个状态.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-in.visible { opacity: 1; transform: translateY(0); }参数上的讲究有两个地方。threshold: 0.15表示元素进入视口面积达到 15% 才触发如果设成 0 会导致元素刚露出 1 像素就开始动画观感上像“急不可耐地跳出来”设成 1 又意味着必须完全露出来才触发页面会显得迟钝。我一般取 0.1 到 0.2 之间。unobserve是为了防止动画重复播放——有些学生不做这一步滚动上去再滚下来元素会反复闪答辩时极其尴尬。3.2 图片轮播图别用现成插件手写一个能讲清楚的版本轮播图是网页设计作业里出现频率最高的交互组件也是演示时最容易出 bug 的组件。很多学生直接从网上复制一段 jQuery 插件代码答辩时老师问“这个$是什么”“slick怎么初始化的”就答不上来。更稳的做法是手写一个极简轮播代码量不过三十行但每一步都能讲明白。div classslider idslider div classslider-wrapper div classslideimg srcimages/banner1.jpg alt中秋赏月/div div classslideimg srcimages/banner2.jpg alt月饼制作/div div classslideimg srcimages/banner3.jpg alt灯笼灯会/div /div button classslider-btn prev idprevBtn〈/button button classslider-btn next idnextBtn〉/button div classslider-dots iddots/div /divconst wrapper document.querySelector(.slider-wrapper); const slides document.querySelectorAll(.slide); const prevBtn document.getElementById(prevBtn); const nextBtn document.getElementById(nextBtn); const dotsBox document.getElementById(dots); let currentIndex 0; const slideCount slides.length; // 动态生成圆点 for (let i 0; i slideCount; i) { const dot document.createElement(span); dot.classList.add(dot); dot.dataset.index i; dotsBox.appendChild(dot); } const dots document.querySelectorAll(.dot); dots[0].classList.add(active); function updateSlider() { wrapper.style.transform translateX(-${currentIndex * 100}%); dots.forEach((dot) dot.classList.remove(active)); dots[currentIndex].classList.add(active); } function nextSlide() { currentIndex (currentIndex 1) % slideCount; // 循环到最后一张回第一张 updateSlider(); } function prevSlide() { currentIndex (currentIndex - 1 slideCount) % slideCount; updateSlider(); } nextBtn.addEventListener(click, nextSlide); prevBtn.addEventListener(click, prevSlide); dots.forEach((dot) { dot.addEventListener(click, () { currentIndex Number(dot.dataset.index); updateSlider(); }); });这里有一个关键的 CSS 约束.slider-wrapper必须设成display: flex且transition: transform 0.5s ease每张.slide要flex: 0 0 100%保证一张占满整个视口宽度。translateX(-${currentIndex * 100}%)是按百分比移动而不是像素值这样无论浏览器窗口怎么缩放都不会错位。所有组件尽量提供可运行的项目包跑不起来就用基础页面你在演示时不一定有时间改代码但你能在演示前把resize、click这些事件都测一遍。3.3 表单校验与提交反馈给“留言板”一个不刷新页面的体验毕业设计里的联系页通常包含一个表单这是演示时的重头戏——因为它是唯一一个能让老师亲自上手操作的交互点。最基础但也最稳的实现是前端做必填校验和格式校验提交时用preventDefault拦截默认行为模拟一个异步提交过程并给出成功提示。form idcontactForm novalidate div classform-group label forname姓名/label input typetext idname namename required placeholder请输入姓名 span classerror-msg>const form document.getElementById(contactForm); const successBox document.getElementById(formSuccess); form.addEventListener(submit, (e) { e.preventDefault(); // 阻止默认提交先做前端校验 const name document.getElementById(name); const email document.getElementById(email); const message document.getElementById(message); let isValid true; const errors document.querySelectorAll(.error-msg); errors.forEach((err) (err.textContent )); if (name.value.trim() ) { document.querySelector([data-error-forname]).textContent 姓名不能为空; isValid false; } const emailPattern /^[^\s][^\s]\.[^\s]$/; if (!emailPattern.test(email.value.trim())) { document.querySelector([data-error-foremail]).textContent 邮箱格式不正确; isValid false; } if (message.value.trim().length 5) { document.querySelector([data-error-formessage]).textContent 留言至少 5 个字; isValid false; } if (isValid) { successBox.classList.remove(hidden); form.reset(); setTimeout(() successBox.classList.add(hidden), 3000); } });这里novalidate属性很关键。如果表单不加它浏览器自带的 HTML5 校验会在你submit事件触发前弹出默认提示气泡那你的自定义错误提示就永远没机会显示答辩时看起来像“两个系统在打架”。加了novalidate后所有校验逻辑走你的代码你才能完整讲清“校验规则是什么、错误怎么展示、成功后怎么反馈”。4. 演示环境准备从本地文件到别人机器也能跑4.1 为什么file://协议下打开会翻车网页设计作业带演示这个后缀最容易被忽视的环节就是演示环境。大量学生直接双击 HTML 文件用file://协议打开这在本机可能看起来没问题但只要你的页面里用了fetch请求本地 JSON 数据、用了ES6 Module的import语法、或者 CSS 里引用了跨域字体file://协议下全部会失效。浏览器出于安全策略会阻止通过file://发起的大部分异步请求和模块加载。解决方案是在本地起一个静态服务器。如果你电脑上装了 Node.js一行命令就能搞定cd web-homework npx serve .如果没装 Node.js用 Python 也一样cd web-homework python -m http.server 8080然后浏览器访问http://localhost:8080就能看到页面。这里要注意端口选择8080被占用就换8081或者用8000。演示时建议提前把端口固定下来别现场看终端输出再手忙脚乱地输网址。另外localhost和127.0.0.1在这类场景下等价但你演示时最好用localhost更短更不容易打错。4.2 跨设备演示手机预览和电脑屏幕并排展示期末作业带演示的另一个常见形式是做手机端适配。很多老师会问“你这个页面在手机上能看吗”即使评分标准里没写移动端适配能把页面在手机浏览器上跑通也是一个极好的加分项。最简单的做法是开 Chrome DevTools 的设备模拟模式按F12后点左上角的设备图标选iPhone 12 Pro之类的预设尺寸看效果。meta nameviewport contentwidthdevice-width, initial-scale1.0这行viewport标签是移动端显示的基础不加它手机浏览器会把桌面网页按 980px 宽度缩放显示字小到看不清。加了这个标签你的页面才会以手机屏幕宽度为基准布局。同时 CSS 里可以加一条媒体查询来微调关键位置media (max-width: 768px) { .site-header { flex-direction: column; height: auto; padding: 12px 16px; } .main-nav ul { flex-wrap: wrap; gap: 12px; } .slider-wrapper .slide img { height: 200px; object-fit: cover; } }在演示前把这个768px断点的效果跑一遍确认导航栏折行不出错就够用了。如果你时间充裕还可以再补一个max-width: 480px的断点把卡片式布局改成单列。移动端适配不用做到完美做到“能看、不乱、不溢出”就足以在答辩时多讲两分钟。4.3 答辩前最后一轮检查图片、字体、链接、控制台演示翻车最常见的原因是资源路径问题而这些在本地双击打开时往往看不出来因为代码和图片在同一个文件夹相对路径总能匹配上。一旦你把整个项目文件夹拷贝到 U 盘或者打包发给老师目录层级变了图片路径对不上就会裂开。我一般让学生做一次“寄生测试”——把项目文件夹随便挪一个位置再打开一次如果页面仍正常说明路径是相对且自洽的。打开浏览器控制台看是否有红色报错这一步必须养成习惯。F12的 Console 面板如果出现404 (Not Found)或者Failed to load resource说明有资源文件没找到。另外确认没有Mixed Content警告——如果你用了https://的图片资源但页面是在http://localhost下打开部分浏览器会拦截这类混合内容。最稳的图片策略是全部下载到images/目录不要用在线图片链接这样既避免了跨域问题也防止演示现场网络波动导致图片加载不出来。5. 网页设计期末作业的避坑清单这 5 个坑几乎每个班都会有人踩5.1 图片裂了不显示现象在自己电脑上打开页面所有图片正常换一台电脑或者交到老师那里就变成一个个碎图图标。原因图片路径用了绝对路径比如C:/Users/张三/Desktop/web作业/images/1.jpg或者文件名含中文和空格。绝对路径绑定的是你本机的目录结构换机器必然失效中文文件名在部分服务器环境下会因 URL 编码差异而无法访问。解决所有图片引用改成相对路径统一用英文小写文件名加连字符例如images/moon-cake.jpg。在代码里搜索一下src和href凡是以C:、/Users、file://开头的路径全部要改掉。5.2 滚动条滚不到底页面被“截断”了现象页面内容很多但浏览器右侧的滚动条只能滚到某个位置就停了底部内容看不见。原因常见的元凶有三个一是某个元素设置了height: 100vh但它的实际内容超过视口高度导致父容器高度被撑破但滚动范围没有扩展二是body或html上设置了overflow: hidden三是 Flex 布局中子元素没有设置min-height: 0导致内容溢出被裁剪。解决先打开 DevTools 的 Elements 面板点击body标签看 Computed 样式里有没有overflow相关的覆盖。如果是100vh的问题改成min-height: 100vh通常就解决了——min-height允许元素根据需要超过视口高度而height会被钉死。5.3 轮播图按钮点着点着就不动了现象轮播图前几次点击正常多点几次后点“上一张”或“下一张”没有反应或者图片切换错乱。原因索引越界。很多手写轮播没用取模运算currentIndex一直累加到slideCount之后就超出数组索引范围slides[currentIndex]变成undefined页面没有报错但也不动了。解决给索引变化加上取模或者边界判断就是我在 3.2 节里写的(currentIndex 1) % slideCount和(currentIndex - 1 slideCount) % slideCount。加号后面的slideCount是为了防止负数取模得到负值这个细节在答辩时主动讲出来是个明显的加分项。5.4 字体一会儿是宋体一会儿是黑体现象页面上有的字是常见的无衬线体有的字看起来像老式宋体整体不统一部分中文网站的字间距还很挤。原因没有在 CSS 里设置全局字体族浏览器在不同系统下会用默认字体渲染或者在不同元素上混用了字体。Windows 和 macOS 的中文字体渲染差异很大你在 Win 上定义的Microsoft YaHei到 Mac 上不存在浏览器会按自己的顺序降级。解决设置一个完整的字体栈body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; }-apple-system和BlinkMacSystemFont服务 macOS/iOS 用户“Microsoft YaHei”服务 Windows 用户最后的sans-serif作为兜底。这个字体栈在 Web 开发里是通用做法能覆盖绝大多数场景。5.5 演示现场网络断了页面变成“裸体”样式现象演示时页面内容还在但所有 CSS 样式都没有了只有纯文字堆在页面上图片可能也不显示。原因link标签里的href指向的是一个在线 CDN 地址比如用了某些在线图标库或者在线字体库。教室或答辩现场的网络环境不稳定时CDN 资源加载失败样式表就没拉下来。解决作业级别尽量把用到的框架和库文件下载到本地。如果你的项目非要引入 Bootstrap 或 Animate.css提前把文件保存到css/和js/目录下改用相对路径引用link relstylesheet hrefcss/bootstrap.min.css script srcjs/animate.min.js/script如果实在需要在线资源准备一个离线备用方案——把页面的关键布局在本地样式表里写一份基础版CDN 挂了也不会彻底“裸奔”。6. 答辩前的自测清单一个下午跑完这 6 项再上场网页设计期末作业带演示演示环节的成败往往在答辩前 48 小时就决定了。我给自己带的学生设计过一套自测清单你在自己的项目上也应该走一遍。第一步把项目文件夹复制到另一个磁盘目录再打开一次页面确认图片、样式、脚本全部正常——这能拦截掉绝大多数路径问题。第二步开隐私模式窗口重新加载页面。隐私模式不保留缓存能模拟老师电脑上第一次访问的真实状态很多“我这边是好的”问题其实是缓存造成的假象。第三步用键盘从头到尾把页面交互全部点一遍。轮播的上一张下一张、表单的空提交、错误提示的展示、成功提示的消失每一条都按顺序操作。第四步把浏览器窗口从宽屏拉到窄屏再拉到超宽屏看布局有没有错位、横向滚动条有没有出现。横向滚动条是答辩时非常刺眼的瑕疵原因通常是某个img或div设了固定像素宽度在窄屏下溢出。第五步打开控制台确认没有报错。如果 Console 有警告逐条看清是什么不是所有警告都致命但红色报错一个都不能留。第六步预演一遍你的讲解词——每展示一个页面准备两句话说明设计意图比如“这里我用 Flex 布局做了导航栏滚动时它会固定在顶部”就比“这是一个导航栏”强得多。最后说一个我自己的教训。有一年带的学生做的作业特别用心动效、配色、内容都很完整但他演示时用的是一个带学生优惠的公共 Wi-Fi现场加载在线字体库直接超时页面整体偏了一个像素。他自己在笔记本上看不出差异投影仪放大后右边多出一条 1 像素的白色缝隙被老师逮住问了十分钟。从那以后我所有的作业项目都坚持本地化资源不依赖任何外部 CDN。这个习惯到现在还留着。网页设计期末作业的本质不是炫技是用最可靠的方式把你学过的东西证明给老师看——能把每个细节都控制在自己手里的人才是这门课真正想培养的。希望帮到你。本文还有配套的精品资源点击获取