简介：这份资源面向正在准备网页设计期末大作业的大学生及HTML初学者，提供多套可直接参考的静态个人网页与个人博客模板，帮助解决作业数量多、无从下手、找不到合适模板等常见困扰。压缩包共收录4261个文件，整体约142.4MB，其中html页面243个、css样式411个、js脚本481个，构成div+css基础框架，另含jpg、png、gif等图片素材及scss、less预编译文件、woff与ttf字体、docx说明文档等，覆盖页面结构、样式布局与交互脚本的完整组成。资源已有22943人学习下载，热度较高。读者可从中获取多套符合学校期末作业水平的成品页面，借鉴导航栏、轮播、响应式布局等模块的写法，对照源码理解HTML+CSS+JS的配合方式，并借助现成素材快速完成个人网站或博客作品，适合作为课程作业参考与入门练手素材。
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、footer），CSS 用 Flexbox 做布局、少量 Grid 做卡片排列，JavaScript 用原生 ES6 语法，不引入 jQuery。字体用系统默认字体栈，图标可以用内联 SVG 或者简单的 CSS 图形，避免依赖外部 CDN——答辩教室的网络你永远不知道是什么情况。
提示：如果老师明确要求「必须用某个框架」，那另当别论。但绝大多数「网页制作」「网页设计」类课程，纯静态方案都是最稳的选择。
3. 总体架构设计：四个页面与三层样式的组织方式
3.1 页面结构：共享骨架 + 独立内容
多页面静态站最容易犯的错，是每个页面各写各的导航和页脚，改一个地方要改四遍。正确的做法是「共享骨架 + 独立内容」——每个 HTML 文件的头部导航和底部页脚代码完全一致，中间的内容区域各自不同。虽然静态页面没法像模板引擎那样 include，但你可以通过统一的 class 命名和 CSS 来保证视觉一致。
页面骨架大致是这样：
<!-- 所有页面共用的结构骨架 --> <body> <header class="site-header"> <div class="container"> <a href="index.html" class="logo">我的主页</a> <nav class="main-nav"> <ul> <li><a href="index.html" class="active">首页</a></li> <li><a href="blog.html">博客</a></li> <li><a href="works.html">作品</a></li> <li><a href="contact.html">联系</a></li> </ul> </nav> </div> </header> <main class="site-main"> <!-- 每个页面在这里写自己的内容 --> </main> <footer class="site-footer"> <div class="container"> <p>© 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[type="email"]').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 class="site-main"> <section class="hero"> <div class="container"> <h1 class="hero-title">你好，我是 A 同学</h1> <p class="hero-desc">前端方向在读，专注网页设计与交互实现</p> <a href="works.html" class="btn btn-primary">查看我的作品</a> </div> </section> <section class="skills"> <div class="container"> <h2>技能标签</h2> <ul class="tag-list"> <li class="tag">HTML5</li> <li class="tag">CSS3</li> <li class="tag">JavaScript</li> <li class="tag">响应式布局</li> </ul> </div> </section> </main>.hero区块用大标题加一句描述加一个按钮，这是标准的 landing 结构。.tag-list用 Flexbox 横向排列，每个.tag加个浅色背景和圆角。这里的关键是h1全站只出现一次，放在首页，其他页面用h2起步，这是语义化评分点。
4.2 博客列表：卡片布局与日期格式化
博客页不需要真的写文章详情，列出一组文章卡片就行。每张卡片包含标题、摘要、日期。日期建议用<time>标签，datetime属性写标准格式，显示文本写中文格式，这是细节加分项。
<section class="post-list"> <div class="container"> <article class="card post-card"> <h3 class="post-title"> <a href="#">我的第一个网页作品复盘</a> </h3> <p class="post-excerpt">记录了从零开始搭建个人主页的过程……</p> <time class="post-date" datetime="2025-03-15">2025 年 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 href="C:/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 charset="UTF-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」的时候，这句话就是标准答案。不要支支吾吾说「不太会」，要说「这是有意的技术选型」。
从那以后我每次交这类作业前，都会强制走一遍「换机测试 + 验收清单演示」的流程，再也没在答辩现场翻过车。希望这套结构和清单能帮到你，把这份个人网页作业稳稳交出去。
本文还有配套的精品资源，点击获取
