简介：这份资源面向正在准备网页设计期末大作业的大学生与网页制作初学者，提供多套可直接参考的静态个人网页、个人博客与网站模板，帮助解决作业数量多、无从下手、找不到合适模板等常见困扰。压缩包共4261个文件，约142.4MB，以jpg、png、gif等图片素材和js、css脚本样式为主，配合html页面、scss与less预编译样式、woff/ttf字体文件，以及docx说明文档，构成完整的div+css框架代码体系，页面画面精美，结构规范。目前已有22943人学习下载，热度较高。读者可从中获得多套符合学校期末作业水平的完整源码，覆盖个人主页、博客等常见题材，便于对照学习页面布局、样式组织与交互实现，也能按模块快速替换素材与文案，适合作为课程设计、期末考核的参考方案与练手素材。

1. 从一份“交作业级”静态网页说起：为什么它反而适合拿来练手

很多同学第一次做个人网页，都是被期末大作业逼出来的。打开编辑器，新建一个index.html，写两行标题，然后卡在“接下来该放什么”上。这份个人网站模板就是冲着这个场景来的：它是一套纯静态的 HTML 个人网页作品，包含首页、个人简介、博客列表、作品展示这几个典型页面，没有后端、没有数据库、不需要装任何环境，双击就能在浏览器里打开。适合谁？适合刚学完 HTML 和 CSS、想找一个结构完整又不至于看不懂的参考项目的人，也适合需要快速交一份个人网页设计作业、但不想从零搭骨架的人。它不炫技，但页面结构、样式组织、文件划分都是按真实项目习惯来的，拿来改比拿来抄更有价值。

2. 项目结构拆解：静态站点的目录怎么分才不乱

2.1 先看整体目录长什么样

拿到一份静态网页模板，第一件事不是急着改颜色，而是先看清楚它的目录划分。这套模板的典型结构大致是这样：

personal-site/ ├── index.html # 首页 ├── about.html # 个人简介页 ├── blog.html # 博客列表页 ├── works.html # 作品展示页 ├── css/ │ ├── reset.css # 浏览器默认样式重置 │ ├── style.css # 主样式文件 │ └── responsive.css # 响应式适配 ├── js/ │ └── main.js # 交互脚本 ├── images/ │ ├── avatar.jpg # 头像 │ └── works/ # 作品配图 └── fonts/ # 图标字体（可选）

这个划分方式很朴素，但符合静态站点的基本工程习惯：页面放根目录，样式按职责拆成三个文件，脚本单独一个目录，图片按用途再分子目录。很多同学把所有 CSS 塞进一个文件、所有图片堆在根目录，改到后面自己都找不到哪张图对应哪个页面。这套模板至少在目录层面给了你一个可以照着抄的答案。

2.2 页面之间的公共部分怎么处理

静态站点最烦的就是导航栏和页脚。四个页面，每个页面都复制一遍导航，改一个链接就要改四处，漏一处就出现“首页能跳、关于页跳不了”的玄学问题。这套模板的处理方式是：导航和页脚在每个 HTML 里各写一份，但结构完全一致，靠统一的 class 名来控制样式。

<!-- 每个页面顶部的导航结构，class 保持一致 --> <nav class="site-nav"> <div class="nav-inner"> <a href="index.html" class="logo">我的主页</a> <ul class="nav-list"> <li><a href="index.html" class="active">首页</a></li> <li><a href="about.html">关于我</a></li> <li><a href="blog.html">博客</a></li> <li><a href="works.html">作品</a></li> </ul> </div> </nav>

这里的关键点是class="active"这个标记。当前页面对应的导航项加上active，CSS 里就能给它单独上色或加下划线。你新增页面时，只要复制这段导航、把active挪到对应的<li>上就行。参数上唯一要注意的是href的路径：如果页面都在根目录，直接写文件名；如果以后把博客放进blog/子目录，路径就要改成../index.html，这是新手最容易翻车的地方。

2.3 样式文件的加载顺序有讲究

reset.css、style.css、responsive.css这三个文件的引入顺序不能乱：

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人主页</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> </head>

