简介一套面向大学生期末网页设计作业的个人网页模板合集以HTMLCSSJS实现静态页面涵盖个人博客、个人网站及期末大作业等常见场景。压缩包共4261个文件包含243个html、411个css、481个js等核心代码文件以及大量jpg/png图片、gif动图、字体素材等整体142.4MB多套页面均采用divcss框架结构清晰、易于替换与修改。已有22931人学习下载画面精美且代码适合初学者借鉴。内含多套完整作业方案可快速满足个人主页展示、课程设计提交等需求同时可作为学习前端布局与交互的实战范例。1. 个人网页制作静态HTML个人网页作品不只是课程作业更是你第一件能拿给人看的作品个人网页制作这个事经常被两句话耽误一是“不会 JavaScript 怎么做网页”二是“静态HTML都算老古董了”。实际上个人网页制作的终点不是炫技而是让人在十秒内看懂你是谁、你能做什么。一个 .html 文件加一个 .css 文件不需要数据库不需要后端双击就能打开成完整页面——这种简单静态HTML个人网页作品适合给大学生交网页设计作业、给找实习的人当演示页也适合撑起一个以阅读为主的个人博客。下面从文件结构、页面样式、常见故障到验证发布按我实际会动手的顺序写一遍。2. 网页制作的最小骨架HTML 标签、三个必写参数与本地打开验证2.1 浏览器不是在“跑程序”是在按标签拼版面刚开始做网页的大学生最容易把 HTML 当成“编程语言”然后一上来就想学逻辑、循环、函数。其实 HTML 是结构化标记浏览器拿到一个 .html 文件之后按标签的嵌套关系把内容拆成标题、段落、图片、链接再套用 CSS 去算每个元素占多宽多高。所以第一步不用写任何“程序”先做对骨架。我一般会在项目根目录建一个 index.html内容只有这段!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title张三的个人博客/title /head body h1你好我是张三/h1 p这是我的静态HTML个人网页作品目的是把课程作业和作品集串起来。/p pa hrefabout.html关于我/a/p /body /html这段代码里真正不能删的不是视觉效果而是三层约束。!DOCTYPE html告诉浏览器按现代 HTML5 标准解释不用它就会出现一堆诡异差异html langzh-CN声明页面主要语言是简体中文浏览器翻译、屏幕朗读都会参考它meta charsetUTF-8决定字符解码方式——少了这一行中文在别人电脑上大概率变成“锟斤拷”或乱码这是个人网页制作里最高频的翻车现场。最后meta nameviewport是手机端的命门后面第 4 章会专门讲。至于title张三的个人博客/title位置虽然只在标签页上显示一行但浏览器保存书签、搜索引擎分词都以它为准所以我的习惯是把 title 写成“真实姓名 站点类型”而不是“首页”“未命名”这类占位内容。2.2 目录结构决定了后面不苦样式、图片、文章分三处放起步阶段如果把 index.html、photo.jpg、style.css 全堆一起头两页没问题一写个人博客就乱套。我见过很多大学生的网页设计作业图片路径写的是C:\Users\张三\Desktop\个人网站\images\me.png在自己电脑上能开换个环境就全部失联。正确做法是约定一套相对路径的目录结构mysite/ ├── index.html ├── about.html ├── blog/ ← 以后每一篇博客单独一个 HTML │ └── post-1.html ├── css/ │ └── style.css └── images/ ├── avatar.jpg └── banner.jpg这套结构不解决任何“功能”解决的只是“查找”。css 只放样式images 只放图片blog 放下所有文章页。在 index.html 里引用样式用css/style.css这种相对路径引用图片用images/avatar.jpg。不管整个项目被复制到哪个目录只要这几层的相对关系不变就不会断链。命名上我统一用英文小写字母加连字符my-avatar.jpg比我的照片 (1).JPG省掉大量坑——路径里的空格和中文是浏览器解析最容易出错的地方这也是 web 网页设计里几乎必踩的一关。2.3 先跑本地服务再看效果双击打开会出现“玄学”严格说双击 index.html 也是在预览但很多初学者最后会卡在这里图片能显示CSS 却时好时坏偶尔报跨域错误。这不是代码坏了而是浏览器对file://协议做了严格限制。所以我的固定习惯是给站点起一个本地服务最简单的是用 Python 自带模块# 在项目根目录mysite/里打开终端执行 python -m http.server 8080 # 出现 Serving HTTP on 0.0.0.0 port 8080 后浏览器访问 # http://localhost:8080端口写成 8080是因为 80 端口需要管理员权限8000 又太容易撞上其他开发工具。如果提示Address already in use端口被占用就换成别的比如python -m http.server 8081。访问后看到的页面和双击几乎一样但所有相对路径、样式、图片都会按普通网站的规则处理后面做调试才能稳定复现。如果你电脑没装 Python用 Node.js 那边也行一句话npx serve .。这些工具的共同点不是“必须用”而是把file://换成http://让浏览器不把本地文件当外来资源。这一步几乎是后面所有排查的基础所以第 2 章的铺垫不能省。2.4 浏览器开发者工具拿到页面先看三个面板会按 F12 打开浏览器开发者工具是“会用网页制作”和“能自己排查网页制作”的分界。调试顺序按三处来Console控制台面板报警告报错侧重资源和脚本加载Network网络面板列出所有请求看状态码是 404 还是 200Elements元素面板选中页面某个区域就能反查对应的 HTML 和 CSS。个人博客这类静态页面90% 的问题几分钟内能从这三个面板的红色信息里找出来。后续第 5 章会把“提交前检查”做成清单这里先建立打开面板的习惯即可。3. 网站模板做出质感CSS 布局、配色参数与个人博客的取舍3.1 先定“三区块骨骼”再谈好看个人网站模板值不值得抄先看它是不是遵循一套固定结构页头header放导航主体main放自我介绍、作品卡片、博客列表页脚footer放版权信息。这套结构不出彩但读者不会迷路。我见过太多大学生花一下午找“炫酷模板”最后导入进来全是看不懂的动画库改一个导航文字都要翻半天。与其追求视觉爆炸不如先把区块语义做对。下面是最常见的单页结构配合锚点导航一个文件就能完成“自我介绍 作品展示 博客入口”header classsite-header nav classnav a href#intro关于我/a a href#works作品/a a href#blog博客/a /nav /header main classcontent section idintro h2关于我/h2 p这里写你的专业、兴趣、联系方式。/p /section section idworks h2课程作品/h2 p这里放两到三个可展示的成果配一张截图就够。/p /section section idblog h2近期博客/h2 p列出最近三篇文章标题点进去是独立文章页。/p /section /main footer classsite-footer p© 2025 张三 · 静态HTML个人网页/p /footer关键点有两个。第一section的id要和导航里的href#intro完全对应大小写都要一致不然点了没反应。第二footer 里的年份我写成 2025这是一个静态页面必须手动维护的信息不要学某些“聪明办法”去用 JS 自动取年份静态页面一旦禁掉脚本版权信息就消失了没必要。3.2 不背花活也能顺眼的 flex/grid 布局与可抄参数布局是最容易劝退新手的环节。其实个人网站模板最常用的就两招内容居中限制宽度然后用 flex 或 grid 排导航和卡片。下面这套 CSS 可以直接抄进css/style.css.content { max-width: 960px; margin-left: auto; margin-right: auto; padding: 0 16px; } .nav { display: flex; justify-content: center; gap: 24px; } .works-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }逻辑说明.content用max-width限制在 960px避免大屏上文字被拉成一条长线margin-left: auto; margin-right: auto;是经典的水平居中做法不用 flex 也能居中。.nav用 flex 让导航项排成一行justify-content: center是水平居中gap: 24px控制项间距。.works-list用 grid 排成 3 列每一列宽度都是1fr相当于把可用宽度三等分。参数怎么调想从三列变两列把repeat(3, 1fr)改成repeat(2, 1fr)。想间距更疏把gap调大到 32px。这一套 flex/grid 的组合几乎覆盖了“个人信息页”和“博客归档页” 80% 的排版需求。3.3 配色和字号可以用一张表定参数个人网页设计里最容易“用力过猛”的是配色。我见过把页面涂成七种颜色的也见过把正文灰度和背景灰度调到分不清的。大作业和作品集要的是耐看不是抢眼。下面是一套我常用的低风险参数表用途参数值使用位置说明页面背景#f7f8fabody比纯白柔和又不影响文字对比度正文颜色#333333p、li长时间阅读不刺眼标题颜色#111111h1、h2、h3比正文更重形成层级主色#2563eba、按钮全站只出现一次克制使用分隔线#e5e7eb卡片边框、hr颜色浅不抢内容字号上我默认正文 16px行高 1.7h1 大约 32pxh2 24pxh3 20px。行高 1.7 对中文阅读非常友好低于 1.5 时会觉得段落挤成一团。写完先自查“正文与背景对比度是否够”这比刻意加渐变和阴影更划算。想让页面有“质感”可以做两件事给卡片和导航加圆角再给卡片加一个极轻的 hover 效果.post-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px 24px; transition: box-shadow 0.2s ease; } .post-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }这里transition的 0.2s 是阴影变化的时长太短显得生硬太长像没绑定。rgba(0, 0, 0, 0.08)是半透明黑0.08 是透明度数值越大阴影越重。这一条代码几乎是“从学生页变成作品页”最快的捷径。3.4 个人博客的列表页为什么用“文章卡片”而不是直接堆段落个人博客做久了最容易出现的问题是首页越来越长。一开始在 index.html 里写两篇文章还行写到第十篇时一个文件几千行浏览器加载变慢改个页脚要找半天。所以我建议从一开始就把博客列表做成卡片每一篇正文单独成页。article classpost-card h2a hrefblog/2024-05-01-first-post.html我的第一篇个人博客/a/h2 p classmeta2024-05-01 · 分类随笔/p p classexcerpt这里写两行摘要让读者先判断是否值得点进来。/p /article这段代码的作用是把一篇博客抽象成一个独立单元。article是语义标签告诉浏览器这是一篇完整文章a指向blog/目录下的独立页面.meta放日期和分类日期的格式我坚持用YYYY-MM-DD因为它按字符串排序时就是时间顺序不用额外处理。excerpt是摘要2 到 3 行即可别把全文都放首页。这样做的后续收益很直接以后想加一篇博客复制blog/post-1.html改名再改内容首页上再复制一个卡片改链接和摘要不需要动任何布局。这套工作流就是个人博客系统测试的重点——不是测“能不能显示”而是测“加一篇能花多久、会不会弄乱别的页面”。4. 网页制作常见问题排查五个最容易把作品拖垮的现场4.1 现象别人打开中文全变成“锟斤拷”现象在自己电脑上双击 index.html 一切正常把文件夹发给同学或老师对方用浏览器打开中文全变成“锟斤拷”“烫烫烫”或者空心方块。原因HTML 文件保存时的编码不是 UTF-8。很多 Windows 自带编辑器默认按 ANSI 或 GBK 保存浏览器按 UTF-8 解码时自然对不上。另外如果缺少meta charsetUTF-8浏览器会用当前系统默认编码去猜Windows 中文系统多半猜成 GBK结果同样错乱。解决在 HTML 的head里保留meta charsetUTF-8。然后用 VSCode 打开文件看右下角状态栏显示的编码如果是 UTF-8 就不管不是的话点击编码名选择“通过编码保存”改成 UTF-8。改完保存再刷新。这个坑在个人网页制作里非常隐蔽因为自己电脑的浏览器和编辑器默认编码一致只有换环境才暴露。4.2 现象图片位置显示一个裂开的图标现象页面文字都在唯独图片区域是断裂图标或空白有时鼠标移上去还提示无法找到文件。原因路径写错。常见三种一是图片实际在images/里却写成img/二是文件名大小写不对Avatar.jpg写成avatar.jpg三是直接写了C:\Users\...绝对路径换一台电脑就失效。解决按第 2 章目录结构执行只用相对路径。替换img srcimages/avatar.jpg alt头像后先按 F12 打开 Network 面板刷新页面找到该图片请求状态码如果是 404就把鼠标放到请求地址上看它到底在找哪个路径再对照资源管理器里的实际文件。不要直接乱改路径看请求地址是最准确的。4.3 现象CSS 写好了页面却像没穿衣服一样纯白裸奔现象style.css 里明明写了背景色、字号、布局刷新后页面上什么样式都没有全剩黑字白底。原因链接样式表的 href 路径不对或者浏览器缓存了旧的 CSS 文件。路径写错的典型是CSS 在css/style.css却写成style.css或者忘了写relstylesheet浏览器不认为这是样式表。解决先看 Network 面板找到style.css这个请求状态码是 404 还是 200。404 就检查路径和文件名200 但样式没生效就点开 Elements 面板选中 body 元素看右侧 Computed 样式里背景色是什么。缓存问题用一个操作解决按CtrlShiftR强制刷新这会忽略缓存重新加载所有资源。这是我做静态网页设计时最常挽尊的操作之一。4.4 现象手机上打开字体大得离谱像老年机现象在电脑浏览器里正常把链接发到自己手机打开文字大得惊人整个页面像被放大镜盯住需要左右滑动才能看全一行。原因缺少meta nameviewport。手机浏览器没有这个标签时会按桌面宽度通常是 980px渲染整个页面然后整体缩小到屏幕宽度。文字被缩小后会很难读浏览器就自作聪明把文字重新放大结果就成了“页面很挤但字很大”的诡异状态。解决在 head 里放上meta nameviewport contentwidthdevice-width, initial-scale1.0。基础文案立即正常。但栅格还是三列的话在手机上会挤所以还要配一个媒体查询media (max-width: 600px) { .works-list { grid-template-columns: 1fr; } }max-width: 600px指当视口宽度小于等于 600px 时作品列表从三列变成一列每张卡片占满一行。这个断点值不是定死的你可以改 640px 或 768px原则是切到你真的觉得宽度不够用的那个点。4.5 现象点导航跳转后标题被固定页头挡住现象页面开了锚点导航点击“关于我”后确实跳过去了但 section 的标题顶部被固定在最上方的导航遮住看不到 h2 标题。原因锚点跳转会把对应元素滚动到视口最顶部而.site-header用了position: fixed或position: sticky固定在那里遮挡了顶层约 50 到 80px 的高度。解决给 body 或对应区域加一个滚动偏移即可html { scroll-padding-top: 70px; }这里 70px 要和你的页头实际高度匹配如果导航更高就调到 90px。另一种做法是给每个带id的 section 单独加scroll-margin-top: 70px;效果类似。选一个方式统一用别混用。这个问题在个人博客页面稍长之后几乎必现属于经典“看着像没毛病实际差一点”的坑。5. 提交前做一遍个人博客系统测试验收清单与三个不用学后端的进阶方向5.1 用一套清单给网页设计作业收尾静态HTML个人网页作品要交出去别直接打包就发。我一般会在浏览器里按一套固定脚本过一遍用的是 Chrome 开发者工具的三个面板检查项操作通过标准资源加载F12 打开 Network 面板刷新页面没有红色 404 或 500 请求控制台报错打开 Console 面板清空后刷新没有 Uncaught 或 Failed 错误手机适配开发者工具左上角点设备图标选 iPhone 尺寸无横向滚动条图片不溢出锚点导航点击页头每个导航链接跳转后标题不被页头遮挡页面编码刷新后查看所有中文无乱码无空心方块CSS 生效Elements 面板选中 bodyComputed 样式里有背景色和字号这一套下来能过滤掉 90% 的交作业级事故。运行时环境选展示时不要同学开着手机你就会翻车。5.2 不用学后端三个值得做的进阶方向第一个方向是给页面加分页层次把个人博客按日期归档做一个archive.html把所有文章标题列表放进去入口放在导航里。静态页面最多只能做到二级导航够用就行。第二個方向是给作品卡片细调 hover 交互把第 3 章的transition扩展到位移和边框色上让卡片有轻微浮起效果。第三个方向也最简单把整个页面部署到免费静态托管服务上得到一个能通过网址访问的个人主页很多同学坚持做自己的个人博客就是为了这个效果。演示部署时不要依赖file://协议提交内容里留下一句访问方式说明输出最终交付物都以静态为主TP和部署讲清楚边界就足够。5.3 一个小细节让页面手感完全不同给页面加一个平滑滚动这行代码会让整个站点的导航体验立刻不同html { scroll-behavior: smooth; }这一行让锚点跳转变成平滑滑动而不是瞬跳几毫秒的差异但演示给老师看时观感完全不同。如果你想更进阶把scroll-behavior拆出来写在scroll-padding-top那行旁边两行一起放到html选择器里顺序不影响结果。移动端兼容性好不用额外前缀。个人博客用这一条就够不要再加复杂动画静态页面加载时最忌“什么都晃”。这一步步做下来你已经能跑通最小静态站点的全流程。我自己每次演示前最容易翻车的是忘记保存就刷新页面改了一堆样式没生效还以为是缓存。后来我养成一个习惯改完任何文件先按CtrlS再切回浏览器刷新别信自己的手速。做静态网页最大的好处就是代价低错了马上改随时能重来。希望帮到你。本文还有配套的精品资源点击获取