简介：面向高校学生的网页设计期末大作业资源包，收录多套基于 HTML+CSS+JS 的静态个人主页与个人博客模板，采用 div+css 布局，覆盖页面结构搭建、样式美化与脚本交互等基础环节，适合刚接触前端、需要完成课程作业或自学练手的初学者参考与改编。压缩包共 4261 个文件，约 142.4MB，以 jpg、png、gif 等图片素材和 js、css、html 页面文件为主体，另含 scss、less 样式源文件与 woff、ttf、svg 等字体图标资源，配套 docx 说明文档，构成可直接运行的完整站点素材。目前已有 22949 人学习下载，说明其在同类作业场景中认可度较高。多套模板整体风格统一、页面完整，下载后可按需替换文案与图片，快速搭建个人介绍、作品展示、日志列表等常见栏目，省去从零构思版式与配色细节的时间，也便于对照源码理解布局思路与交互实现方式。

1. 先弄明白一件事：个人网页就是一份浏览器能读懂的“电子展板”

很多同学第一次听到“网页制作”，脑子里浮现的是程序员对着黑屏敲一堆看不懂的符号。其实个人网页设计没那么玄乎。你打开浏览器看到的任何一个页面，本质都是放在文件夹里的一个文本文件，后缀叫.html，浏览器负责把它翻译成文字、图片和按钮。你要做的不是发明浏览器，而是往这份文本里填内容、调样子，就像在学校门口立一块展板：木板不用你造，你只负责决定上面贴什么、怎么排版。

大学里常见的“期末大作业”，要求交一份“简单静态HTML个人网页作品”，说白了就是交一个文件夹：里面有首页、有自我介绍、有几张图，双击能打开、能点来点去。它跟“个人网站模板”的关系，就像毛坯房和样板间——模板已经把墙砌好了，你进去换家具、刷墙漆就行。这篇入门就从“这到底是什么”讲到“第一个页面怎么跑起来”，零基础也能跟着做。

2. 从零到第一个页面：先搞懂静态网页“静”在哪，再跑通十行代码

2.1 静态网页的“静”，到底静在哪里

先把这个词拆开。静态网页指的是：服务器上放的是什么文件，浏览器拿到的就是什么内容，中间不发生“根据你是谁、你登录没登录”去数据库里查东西再拼页面的事。你可以把它想成一张印好的宣传单，谁来拿都是同一张；动态网站更像餐厅点餐系统，你点不同的菜，后厨给你出不同的单。

这个区别对新手特别重要，因为它决定了你第一周该学什么。个人博客、个人简历页、作品展示页，绝大多数属于静态网页：一个index.html放首页，一个about.html放自我介绍，一个works.html放作品，再配一个style.css管长相。它不需要你买服务器、不需要装数据库、不需要懂后端语言，一个文件夹在本地双击就能看效果。这也是为什么“个人网页制作”常被当作入门第一课——反馈快，改一行字刷新一下就变，不容易一开始就被环境配置劝退。

静态网页的短板也要提前知道：它做不了真正的留言板、登录、在线支付。想加评论功能，一般是接一段第三方提供的嵌入代码；想加“联系我”，最稳的做法是直接放邮箱和社交账号链接。入门阶段先别碰这些，把页面做出来、能看、能在手机上正常显示，已经是及格线以上的期末大作业水平。

2.2 零基础先学哪三样：骨架、衣服、小动作

网页制作的技术栈可以粗分成三层，对应三个文件类型。第一层 HTML，负责骨架：哪里是标题、哪里是段落、哪里插图片、哪里是链接。第二层 CSS，负责衣服：字号多大、什么颜色、左右留多少空、手机上怎么排。第三层 JavaScript，负责小动作：点按钮弹个窗、导航栏收起展开、图片轮播。

新手最容易犯的错，是一上来就三个一起学，结果 HTML 标签还没认全，就去抄一段 JS 轮播代码，粘进去不生效，也不知道从哪查。我的建议是先把顺序定死：第一周只碰 HTML 和 CSS，能独立做出一个“标题 + 一段自我介绍 + 一张图 + 三个链接”的页面；第二周再学 CSS 的布局，把内容排成左右两栏或者卡片网格；JavaScript 放到最后，而且只学“改文字、改样式、响应点击”这三件小事就够用了。

