简介这是面向网页设计课程作业与期末项目考核的一套个人博客风格源码包帮助初学前端或非计算机专业的学生理解网页构成与设计流程。站点包含首页、信息页、列表页与关于页四个页面基于HTML结构化标记、CSS样式表与Div盒模型布局实现从页面骨架到模块样式再到脚本交互链条完整适合直接对照修改。压缩包共53个文件、整体大小45.44MB文件构成上以19张jpg图片、5个css样式表、6个js脚本和4个html页面为主体图片素材覆盖页面视觉元素css拆分管理不同模块样式js实现滚动动画、吸顶与菜单等交互另附演示入口可在线预览页面实际渲染效果。目前已有7366人学习下载。四个HTML页面分别承担首页展示、信息承载、内容列表与个人介绍功能信息架构清晰base.css、info.css等分模块样式文件便于理解类命名与布局组织方式适合逐一拆解代码既能完成课程作业也能积累真实个人博客项目的设计与开发经验。1. 网页设计期末作业一份能直接复现的完整项目与演示网页设计作业是每学期末最磨人的一关——老师要的不是你用了多少框架而是页面结构清不清晰、CSS 布局稳不稳、交互逻辑能不能跑通。我见过太多同学把大把时间耗在调一个轮播图上结果交上去连页面滚动都卡。这篇笔记拆的是一份「带演示」的网页设计期末作业项目HTML5 CSS3 原生 JavaScript 完成不依赖任何框架和构建工具浏览器打开即用。它覆盖了个人主页、响应式导航、卡片式内容区、表单验证和简单的本地存储交互正好对应课程大纲里那几个必考模块。新手能照着一行行敲下来熟手可以直接拿它的页面骨架改出自己的主题配色和内容区。2. 拆解作业评分逻辑先搞懂老师按什么给分再动手写代码2.1 一份期末作业的典型评分构成网页设计课期末作业的评分表不同学校略有差异但核心维度基本是这几块页面数量与结构完整性、HTML 标签语义化程度、CSS 样式与布局实现方式、JavaScript 交互功能以及最后的现场演示效果。注意这里特意列了「布局实现方式」而不是「布局效果」——因为很多老师会问你是用 Flex 还是 Grid用浮动还是定位如果你说“我是用 Dreamweaver 拖出来的”那这题基本就凉了。把评分构成拆开看我一般建议按下面这个权重分配精力评分项权重参考需要交付的内容页面结构与数量20%至少 3 个互相跳转的页面或单页多区块HTML 语义化15%header、nav、main、section、footer 等标签用对CSS 布局与响应式30%Flex/Grid 布局、媒体查询、自适应断点JavaScript 功能25%表单验证、交互事件、数据渲染演示与答辩10%打开页面、操作流程顺畅不出低级错误为什么把 JS 的权重定得这么高因为课程后半学期的重点就在 DOM 操作和事件处理上。作业里哪怕只有一个「点击按钮切换主题色」的功能也比五个静态页面积分来得快。但前提是——这个功能必须能跑不能是贴了代码自己都不明白的「黑匣子」。2.2 选型为什么用纯 HTML/CSS/JS 而不是 Vue 或 Bootstrap如果你问上过这门课的学长十有八九会劝你别用框架。原因很现实期末作业的答辩环节老师会随机指一个页面区块问“这个效果是怎么实现的”。你答「Vue 的 v-for 渲染的」老师再问“那 v-for 的 key 为什么不能用 index”多数人就卡住了。用原生三件套每个效果对应哪几行代码自己心里是有数的。这份项目选的也是纯原生方案。CSS 布局用的是 Flex 和 Grid 混排——导航栏和卡片列表用 Flex整体页面大骨架用 Grid。响应式断点只设了两个一个 768px 的平板断点一个 480px 的手机断点。JavaScript 部分也没上任何库原生querySelector、addEventListener、localStorage三件套打底。这样的好处是项目文件放到 U 盘里换任何一台电脑只要浏览器是 Chrome 或 Edge双击 index.html 就能跑。2.3 文件组织方式一个文件夹该放什么期末作业的文件组织直接影响到老师打开你项目时的第一印象。我见过有人把所有图片和页面全堆在根目录文件名还是新建文档(2).html这种印象分基本就没了。这份项目的文件结构是这样的web-final-project/ ├── index.html # 首页 ├── about.html # 关于页面 ├── portfolio.html # 作品集页面 ├── css/ │ ├── style.css # 全局样式 │ └── responsive.css # 响应式断点样式 ├── js/ │ ├── main.js # 全局交互导航、主题切换 │ └── form.js # 表单验证与本地存储 ├── images/ │ ├── hero-bg.jpg # 首屏背景图 │ └── portfolio-1.jpg ~ portfolio-6.jpg # 作品占位图 └── README.txt # 项目说明与运行方式这里有个小细节单独拆一个responsive.css而不是把媒体查询写在 style.css 底部。原因很实际——答辩时老师问「你的响应式在哪实现的」你可以直接翻到这一个文件里讲比在几百行样式里来回翻要省事得多。而且单独文件也方便检查断点之间的覆盖关系。3. 从零搭一套页面骨架首页结构与导航的完整实现3.1 首页的 HTML 结构语义化标签怎么排首页是整个作业的门面结构合理性大于视觉效果。我们先把index.html的头部和主体骨架搭出来。注意看每个标签的嵌套关系以及class的命名方式——类名统一用main-container、card-grid这种描述性名称不要用box1、div2。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人主页 - 网页设计期末作业/title link relstylesheet hrefcss/style.css link relstylesheet hrefcss/responsive.css /head body header classsite-header nav classmain-nav div classlogo a hrefindex.htmlMySite/a /div ul classnav-links lia hrefindex.html classactive首页/a/li lia hrefabout.html关于我/a/li lia hrefportfolio.html作品集/a/li lia hrefindex.html#contact联系我/a/li /ul button classnav-toggle idnavToggle typebutton span classtoggle-bar/span span classtoggle-bar/span span classtoggle-bar/span /button /nav /header main section classhero idhome div classhero-content h1你好我是前端学习者/h1 p这是基于 HTML5 CSS3 JavaScript 制作的期末作业项目/p a hrefportfolio.html classbtn-primary查看我的作品/a /div /section section classfeatures idfeatures h2本站包含的模块/h2 div classcard-grid article classcard h3响应式导航/h3 p移动端通过按钮切换菜单展开与收起/p /article article classcard h3表单验证/h3 p原生 JavaScript 实现必填项与格式校验/p /article article classcard h3本地存储/h3 plocalStorage 保存用户访问记录/p /article /div /section /main footer classsite-footer pcopy; 2024 网页设计期末作业项目/p /footer script srcjs/main.js/script /body /html这段结构里的几个关键点header内只放导航main里是英雄区hero和特性卡片区featuresfooter放版权信息。HTML5 的语义化标签不仅是为了让老师看到你会用更重要的是让页面结构在没有 CSS 的时候依然可读——这也在评分表里。nav里的四个链接中「联系我」指向的是index.html#contact这是锚点定位跳转到本页的联系表单区块。这个写法帮助很大——你不需要单独做一个联系页面一个锚点就能让结构多一个层级。3.2 移动端导航汉堡按钮的 JavaScript 实现桌面端导航是横排的到移动端得折叠成汉堡菜单。这部分的 JavaScript 逻辑很简单但有一个容易踩的坑菜单展开后点击空白区域不会自动收起。这份项目的处理是监听按钮点击来切换active类同时通过addEventListener监听resize事件在窗口变宽时强制移除折叠状态。// js/main.js document.addEventListener(DOMContentLoaded, function () { const navToggle document.getElementById(navToggle); const navLinks document.querySelector(.nav-links); // 汉堡按钮点击切换菜单展开/收起 navToggle.addEventListener(click, function () { navLinks.classList.toggle(nav-links-open); navToggle.classList.toggle(toggle-active); }); // 点击导航链接后自动收起菜单移动端体验优化 navLinks.querySelectorAll(a).forEach(function (link) { link.addEventListener(click, function () { navLinks.classList.remove(nav-links-open); navToggle.classList.remove(toggle-active); }); }); });这段代码的事件绑定思路是navToggle按钮负责切换样式类navLinks的展开状态由nav-links-open类来控制。之所以不直接改display属性是因为我们想保留过度动画——在 CSS 里给.nav-links设置了max-height的过渡。第二段 forEach 循环是细节优化移动端点完链接后菜单能自动收起不然每次跳完回来看屏幕都被菜单盖住演示时非常尴尬。4. CSS 布局与响应式Flex、Grid 和媒体查询的配合实战4.1 全局样式与 CSS 变量让换配色变成改一行代码很多同学写 CSS 喜欢把颜色写死在每个选择器里比如.card { background: #f7f7f7; }。这样一旦答辩时老师问「把主色调成暗色系要改几个地方」你就得一个个翻。更好的做法是用 CSS 变量统一管颜色这份项目在style.css开头定义了全套视觉变量/* css/style.css */ :root { --primary-color: #2563eb; /* 主色用于按钮、导航高亮 */ --secondary-color: #f59e0b; /* 辅助色用于强调标签 */ --bg-light: #f8fafc; /* 浅色背景 */ --bg-dark: #0f172a; /* 深色背景页脚和移动端菜单 */ --text-main: #1e293b; /* 正文文字颜色 */ --text-muted: #64748b; /* 次要文字颜色 */ --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --border-radius: 12px; --nav-height: 64px; --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; color: var(--text-main); background: var(--bg-light); line-height: 1.7; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; }CSS 变量的好处不是让你少写几行代码而是让全局风格统一到一个入口里。后面做暗色模式也好小组作业换成员配色也好改:root里的变量就行。box-sizing: border-box是必须加的不加的话子元素的width: 100%加上padding会把父容器撑破这是新手最容易翻车的一个点。4.2 卡片区域用 Grid导航栏用 Flex两种布局的分工布局部分最核心的决策是搞清楚什么场景用 Flex什么场景用 Grid。这份项目里的.card-grid是典型的网格布局——三张卡片等宽排列换行时保持对齐Grid 的repeat(auto-fit, minmax())配合媒体查询非常顺手。而.main-nav里的 logo 和菜单链接需要一个水平排列的弹性容器Flex 更合适。先看卡片区的 Grid 写法/* css/style.css */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; padding: 20px 0; } .card { background: #ffffff; border-radius: var(--border-radius); box-shadow: var(--card-shadow); padding: 28px; transition: transform var(--transition-speed), box-shadow var(--transition-speed); } .card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))这一行是精髓minmax(240px, 1fr)表示每个卡片最小 240px 宽空间足够时均分剩余宽度auto-fit则是在容器宽度不足以放下更多卡片时自动换行。也就是说——你没有写一行媒体查询Grid 自己就把响应式做了。这是一个非常值得在答辩时展示的细节。再看导航栏的 Flex/* css/style.css */ .main-nav { display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); padding: 0 24px; background: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); position: sticky; top: 0; z-index: 100; } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { font-size: 15px; font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color var(--transition-speed), color var(--transition-speed); } .nav-links a:hover, .nav-links a.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }position: sticky让导航栏吸顶这是比fixed更优雅的方案——fixed会让导航脱离文档流页面顶部内容会被遮挡一截sticky不会。需要注意的是sticky 生效的前提是父容器高度大于导航栏自身高度且父容器没有设overflow: hidden否则吸顶会失效。这是布局黑盒里最常见的一个坑。4.3 响应式断点媒体查询里的层叠顺序问题这份项目的responsive.css单独管理断点样式。移动端的核心切换逻辑在max-width: 768px断点内把导航菜单从横排变成下拉展开/* css/responsive.css */ media (max-width: 768px) { .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; } .toggle-bar { width: 24px; height: 2px; background: var(--text-main); transition: transform var(--transition-speed), opacity var(--transition-speed); } .nav-links { position: absolute; top: var(--nav-height); left: 0; right: 0; flex-direction: column; background: var(--bg-dark); padding: 16px 24px; max-height: 0; overflow: hidden; transition: max-height var(--transition-speed) ease-in; } .nav-links.nav-links-open { max-height: 320px; } .nav-links a { color: #e2e8f0; display: block; padding: 12px 0; } }媒体查询的层叠顺序必须注意如果这段代码写在style.css前面会被后面的样式覆盖掉。所以建议要么把responsive.css放在各页面head里的最后要么在 CSS 文件内部把媒体查询放到文件末尾——原因是媒体查询本身并不增加特异性它靠的是「后出现的规则胜出」。另外这里用了max-height: 0到max-height: 320px的过渡——过渡只能作用在数值型属性上用display: none到display: block是不会有动画的。5. JavaScript 交互与表单验证从能跑到不翻车的完整闭环5.1 表单验证正则、防早提交、错误提示联动作业页面里的联系表单是最容易被老师挑刺的模块。最常见的翻车是用户没填手机号点击提交按钮后没有任何反应老师以为功能坏了。这份项目的表单校验做了三件事失去焦点时即时校验、提交时整体校验、错误提示用span标签动态插入。先看 HTML 结构里有对应错误提示位置的写法form idcontactForm novalidate div classform-group label forname姓名/label input typetext idname namename required placeholder请输入姓名 span classerror-message idnameError/span /div div classform-group label foremail邮箱/label input typeemail idemail nameemail required placeholder请输入邮箱 span classerror-message idemailError/span /div div classform-group label forphone手机号/label input typetel idphone namephone required placeholder请输入11位手机号 span classerror-message idphoneError/span /div div classform-group label formessage留言内容/label textarea idmessage namemessage rows4 required placeholder请输入留言内容/textarea span classerror-message idmessageError/span /div button typesubmit classbtn-primary idsubmitBtn提交留言/button /formnovalidate属性很关键——它告诉浏览器「不要用默认的 HTML5 提示气泡让我自己控制校验反馈」。默认气泡在不同浏览器里长不一样而且一旦出现你自己的错误提示逻辑就被绕过了。对应的 JavaScript 校验逻辑// js/form.js document.addEventListener(DOMContentLoaded, function () { const form document.getElementById(contactForm); const submitBtn document.getElementById(submitBtn); // 正则规则定义 const validators { name: function (value) { return value.trim().length 2 ? : 姓名至少需要2个字符; }, email: function (value) { const emailRegex /^[a-zA-Z0-9._%-][a-zA-Z0-9.-]\.[a-zA-Z]{2,}$/; return emailRegex.test(value.trim()) ? : 请输入正确的邮箱格式; }, phone: function (value) { const phoneRegex /^1[3-9]\d{9}$/; return phoneRegex.test(value.trim()) ? : 请输入正确的11位手机号; }, message: function (value) { return value.trim().length 5 ? : 留言内容至少需要5个字符; } }; // 校验单个字段并更新错误提示 function validateField(field) { const id field.id; const errorSpan document.getElementById(id Error); const errorMsg validators[id](field.value); errorSpan.textContent errorMsg; field.classList.toggle(input-error, Boolean(errorMsg)); return errorMsg ; } // 每个输入框失焦时单独校验 form.querySelectorAll(input, textarea).forEach(function (field) { field.addEventListener(blur, function () { validateField(field); }); }); // 提交按钮点击时先校验再决定是否放行 submitBtn.addEventListener(click, function (e) { e.preventDefault(); let allValid true; form.querySelectorAll(input, textarea).forEach(function (field) { const isValid validateField(field); if (!isValid) { allValid false; } }); if (allValid) { // localStorage 存储提交记录 const records JSON.parse(localStorage.getItem(contactRecords) || []); const newRecord { name: document.getElementById(name).value.trim(), email: document.getElementById(email).value.trim(), phone: document.getElementById(phone).value.trim(), message: document.getElementById(message).value.trim(), time: new Date().toLocaleString() }; records.push(newRecord); localStorage.setItem(contactRecords, JSON.stringify(records)); form.reset(); alert(提交成功\n你的留言已保存在本地浏览器中。); } else { const firstError form.querySelector(.input-error); if (firstError) { firstError.focus(); } } }); });这段代码的三个处理习惯值得说明一是提交按钮用的是click事件而不是submit事件配合e.preventDefault()拦截默认提交行为这样所有逻辑都在自己的控制流里走二是每条校验规则是一个纯函数输入值和正则返回空字符串或错误信息方便后续加新字段时复制粘贴三是把提交记录写入localStorage——这个设计让「表单提交」升级成了「数据持久化」答辩时可以说你的页面能保存用户留言记录刷新后还在用localStorage.getItem再渲染出来。5.2 localStorage 的应用保存主题偏好与访问记录表单里已经把数据写进了 localStorage这个能力还能再延伸一下。比如做一个「记住我的主题选择」——用户点了暗色模式切换按钮刷新页面后依然是暗色。实现思路是在main.js里加一段主题切换逻辑// js/main.js 追加 const themeToggleBtn document.getElementById(themeToggle) || null; if (themeToggleBtn) { // 初始化时读取本地存储中的主题 const savedTheme localStorage.getItem(siteTheme); if (savedTheme dark) { document.body.classList.add(dark-theme); } themeToggleBtn.addEventListener(click, function () { document.body.classList.toggle(dark-theme); const currentTheme document.body.classList.contains(dark-theme) ? dark : light; localStorage.setItem(siteTheme, currentTheme); }); }注意document.getElementById(themeToggle) || null的写法——如果某个页面没有这个按钮脚本不会因为拿不到元素而报错中断。这个习惯在多个页面共用一个 JS 文件时尤其重要。之前有人就是因为about.html里没有navToggle元素整个main.js直接抛异常后面的代码全部不执行。5.3 演示时最常见的 JS 翻车点表单和 localStorage 的逻辑跑通之后演示环节真正的风险反而不是功能本身而是环境问题。最常见的三种翻车一是直接双击打开index.html地址栏是file:///C:/...这种情况下 localStorage 在某些浏览器版本里是可用但隔离的但如果 HTML 里有跨文件请求比如分别用file://打开不同页面各页面之间的 localStorage 共享可能出问题二是浏览器缓存了旧版 JS改完代码刷新还是不生效三是控制台有红字报错但你没打开控制台看演示到一半才发现。解决办法是演示前强制刷新Ctrl Shift R并且提前打开 F12 控制台看一眼有没有报错。这个「检查控制台」的习惯能救回大部分现场翻车。6. 避坑与常见问题网页设计作业的五个高频雷区6.1 图片路径写错导致页面破版现象本地打开时所有图片正常显示把文件夹拷到 U 盘拿到别的电脑上演示图片全部裂了。原因图片路径写了绝对路径比如img srcC:\Users\张三\Desktop\images\hero.jpg或者用了file:///开头的路径。换一台电脑路径就失效了。解决所有资源一律用相对路径。同一个项目文件夹里index.html引用images/hero.jpg时直接写images/hero.jpg页面在sub子目录里则写../images/hero.jpg。拷文件夹时连同整个项目目录一起拷不要只拷 html 文件。6.2 CSS 里position: sticky吸顶失效现象导航栏原本应该吸在顶部滚动页面时却跟着内容滚走了。原因sticky的生效条件是父容器的高度大于导航栏高度且祖先元素没有设置overflow: hidden或overflow: auto。很多模板在body或外层容器上加overflow-x: hidden来隐藏横向滚动条这个操作会让sticky直接失效。解决检查父容器和body的overflow属性。如果要隐藏横向溢出把overflow-x: hidden加在body上但不要在父容器上重复设置实在不行改用position: fixed配合body的padding-top补偿导航栏高度。6.3 移动端菜单点不开或点开后关不掉现象手机模拟器里点汉堡按钮菜单没有反应或者菜单展开后点击菜单外面的区域无法收起。原因按钮的click事件没绑上常见原因是navToggle元素不存在时 JS 报错阻断后续代码或者 CSS 里.nav-links的max-height设置成了0内容被overflow: hidden裁掉但 JS 里加的nav-links-open类在选择器优先级上被别的规则覆盖了。解决先在 Console 里执行document.getElementById(navToggle)看返回的是元素还是null。如果是null检查 HTML 里的id是否和 JS 里一致。优先级问题则用选择器ul.nav-links.nav-links-open明确指定。6.4 表单提交后页面刷新导致数据丢失现象点提交按钮后页面闪了一下输入的内容全没了localStorage 里也没有记录。原因点击按钮的默认行为触发了表单原生提交整个页面重新加载了。你虽然加了e.preventDefault()但可能写在了submit事件上而按钮是typesubmit之外的问题——实际上更常见的是按钮没有加typebutton属性或者监听的事件写在了form的submit上但没阻止成功。解决在form上加submit事件监听并e.preventDefault()按钮保持typesubmit或者直接给按钮加typebutton用click事件处理。两种方案二选一不要混用。我的习惯是用click事件加typebutton这样控制流最简单。6.5 演示时临时改代码现场乱了阵脚现象演示前老师说“把这个按钮颜色改成红色看看”你打开 CSS 找到.btn-primary改了background属性结果页面没有任何变化。原因浏览器缓存了旧的 CSS 文件。有的场景下老师网速、或你用的是学校机房的旧浏览器对 CSS 文件有强缓存不刷新不生效。解决改代码后按Ctrl Shift R强制刷新清除缓存刷新或者干脆到 CSS 文件路径后面加一个版本号参数link relstylesheet hrefcss/style.css?v2。加版本号参数的方式在期末答辩场景里更稳妥改一次加一次v2、v3能保证每次拿到的都是最新样式。7. 演示提分技巧答辩前花 20 分钟过一遍这四步演示环节不是把页面点开就完事了老师在这几分钟里看的是你的熟练度和对代码的理解。我自己的习惯是答辩前必做四件事每一件都用不了几分钟但能挡住大部分意外。第一件事打开 Chrome 的无痕窗口。无痕窗口默认不带任何缓存和插件干扰F12 控制台如果是干净的基本能排除「浏览器环境问题」这个变量。直接在无痕窗口里打开index.html这能避开旧缓存导致的样式错乱。第二件事过一遍导航的所有跳转。从首页点到关于页再从关于页点到作品集页每个链接都点一次确认没有 404。尤其要注意锚点跳转——index.html#contact这种链接如果页面里没有idcontact的元素点下去页面不会有任何反应老师会以为导航坏了。第三件事把窗口从宽拉到窄展示响应式过程。按住窗口边缘慢慢拖窄让老师看到导航栏从横排变成汉堡按钮、卡片从三列变成一列的连续过程。这一步是视觉冲击力最强的演示但前提是你自己先拖了一遍确认断点在 768px 处切换顺畅没有中间态样式错乱。第四件事现场演示改一个「主题色变量」。打开style.css的:root部分把--primary-color: #2563eb改成--primary-color: #dc2626红色保存后刷新。整个页面的按钮、高亮、导航下划线全部变成红色。这是一个演示「CSS 变量威力」的绝佳动作——老师会直观看到你不是在硬编码颜色而是有一个统一的设计系统。这个动作在答辩环节能拿到的印象分比多做一个轮播图高得多。另外确认一下localStorage的演示路径先填表单提交一条留言然后 F5 刷新页面再点开控制台执行// 在 Console 面板中执行查看已保存的留言记录 const records JSON.parse(localStorage.getItem(contactRecords) || []); console.log(records);执行后能看到刚才提交的记录数组包含姓名、邮箱、手机号和提交时间。这样老师在看到「表单提交成功」之外还会看到你额外实现了数据持久化。从那以后我每次交网页设计作业前都强制走一遍这套演示流程——无痕窗口、导航全点、窗口拉窄、改 CSS 变量。这四步做完现场翻车的概率至少降一半。希望帮到你。本文还有配套的精品资源点击获取