简介这份资源面向正在准备网页设计期末大作业的大学生及HTML初学者提供多套可直接参考的静态个人网页与个人博客模板帮助解决作业数量多、无从下手、找不到合适模板等常见困扰。压缩包共收录4261个文件整体约142.4MB其中html页面243个、css样式411个、js脚本481个构成divcss基础框架另含jpg、png、gif等图片素材及scss、less预编译文件、woff与ttf字体、docx说明文档等覆盖页面结构、样式布局与交互脚本的完整组成。资源已有22943人学习下载热度较高。读者可从中获取多套符合学校期末作业水平的成品页面借鉴导航栏、轮播、响应式布局等模块的写法对照源码理解HTMLCSSJS的配合方式并借助现成素材快速完成个人网站或博客作品适合作为课程作业参考与入门练手素材。1. 从一份期末大作业说起个人静态网页到底该做成什么样每年到了期末总有一批同学被同一件事卡住老师要求交一份「个人网页设计」作品可以是个人主页、个人博客或者作品集技术栈限定在 HTML/CSS/JavaScript 这类前端基础范围内不能上框架不能调后端接口最后还要能直接双击打开看到效果。听起来不难但真正动手时问题就来了——页面结构怎么划分、导航怎么跳转、样式怎么组织、交上去之后老师从哪几个维度打分这些没人系统讲过。这份「个人网页制作」方案就是冲着这个场景来的。它是一套纯静态的 HTML 个人网站模板覆盖个人主页、个人博客、作品展示、联系方式几个典型页面适合大学生做期末大作业、课程设计也适合刚入门前端想拿一个完整作品练手的人。整套东西不依赖任何构建工具浏览器直接打开就能跑改起来门槛低但结构上又留了足够的扩展空间不至于交完作业就扔。我见过太多同学把这类作业做成「一页到底」的堆砌所有内容塞进一个 index.html样式全写在标签的 style 属性里图片和文字混在一起最后自己都改不动。所以这套方案的第一原则是——先立结构再谈样式最后才是细节。下面按需求、设计、实现、验收的顺序把整套东西拆开讲清楚。2. 需求拆解与技术选型为什么是纯静态三件套2.1 先明确这份作业要交付什么在动手写第一行代码之前得先把「交付物」定义清楚。个人网页设计这类作业通常的验收标准是三条能在浏览器正常打开、页面之间有跳转关系、视觉上像那么回事。但如果你只按这三条做大概率拿个及格分。真正拉开差距的是结构清晰度和可维护性——老师翻你的代码时能不能一眼看出哪块是导航、哪块是内容、哪块是页脚。所以我把需求拆成四层第一层是内容层要有个人简介、技能或经历、作品或文章列表、联系方式这是「个人网页」的基本盘。第二层是导航层至少三个页面之间能互相跳转导航栏在每个页面保持一致。第三层是样式层用外部 CSS 文件统一管理不写行内样式。第四层是交互层用少量 JavaScript 做导航高亮、返回顶部、简单的表单校验这类轻交互证明你懂 JS 但不炫技。这四层对应到文件结构上就是典型的「多页面 共享资源」模式。下面这张表是我一般会先画出来的文件清单写代码之前先把这个定下来后面就不会乱。文件/目录作用是否必需index.html首页/个人主页必需blog.html博客或文章列表页必需works.html作品/项目展示页建议有contact.html联系方式页建议有css/style.css全站公共样式必需css/reset.css浏览器默认样式重置建议有js/main.js公共交互脚本必需images/图片资源目录必需2.2 技术选型为什么不上框架有同学会问现在都 2025 年了为什么不用 Vue 或者 React 做答案很直接这是「网页制作」课的大作业不是「前端框架」课。老师要看的是你对 HTML 语义化标签、CSS 盒模型、DOM 操作这些基本功的掌握上了框架反而会被问「这个组件是你写的还是框架给的」。纯静态三件套的好处是零依赖、零构建、零环境配置。你把文件夹拷到 U 盘里插到任何一台电脑上双击 index.html 就能看答辩现场不会因为 npm install 失败而翻车。这是血泪经验——我见过不止一个同学在答辩时因为网络问题装不上依赖最后只能干讲 PPT。具体版本上HTML 用 HTML5 语义标签header、nav、main、section、footerCSS 用 Flexbox 做布局、少量 Grid 做卡片排列JavaScript 用原生 ES6 语法不引入 jQuery。字体用系统默认字体栈图标可以用内联 SVG 或者简单的 CSS 图形避免依赖外部 CDN——答辩教室的网络你永远不知道是什么情况。提示如果老师明确要求「必须用某个框架」那另当别论。但绝大多数「网页制作」「网页设计」类课程纯静态方案都是最稳的选择。3. 总体架构设计四个页面与三层样式的组织方式3.1 页面结构共享骨架 独立内容多页面静态站最容易犯的错是每个页面各写各的导航和页脚改一个地方要改四遍。正确的做法是「共享骨架 独立内容」——每个 HTML 文件的头部导航和底部页脚代码完全一致中间的内容区域各自不同。虽然静态页面没法像模板引擎那样 include但你可以通过统一的 class 命名和 CSS 来保证视觉一致。页面骨架大致是这样!-- 所有页面共用的结构骨架 -- body header classsite-header div classcontainer a hrefindex.html classlogo我的主页/a nav classmain-nav ul lia hrefindex.html classactive首页/a/li lia hrefblog.html博客/a/li lia hrefworks.html作品/a/li lia hrefcontact.html联系/a/li /ul /nav /div /header main classsite-main !-- 每个页面在这里写自己的内容 -- /main footer classsite-footer div classcontainer pcopy; 2025 我的个人网站/p /div /footer /body这段骨架里.container是宽度约束容器.active类用来标记当前页.site-header、.site-main、.site-footer三个语义化类名把页面分成上中下三块。这样写的好处是CSS 里只要针对这三个类写布局所有页面自动统一。导航栏的.active类在每个页面手动加在对应的链接上这是最笨但最可靠的做法不需要 JS 也能工作。3.2 样式分层reset、layout、component 三层CSS 组织是很多同学忽略的地方。常见翻车现场是style.css 写了八百行改一个颜色要全局搜索替换改完发现影响了别的页面。我的习惯是把样式分成三层来写放在同一个文件里但用注释分隔清楚。第一层是 reset把浏览器默认的 margin、padding、box-sizing 统一掉。第二层是 layout只管大块布局——容器宽度、header 高度、footer 位置、栅格间距。第三层是 component管具体组件——按钮、卡片、表单、标签。三层从粗到细改布局不会误伤组件改组件不会动到布局。/* 第一层reset */ * { margin: 0; padding: 0; box-sizing: border-box; /* 让 padding 和 border 算进宽度避免布局溢出 */ } /* 第二层layout */ .container { max-width: 1100px; /* 内容最大宽度超过就居中 */ margin: 0 auto; /* 水平居中 */ padding: 0 20px; /* 小屏幕时留出边距 */ } .site-header { height: 64px; display: flex; align-items: center; border-bottom: 1px solid #eee; } /* 第三层component */ .card { border: 1px solid #e5e5e5; border-radius: 8px; padding: 20px; transition: box-shadow 0.2s; /* 悬停时阴影过渡提升交互感 */ } .card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }box-sizing: border-box这一行是必须的不写的话一个宽度 100% 再加 padding 的元素会撑破容器这是新手最常见的布局玄学问题。.container的max-width加margin: 0 auto是经典的居中方案比用绝对定位靠谱得多。.card的 hover 阴影过渡是低成本提升质感的手段答辩时老师鼠标划过卡片有反馈印象分会好一些。3.3 交互脚本只做三件事JavaScript 部分我建议控制在三件事以内导航当前页高亮如果不想手动加 active 类、返回顶部按钮、联系表单的简单校验。再多就超出「网页制作」课的合理范围了而且容易出 bug。// main.js —— 公共交互脚本 // 1. 返回顶部按钮滚动超过 300px 才显示 const backToTop document.querySelector(#backToTop); window.addEventListener(scroll, () { // 用 pageYOffset 兼容性比 scrollY 更好 if (window.pageYOffset 300) { backToTop.classList.add(show); } else { backToTop.classList.remove(show); } }); backToTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); // 平滑滚回顶部 }); // 2. 联系表单校验只做非空和邮箱格式检查 const form document.querySelector(#contactForm); if (form) { form.addEventListener(submit, (e) { e.preventDefault(); // 静态页面没有后端阻止默认提交 const email form.querySelector(input[typeemail]).value; const emailReg /^[^\s][^\s]\.[^\s]$/; // 简单邮箱正则 if (!emailReg.test(email)) { alert(请输入有效的邮箱地址); return; } alert(提交成功演示); }); }这段脚本里pageYOffset是老写法但兼容性最好scrollTo的behavior: smooth实现平滑滚动。表单校验只做前端演示因为静态页面没有后端e.preventDefault()阻止真实提交弹个提示框就够交作业了。注意if (form)这个判断——因为 main.js 是所有页面共用的contact.html 才有表单其他页面没有不加判断会报错。这是多页面共享脚本的经典坑。4. 核心模块实现首页、博客列表与作品展示的落地细节4.1 首页个人简介区的信息层级首页是老师打开的第一个页面信息层级必须清楚。我的做法是分三块顶部一句自我介绍大字号、中间技能标签区、底部精选作品或最新文章入口。不要一上来就放一大段文字没人看。main classsite-main section classhero div classcontainer h1 classhero-title你好我是 A 同学/h1 p classhero-desc前端方向在读专注网页设计与交互实现/p a hrefworks.html classbtn btn-primary查看我的作品/a /div /section section classskills div classcontainer h2技能标签/h2 ul classtag-list li classtagHTML5/li li classtagCSS3/li li classtagJavaScript/li li classtag响应式布局/li /ul /div /section /main.hero区块用大标题加一句描述加一个按钮这是标准的 landing 结构。.tag-list用 Flexbox 横向排列每个.tag加个浅色背景和圆角。这里的关键是h1全站只出现一次放在首页其他页面用h2起步这是语义化评分点。4.2 博客列表卡片布局与日期格式化博客页不需要真的写文章详情列出一组文章卡片就行。每张卡片包含标题、摘要、日期。日期建议用time标签datetime属性写标准格式显示文本写中文格式这是细节加分项。section classpost-list div classcontainer article classcard post-card h3 classpost-title a href#我的第一个网页作品复盘/a /h3 p classpost-excerpt记录了从零开始搭建个人主页的过程……/p time classpost-date datetime2025-03-152025 年 3 月 15 日/time /article !-- 更多卡片结构相同 -- /div /section卡片列表用 Grid 布局最省事两列或三列自适应.post-list .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; /* 卡片间距 */ }auto-fill加minmax(300px, 1fr)的意思是每列最小 300px能塞几列塞几列剩余空间平分。这样在大屏上是三列笔记本上是两列手机上自动变一列不用写媒体查询。这是响应式布局里性价比最高的一招。4.3 作品展示图片等比缩放与悬停效果作品页最容易翻车的地方是图片尺寸不统一导致卡片高度参差不齐。解决办法是给图片容器固定宽高比图片用object-fit: cover裁切填充。.work-card .thumb { width: 100%; aspect-ratio: 16 / 9; /* 固定 16:9 比例现代浏览器都支持 */ overflow: hidden; border-radius: 6px; } .work-card .thumb img { width: 100%; height: 100%; object-fit: cover; /* 裁切填充不变形 */ transition: transform 0.3s; } .work-card:hover .thumb img { transform: scale(1.05); /* 悬停轻微放大增加质感 */ }aspect-ratio是近几年才被广泛支持的属性如果担心兼容性可以用传统的 padding-top 百分比方案兜底。object-fit: cover保证图片填满容器且不变形这是处理不规则图片的标准做法。悬停放大用transform: scale而不是改宽高因为 transform 不触发重排性能更好。5. 避坑与常见问题排查那些答辩前才发现的坑5.1 路径问题本地能开拷到别人电脑就白屏现象在自己电脑上双击 index.html 一切正常拷给同学或者交到老师电脑上页面样式全丢图片不显示。原因用了绝对路径比如link hrefC:/Users/xxx/Desktop/site/css/style.css或者路径大小写不一致。Windows 不区分大小写但有些环境区分。解决所有资源引用一律用相对路径css/style.css、images/photo.jpg这种。文件名全用小写不要用中文和空格。交作业前把整个文件夹拷到另一个盘符下打开测试一遍。5.2 导航高亮错乱所有页面都亮同一个现象四个页面导航栏里「首页」永远是高亮状态点进博客页首页还是亮的。原因.active类写死在 index.html 的导航里复制到其他页面时忘了改。解决每个页面手动把.active移到对应链接上。如果嫌麻烦可以用 JS 根据当前 URL 自动判断但手动改四个文件也就一分钟的事比调试 JS 快。我一般会手动改因为可靠。5.3 中文乱码页面显示一堆问号现象打开页面中文全变成乱码或者方块。原因HTML 文件保存时用了 GBK 编码但没声明或者声明了 UTF-8 但文件实际是 GBK。解决在head第一行加meta charsetUTF-8同时确保编辑器保存时选的是 UTF-8 无 BOM 格式。VS Code 右下角可以看和改编码改完记得重新保存。5.4 移动端横向滚动条手机上能左右拖现象电脑上正常手机打开发现页面能左右拖动右边多出一截空白。原因某个元素宽度超过了视口常见的是固定宽度写太大或者图片没限制最大宽度。解决在 CSS 顶部加img { max-width: 100%; height: auto; }检查所有写死width: 1200px这类的地方改成max-width。调试时可以在浏览器控制台执行document.querySelectorAll(*)遍历找超宽元素或者临时加* { outline: 1px solid red; }看谁越界了。5.5 表单提交后页面刷新丢失内容现象点了提交按钮页面闪一下填的内容全没了。原因没有阻止表单默认提交行为静态页面没有后端接收浏览器就刷新了。解决在 submit 事件里第一行加e.preventDefault()。这个坑我在第 3 章的脚本里已经处理了但很多人抄代码时会把这一行漏掉然后纳闷为什么页面一直刷新。6. 验收与答辩怎么让老师一眼看到你的设计点验收这件事很多人以为是把文件交上去就完了。实际上老师翻你代码和看页面的时间可能只有三五分钟你得主动把设计点「喂」到他眼前。我的做法是准备一份简短的验收清单答辩时按顺序演示每个点对应一个具体操作。验收项演示操作对应评分点页面跳转依次点击四个导航链接站点完整性语义化标签打开开发者工具看 DOM 结构HTML 基本功样式分层展示 style.css 的注释分区CSS 组织能力响应式拖动窗口宽度看布局变化适配能力交互效果滚动看返回顶部按钮、悬停卡片JS 应用代码规范展示缩进、命名、注释工程素养演示的时候有个技巧不要一上来就讲代码先让老师看页面效果等他问「这个怎么做的」再翻代码。顺序反了的话老师对着代码看半天没看到效果印象分反而低。另外答辩前一定要做一次「冷启动测试」——把整个项目文件夹拷到 U 盘找一台没打开过你项目的电脑双击 index.html从头到尾点一遍。我见过太多人在自己电脑上一切正常换台机器就出问题。这个测试花不了五分钟但能救你一命。还有一个容易被忽略的点准备一句话说清楚你的设计取舍。比如「我选择纯静态多页面方案是因为课程要求考察 HTML/CSS 基本功上框架会掩盖这些能力」。老师问「为什么不用 Vue」的时候这句话就是标准答案。不要支支吾吾说「不太会」要说「这是有意的技术选型」。从那以后我每次交这类作业前都会强制走一遍「换机测试 验收清单演示」的流程再也没在答辩现场翻过车。希望这套结构和清单能帮到你把这份个人网页作业稳稳交出去。本文还有配套的精品资源点击获取