reset.css必须最先加载，它负责清掉浏览器默认的 margin、padding、列表样式，让后面写的样式有一个干净的起点。style.css是主体，负责桌面端的布局和配色。responsive.css放最后，里面用媒体查询覆盖前面的规则，实现手机端适配。如果你把responsive.css放到style.css前面，媒体查询里的样式会被后面的规则覆盖掉，手机上看起来就跟没适配一样。这个顺序问题我见过太多人踩，改了半天没效果，最后发现是 link 顺序写反了。

3. 核心页面实现：首页布局和博客列表怎么落地

3.1 首页的 Hero 区与卡片布局

首页通常分两大块：顶部一个 Hero 区放头像、名字和一句自我介绍，下面用卡片网格展示最新博客或作品。Hero 区的实现不复杂，但有几个细节决定了它好不好看：

<!-- 首页 Hero 区 --> <section class="hero"> <div class="hero-inner"> <img src="images/avatar.jpg" alt="头像" class="avatar"> <h1 class="hero-title">你好，我是 A 同学</h1> <p class="hero-desc">某高校计算机专业在读，喜欢前端和写点小工具。</p> <a href="about.html" class="btn">了解更多</a> </div> </section>

对应的 CSS 用 flex 做垂直居中：

.hero { display: flex; justify-content: center; align-items: center; min-height: 60vh; text-align: center; } .avatar { width: 120px; height: 120px; border-radius: 50%; /* 圆形头像 */ object-fit: cover; /* 防止图片变形 */ }

object-fit: cover这个属性值得单独说一句。头像图片如果不是正方形，不加这行就会被拉伸变形，脸变扁或者变长。加上之后，图片会按比例裁剪填满容器，视觉上正常很多。min-height: 60vh让 Hero 区至少占屏幕高度的 60%，这样在内容少的时候页面也不会显得空。

3.2 博客列表用 Grid 还是 Flex

博客列表页是典型的“一列卡片”布局。这套模板用的是 CSS Grid：

.blog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 40px 20px; }

repeat(auto-fill, minmax(300px, 1fr))这行的意思是：每列最小 300px，最大平分剩余空间，能放几列放几列。屏幕宽就三列，屏幕窄就两列，再窄就一列，不需要写一堆媒体查询。gap: 24px控制卡片之间的间距，比用 margin 一个个调要省事得多。如果你更习惯 Flex，也可以写成display: flex; flex-wrap: wrap;，但 Flex 在最后一行卡片数量不满时，对齐会有点别扭，Grid 在这方面更省心。

3.3 博客卡片的 HTML 结构

每张博客卡片的结构保持一致，方便批量复制：

<article class="blog-card"> <a href="blog-detail.html" class="card-link"> <img src="images/works/post1.jpg" alt="文章封面" class="card-cover"> <div class="card-body"> <h3 class="card-title">我的第一个前端项目复盘</h3> <p class="card-excerpt">记录一下做这个静态页面时踩过的坑……</p> <time class="card-date" datetime="2024-01-15">2024-01-15</time> </div> </a> </article>

这里用<article>而不是<div>，是因为博客卡片本身就是一篇独立的内容，语义上更合适。<time>标签的datetime属性写标准日期格式，浏览器和搜索引擎都能识别。卡片整体包在<a>里，点击任意位置都能跳转，比只让标题可点体验好。注意<a>里不能再套<a>，如果你卡片里还想放“”链接，就得把外层<a>换成<div>加 JS 跳转，这是 HTML 的硬性规则。

4. 避坑与常见问题：静态页面最容易翻车的几个点

4.1 图片路径大小写不一致，本地能开线上 404

现象：在自己电脑上双击 HTML 图片正常显示，传到服务器或者换台电脑就裂了。原因：Windows 文件系统不区分大小写，Avatar.jpg和avatar.jpg都能找到；但 Linux 服务器区分大小写，路径对不上就是 404。解决：统一图片命名规范，全部用小写字母加连字符，比如avatar.jpg、post-cover.png，并且在 HTML 里严格按实际文件名写。我一般会在项目根目录放一个images文件夹，所有图片名手打一遍，不靠复制粘贴，减少出错。

4.2 中文文件名导致乱码或无法访问