编辑器方面，装一个带语法高亮的代码编辑器就行，别用手机备忘录，也别用带格式的文档软件——它们会偷偷往文件里塞看不见的格式符号，保存出来的.html打开就是乱的。文件夹也提前规划好：新建一个总文件夹，比如叫my-site，里面放index.html、一个css文件夹、一个images文件夹。这个习惯看着小，后面能省掉一大半“图片怎么不显示”的麻烦。

2.3 第一个例子：十行代码做出“你好，我是某某”

下面这段就是最小可运行的首页。新建一个文本文件，把后缀改成.html，把代码粘进去，保存，双击打开。

<!DOCTYPE html> <html lang="zh-CN"> <head> <!-- 这一行告诉浏览器用 UTF-8 读文件，防止中文变乱码 --> <meta charset="UTF-8"> <!-- 这一行让页面在手机上也按屏幕宽度缩放，别漏 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小A的个人主页</title> </head> <body> <!-- h1 是一级标题，一个页面只用一个，方便搜索引擎和读屏软件识别 --> <h1>你好，我是小A</h1> <p>某高校大二学生，正在学网页制作，这是我的第一个静态页面。</p> <p>我喜欢摄影和跑步，下面是我的<a href="about.html">自我介绍</a>。</p> </body> </html>

逐块说一下。<!DOCTYPE html>是声明“这份文件按现代网页标准解析”，不写也能打开，但浏览器可能进入兼容模式，样式表现会怪。<head>里放的是给浏览器看的信息，不显示在页面上：charset管编码，viewport管手机适配，title是浏览器标签页上那行字。<body>里才是用户看到的内容。

<h1>到<h6>是标题，数字越小级别越高；<p>是段落，每段文字都该包一层；<a>是链接，href后面写目标地址，写about.html就表示同文件夹下的另一个页面。注意标签基本成对出现，<p>开头、</p>结尾，漏掉结束标签是新手最常见的保存后页面“串味”的原因。

想让页面好看一点，在</title>后面加一行<link rel="stylesheet" href="css/style.css">，然后在css文件夹里新建style.css：

/* body 是整页的底色和默认字体，改这里影响全局 */ body { background-color: #f7f8fa; color: #222222; font-family: "Microsoft YaHei", sans-serif; max-width: 720px; /* 内容最宽 720 像素，避免大屏上文字拉太长 */ margin: 40px auto; /* 上下留 40 像素，左右自动居中 */ padding: 0 16px; /* 小屏幕上左右留一点空隙 */ }

这段 CSS 的意思是：整页浅灰底、深灰字、微软雅黑字体，内容区最宽 720 像素并水平居中。改background-color的值刷新，底色立刻变；改max-width的数字，页面宽窄立刻变。第一个例子到这里就算跑通了，接下来所有花活都是在这个骨架上加东西。

3. 拆开一份个人网站模板：导航、首屏、关于我、作品、页脚各管什么

3.1 一份模板通常由哪几个文件组成

拿到一份“个人网站模板”，别急着改文字，先看目录结构。常见的静态模板长这样：

这个结构不是死规定，但九成简单静态个人网页作品都是这个路子。你需要建立的心智模型是：HTML 文件负责“这一页有什么内容”，CSS 文件负责“所有页面长什么样”，图片单独放一个文件夹方便管理。模板作者把这三者分开放，就是为了让你改内容的时候不碰样式，改样式的时候不碰内容。

有个细节值得注意：模板里的index.html和about.html会有大量重复代码，比如页头导航、页脚版权信息。这不是作者偷懒，而是静态网页没有“公共模板”机制，每个页面都得把导航再写一遍。所以你改导航链接的时候，要记得每个.html文件都改，漏一个就会出现“首页能点回首页、关于页点不动”的尴尬。改之前先把整个文件夹复制一份备份，这是血泪经验。

3.2 页面的骨架：header、nav、main、footer 分别放什么

新手看模板代码容易眼花，其实抓住五个语义标签就够用了。它们不产生任何视觉效果，但把页面切成了有名字的区域，读代码的人（包括几个月后的你）一眼能对上号。

<body> <!-- 页头：通常放网站名或你的名字，每个页面都一样 --> <header class="site-header"> <a class="logo" href="index.html">小A的主页</a> </header> <!-- 导航：链接到各个页面，放在 header 里面或紧挨着 --> <nav class="site-nav"> <a href="index.html">首页</a> <a href="about.html">关于我</a> <a href="works.html">我的作品</a> </nav> <!-- 主体：每个页面真正不同的内容都放这里 --> <main> <section class="hero"> <h1>你好，我是小A</h1> <p>某高校学生，喜欢摄影、跑步和写代码。</p> </section> </main> <!-- 页脚：版权、联系方式，每个页面也一样 --> <footer class="site-footer"> <p>联系我：xiaoa@example.com</p> </footer> </body>

header是页头，放站点标识；nav是导航，放跳转链接；main是主体，一个页面只放一个，里面可以套多个section表示不同板块；footer是页脚，放版权和联系方式。这样切分的好处是，你后面写 CSS 时可以直接写.site-nav a { ... }来统一改导航链接的样式，不用给每个链接起名字。

模板里常见的“首屏大标题 + 一句话简介”就是main里的第一个section，行业里叫 hero 区。它通常配一张背景图或大号字，作用是三秒内告诉访客“这是谁、做什么的”。期末大作业评分里，首页首屏的信息清晰度往往比花哨动效更加分。

3.3 导航和页脚怎么复制到每个页面还不乱

静态网页没有include机制，导航只能一个页面一个页面地复制。手工复制最怕两件事：一是链接写错，二是改了一处忘了另一处。一个实用的土办法是在导航代码前后加注释标记，比如<!-- nav-start -->和<!-- nav-end -->，改的时候整段选中替换，不容易误伤旁边的代码。

另一个办法是把导航做得尽量简单：只放三到四个链接，不搞二级下拉菜单。下拉菜单需要 CSS 定位配合，新手调起来容易翻车。等你能稳定维护三个页面之后，再考虑加“作品详情页”这种第四、第五个页面。

页脚同理，只放版权年份和联系方式。年份别写死成某一年，写成“2024 - 2025”这种区间也行，但交作业前记得核对一遍，别让页脚写着去年的日期。这些细节不涉及技术难度，纯粹是交付前的检查习惯，而习惯往往比技术更能决定一份作业的完成度。

4. 动手改出你自己的版本：换名字、换配色、加一张作品卡片

4.1 先改文字：把模板里的名字、学校、专业换成自己的

改模板的第一步不是改样式，是改内容。打开index.html，从上到下把模板作者的占位文字换成你自己的：站点名、首屏大标题、一句话简介、关于我页里的经历、作品页里的项目名。这里有个小技巧：先把所有要改的文字列在记事本里，改一段核对一段，别边想边改，容易改到一半忘了自己写到哪。

替换时用编辑器的“查找替换”要小心。比如你想把“张三”替换成“小A”，没问题；但如果你想替换“作品”这个词，可能会把代码里的class="works"也误伤——虽然不影响显示，但会让后面的样式对不上。稳妥的做法是只替换中文正文里的词，不碰引号里的英文类名。

还有一个容易被忽略的点：<title>标签里的文字也要改。它是浏览器标签页上显示的那行字，交作业时老师打开一堆页面，标签页全写着“Document”或者模板作者的名字，观感会差很多。改完保存，双击index.html，逐个页面点一遍导航，确认没有死链。

4.2 再改颜色和字体：三个变量换掉整站风格

模板的样式文件通常几百行，直接改容易改崩。比较稳的做法是找到文件开头的颜色定义，如果模板用了 CSS 变量，改起来就非常轻松：

/* :root 里定义的是全局变量，整站引用同一套颜色 */ :root { --main-color: #2f6feb; /* 主色：按钮、链接、强调文字 */ --text-color: #222222; /* 正文颜色，别用纯黑，太刺眼 */ --bg-color: #f7f8fa; /* 页面底色，浅灰比纯白柔和 */ --card-bg: #ffffff; /* 卡片底色，比页面底色亮一点形成层次 */ } /* 用法：把颜色值换成 var(变量名) */ a { color: var(--main-color); } body { background-color: var(--bg-color); color: var(--text-color); }

var(--main-color)的意思是“取上面定义的那个值”。你只要改:root里那三四个色值，整站所有引用到的地方一起变，不用一处处找。选色没有标准答案，但有个新手友好的原则：主色只用一个，别超过两个；正文用深灰不用纯黑；底色用极浅的灰或米白，别用高饱和度的颜色铺满整页。

如果模板没用变量，全是写死的十六进制色值，也可以用查找替换把重复出现的那个主色统一换掉。替换前先数一下这个色值出现了多少次，替换后再刷新看有没有哪个区块变得不协调——有些色值是故意用在深色背景上的，统一换掉可能让文字看不清。

4.3 加一张作品卡片：从复制一段结构到调好间距

作品页是个人网页里最能体现“这是你的东西”的部分。不用一上来做复杂的网格，先加一张卡片跑通流程：

<div class="card"> <!-- 图片放在 images 文件夹里，路径写相对路径 --> <img src="images/project-x.jpg" alt="模拟项目X的界面截图"> <h3>模拟项目X</h3> <p>一个用 HTML 和 CSS 做的课程作业页面，包含首页和详情页。</p> <a href="#" class="card-link">查看详情</a> </div>

.card { background: var(--card-bg); border-radius: 8px; /* 圆角，数值越大越圆 */ padding: 20px; /* 卡片内边距，内容不贴边 */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 淡淡的阴影，制造悬浮感 */ max-width: 320px; } .card img { width: 100%; /* 图片宽度撑满卡片 */ height: 180px; /* 固定高度，避免不同尺寸图片把卡片撑得参差不齐 */ object-fit: cover; /* 裁切填充，不变形 */ border-radius: 6px; }

object-fit: cover是新手最该记住的一条：没有它，竖图会被压扁、横图会被拉长；有了它，图片按比例裁切填满设定区域，视觉上整齐很多。卡片本身用padding留内边距、border-radius做圆角、box-shadow加一点阴影，这三样加起来就是常见的“卡片感”，不需要图片素材也能做出层次。

加完一张卡片，复制这段结构就能变成三张、四张。想让它们横排，在父容器上加display: flex; gap: 16px; flex-wrap: wrap;，gap控制卡片间距，flex-wrap保证屏幕窄的时候自动换行。这三个属性组合是新手做作品列表最省事的方案，比调浮动和定位稳得多。

5. 新手最容易翻车的五个地方：路径、乱码、手机端、标签闭合、文件位置

5.1 图片显示不出来，只有一个裂图图标

现象：代码里明明写了<img src="图片.jpg">，打开页面却是一个破图标，或者干脆空白。

原因：九成是路径写错了。浏览器找图片是相对于当前.html文件的位置去找的。如果你的页面在根目录，图片在images文件夹里，src就必须写images/图片.jpg，不能只写文件名。另一种常见情况是文件名大小写不一致：文件叫Photo.JPG，代码里写photo.jpg，在 Windows 上可能碰巧能显示，换台电脑或者传到网上就失效。

解决：把图片和页面放在同一个总文件夹下，统一用相对路径；文件名全部用小写英文加短横线，比如project-x.jpg，别用中文名和空格。改完刷新页面，还不行就打开浏览器开发者工具看 Network 面板，红色那条会直接告诉你它在找哪个路径。

5.2 中文全变成问号或方块

现象：页面里的中文显示成“锟斤拷”或者一排问号。

原因：文件保存的编码和浏览器读取的编码不一致。<meta charset="UTF-8">写了但文件本身不是按 UTF-8 保存的，或者这行根本没写，浏览器按默认编码去猜。

解决：先在<head>里确认有<meta charset="UTF-8">，然后用编辑器的“另存为”或状态栏把文件编码改成 UTF-8，重新保存。注意不要用带格式的文档软件编辑.html，它保存时可能加上自己的编码声明，把页面搞乱。

5.3 电脑上好看，手机上挤成一团

现象：在电脑浏览器里排版正常，用手机打开或者把窗口拉窄，文字溢出、卡片重叠、导航挤成两行。

原因：一是漏了<meta name="viewport" content="width=device-width, initial-scale=1.0">，手机浏览器会按桌面宽度渲染再缩小；二是布局用了固定像素宽度，比如width: 1200px，窄屏放不下。

解决：先补上 viewport 那行；再把固定宽度改成max-width加百分比；卡片列表用flex-wrap: wrap让它自动换行。判断标准很简单：把浏览器窗口从宽拉到窄，页面不出现横向滚动条、文字不被截断，就算过了一遍基础检查。期末大作业如果只在一个屏幕尺寸下好看，答辩时用手机一打开就容易露馅。

5.4 复制来的代码一保存，页面就“失效”了

现象：从网上抄了一段代码，粘进去保存，页面样式全乱，或者标签直接显示在页面上。

原因：两个高发点。一是标签没闭合，比如<div>开了没关，浏览器会自己猜着补，猜错就把后面的内容全包进去了。二是粘进了全角符号，中文输入法下的引号、分号、括号在代码里不合法，浏览器不认。

解决：粘完代码先把输入法切到英文，检查引号是不是直的"、分号是不是半角;；再用编辑器的括号匹配功能，点一下开标签看它有没有高亮对应的闭标签。新手阶段宁可手打也不要整段复制，手打的过程就是记标签的过程。

5.5 本地能打开，交上去样式全丢

现象：在自己电脑上双击index.html一切正常，压缩包发给老师或者传到网上，页面变成纯文字。

原因：css文件夹没一起打包，或者link标签里的路径写成了自己电脑的绝对路径，比如C:\Users\...\style.css。绝对路径只在你本机有效，换台机器就断。

解决：交作业前把整个my-site文件夹压缩，不要只挑.html文件；样式引用一律用相对路径css/style.css。养成一个习惯：改完页面把整个文件夹复制到另一个位置再打开一次，能正常显示才算真的没问题。这个动作花不了一分钟，但能避免“做了两周、交上去零分”的翻车。

6. 从“能打开”到“敢给人看”：下一步学什么、拿什么练手

页面能打开之后，很多人会卡在“接下来学什么”上：教程太多，方向太散，今天看布局明天看动画，最后什么都没做完。我的建议是按“能立刻用上”的顺序排，而不是按知识体系的完整度排。下面这张表是我会给零基础同学排的四周节奏，你可以照着改：

第一周的目标不是“学完 HTML”，而是“能独立改一个页面”。第二周重点攻 Flex，因为它能解决新手 80% 的排版问题：导航横排、卡片横排、内容左右分栏，都是它。媒体查询只要记住一个写法：@media (max-width: 600px) { ... }，里面写窄屏下要覆盖的样式，比如把横排改成竖排、把字号调小。

JavaScript 不用急着系统学。先做一个最小交互：点按钮显示隐藏一段文字。需要用到document.querySelector选中元素、给按钮加addEventListener监听点击、改元素的style.display。这三步能跑通，你对“脚本在干什么”就有实感了，再回头看书就不容易犯困。

资源使用上也有个顺序建议：先拿模板跑通，再拿模板改，最后才尝试从空白文件写。很多人一上来就想“我要原创”，结果卡在第一个页面出不来，热情耗光。用模板不丢人，期末大作业考察的是你能不能把内容组织清楚、把页面调到自己满意，而不是背下所有标签。

我第一次带同学做个人网页时，有个同学改到一半把style.css删了，理由是“想重新写一份更干净的”，结果两天都没恢复回原来的样子。从那以后我每次动模板之前，都强制先把整个文件夹复制一份、改名加日期再开工，改崩了直接换回来，十分钟的事。这个习惯比任何技巧都值钱。希望帮到你。

本文还有配套的精品资源，点击获取