现象：图片叫我的头像.jpg，本地正常，部署后链接变成一串百分号编码，甚至直接打不开。原因：URL 对非 ASCII 字符的处理依赖服务器配置，不同环境表现不一致。解决：所有文件名、目录名一律用英文小写，中文只出现在页面内容里，不出现在文件路径里。这是血泪经验，改起来麻烦，不如一开始就避免。

4.3 忘记写 viewport，手机上字小得看不清

现象：电脑上排版正常，手机打开整个页面缩成一团，要双指放大才能看。原因：缺少<meta name="viewport" content="width=device-width, initial-scale=1.0">这行，浏览器默认按桌面宽度渲染再缩小。解决：每个 HTML 的<head>里都加上这行，一个都不能漏。加完之后，responsive.css里的媒体查询才会按预期生效。

4.4 导航 active 状态漏改，用户不知道自己在哪页

现象：从首页跳到关于页，导航栏还是“首页”高亮。原因：复制导航结构时忘了把active类挪到当前页对应的<li>上。解决：每新建一个页面，先复制导航，第一件事就是改active的位置，再写页面内容。可以给自己定个规矩：导航没改完，不写正文。

4.5 CSS 改了没生效，浏览器缓存背锅

现象：明明改了style.css，刷新页面还是旧样式。原因：浏览器缓存了旧的 CSS 文件。解决：开发阶段用Ctrl + F5强制刷新，或者在开发者工具里勾选“禁用缓存”。上线后如果遇到同样问题，可以在 link 后面加版本号，比如style.css?v=2，强制浏览器重新加载。这个不算 bug，但排查起来很浪费时间，知道原因就能少走弯路。

5. 二次开发与改造：把这套模板变成你自己的作品

5.1 换配色和字体，十分钟改头换面

这套模板的配色集中在style.css顶部的几个变量里（如果用了 CSS 变量的话），或者散落在各个选择器中。最省事的改法是先找到主色，全局替换。比如原来的主色是#3b82f6，你想换成绿色，把所有出现这个色值的地方替换成#10b981就行。字体方面，在body里改font-family，推荐用系统字体栈：

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }

这行代码的意思是：优先用苹果系统字体，其次 Windows 的 Segoe UI，中文优先苹方和微软雅黑，最后兜底无衬线字体。这样不用引入外部字体文件，加载快，各平台显示也都不差。

5.2 增加一个“项目详情页”的完整步骤

模板里作品展示页只有列表，没有详情页。想加一个详情页，按这几步走：

第一步，复制works.html，重命名为work-detail.html。第二步，把导航里的active挪到“作品”上。第三步，把原来的作品网格替换成详情内容结构：

<article class="work-detail"> <h1 class="detail-title">某图像处理 Demo</h1> <p class="detail-meta">技术栈：HTML / CSS / JavaScript</p> <img src="images/works/demo-cover.jpg" alt="项目截图" class="detail-cover"> <div class="detail-content"> <h2>项目背景</h2> <p>这是我在某课程里做的一个小工具……</p> <h2>核心功能</h2> <p>支持图片上传、滤镜切换、下载处理结果。</p> </div> </article>

第四步，回到works.html，把每张作品卡片的链接指向work-detail.html。第五步，在style.css里给.work-detail加上最大宽度和居中，保证长文本可读：

.work-detail { max-width: 800px; margin: 0 auto; padding: 40px 20px; line-height: 1.8; }

max-width: 800px是经验值，正文超过这个宽度，眼睛左右扫视会累。line-height: 1.8让行间距舒服一点，中文段落尤其需要。

5.3 用 JavaScript 给博客列表加个筛选

如果博客文章多了，可以加一个按标签筛选的功能。先在每张卡片上加><article class="blog-card">// 获取所有筛选按钮和卡片 const buttons = document.querySelectorAll('.filter-btn'); const cards = document.querySelectorAll('.blog-card'); buttons.forEach(btn => { btn.addEventListener('click', () => { const tag = btn.dataset.tag; // 读取按钮上的标签 cards.forEach(card => { // 如果标签是"全部"或者匹配，就显示，否则隐藏 const show = tag === 'all' || card.dataset.tag === tag; card.style.display = show ? 'block' : 'none'; }); }); });

这段代码的逻辑很直白：点按钮，读标签，遍历卡片，匹配的显示，不匹配的隐藏。dataset.tag读取的就是 HTML 里style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />