简介这份资源面向正在准备网页设计期末大作业的大学生与网页制作初学者提供多套可直接参考的静态个人网页作品涵盖个人主页、个人博客等常见题材帮助解决作业数量多、找不到合适模板、无从下手等实际问题。压缩包共4261个文件约142.4MB以jpg、png、gif等图片素材和js、css脚本样式为主配合243个html页面、scss与less预编译样式、woff与ttf字体文件以及少量docx说明文档整体采用divcss框架编写结构清晰、便于二次修改。目前已有22928人学习下载热度较高。读者可从中获取完整的页面布局思路、导航与轮播等常见模块实现、响应式样式写法及素材组织方式既能直接套用完成课程作业也能作为临摹练习的参考逐步掌握HTML、CSS与JavaScript的基础配合技巧。1. 个人网页制作从一份静态 HTML 模板到能上线的大学生个人博客很多同学第一次做个人网页是课程作业逼出来的老师要求交一个「个人网站作品」于是打开搜索引擎找模板下载一个压缩包改改名字和照片就交上去。结果答辩时被问「你这个页面为什么在手机上错位」「导航栏点击为什么没反应」当场卡壳。这篇笔记就是写给这类同学的——你手里可能已经有一份简单静态 HTML 个人网页作品或者正准备从零做一个个人博客但你不清楚一份能拿得出手、能放到服务器上给别人看的页面到底由哪些部分组成、每一块该怎么改、改完怎么验证。我会按「先跑通最小页面 → 再拆模板结构 → 再补博客功能 → 最后处理部署和踩坑」的顺序讲所有代码都可以直接复制运行不需要任何构建工具浏览器打开就能看到效果。适合刚学完 HTML、CSS、JS 基础语法想做一个真实可访问的个人网站模板的在校生和转行新手。2. 先跑通一个最小可用的静态 HTML 页面文件结构、doctype 与编码三件事2.1 为什么第一行必须是!doctype html不写会怎样很多人从网上复制模板第一行是!doctype html但不知道它是干什么的删掉之后发现页面「好像也能显示」就以为无所谓。实际上一旦不写 doctype浏览器会进入怪异模式quirks mode盒模型的计算方式会和标准模式不一样——你给一个 div 设了width: 300px; padding: 20px;标准模式下总宽是 340px怪异模式下总宽还是 300px内容被挤扁。这就是为什么你照着教程写的布局在自己电脑上「看起来对」换台电脑就错位。一个最小可运行的静态页面骨架长这样直接保存为index.html双击用浏览器打开就能看到!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title我的个人主页/title link relstylesheet hrefcss/style.css /head body header classsite-header h1张三的个人博客/h1 nav a hrefindex.html首页/a a hrefabout.html关于我/a a hrefblog.html文章/a /nav /header main p这里放一句话简介。/p /main script srcjs/main.js/script /body /html逻辑说明!doctype html声明这是 HTML5 文档强制浏览器用标准模式渲染html langzh-cn告诉浏览器和屏幕阅读器页面主语言是简体中文影响字体回退和朗读发音meta charsetutf-8必须放在head最前面否则中文可能变乱码meta nameviewport ...是移动端适配的开关没有它手机浏览器会按 980px 宽度渲染再缩放字小到看不清。参数说明widthdevice-width让布局宽度等于设备逻辑宽度initial-scale1初始缩放为 1不要设成 0.5 之类的值否则用户一进来就是缩小状态。lang属性写zh-cn而不是zh是为了让部分浏览器正确选择简体中文字形。2.2 目录怎么分css、js、images 三个文件夹够不够一个简单静态 HTML 个人网页作品目录结构不需要复杂但也不能所有文件堆在一起。我一般会这样分my-site/ ├── index.html ├── about.html ├── blog.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── images/ ├── avatar.jpg └── banner.jpg这样分的好处是改样式只动 css 文件夹改交互只动 js 文件夹换头像只动 images 文件夹不会出现「改了一个颜色结果把结构改坏了」的情况。注意文件名全部用小写不要用中文名不要用空格——服务器上我的头像.jpg这种文件名在部分环境下会 404这是血泪经验。2.3 用浏览器开发者工具验证三件事写完骨架后按 F12 打开开发者工具做三个检查第一看 Console 面板有没有红色报错。常见的是Failed to load resource: net::ERR_FILE_NOT_FOUND说明 css 或 js 路径写错了检查hrefcss/style.css里的相对路径是否和实际目录一致。第二看 Elements 面板鼠标悬停到html标签上如果显示的是!DOCTYPE html且没有提示怪异模式说明 doctype 生效。第三点一下左上角的手机图标Toggle device toolbar切到 iPhone 尺寸看页面是否出现横向滚动条。如果有说明某个元素宽度超过了视口通常是图片没设max-width: 100%。提示每次改完 HTML 或 CSS先按 CtrlShiftR 强制刷新避免浏览器缓存旧样式导致「改了没效果」的假象。3. 把一份个人网站模板拆成可替换的模块导航、卡片、页脚3.1 导航栏为什么用 flex 而不是 float早期模板里导航栏常用float: left现在更推荐 flex。原因很直接float 需要额外清除浮动否则父容器高度塌陷导航栏背景色会「消失」flex 一行搞定还能自动垂直居中。/* css/style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } .site-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #1f2937; color: #fff; } .site-header nav a { color: #d1d5db; text-decoration: none; margin-left: 16px; font-size: 15px; } .site-header nav a:hover { color: #fff; }逻辑说明box-sizing: border-box让 padding 算在宽度内避免布局计算混乱justify-content: space-between让标题和导航分列两端align-items: center垂直居中。参数说明padding: 16px 24px是上下 16、左右 24移动端可以改成12px 16px省空间margin-left: 16px给导航链接之间留间距不要用margin-right否则最后一个链接右边会多出空隙。3.2 文章卡片一个可复用的 HTML 结构个人博客首页通常要列出几篇文章。不要每篇文章复制一遍结构再手改而是定义一个卡片结构用数据填充article classpost-card img srcimages/post1.jpg alt文章封面 classpost-cover div classpost-body h2 classpost-title我的第一篇博客/h2 p classpost-meta2025-01-01 · 学习笔记/p p classpost-excerpt这是摘要控制在两行以内。/p a hrefpost1.html classpost-link阅读全文/a /div /article.post-card { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; margin-bottom: 20px; } .post-cover { width: 100%; display: block; } .post-body { padding: 16px; } .post-title { font-size: 18px; margin-bottom: 8px; } .post-meta { font-size: 13px; color: #6b7280; margin-bottom: 8px; } .post-excerpt { font-size: 14px; color: #374151; line-height: 1.6; } .post-link { color: #2563eb; text-decoration: none; font-size: 14px; }逻辑说明overflow: hidden配合border-radius让图片圆角不被裁掉display: block消除图片底部默认的几像素间隙。参数说明line-height: 1.6是中文正文比较舒服的行高低于 1.4 会显得挤border-radius: 8px是常见卡片圆角不要超过 12px否则在小屏幕上显得圆过头。3.3 页脚和返回顶部一个 20 行的实用脚本页脚放版权和备案信息如果部署在国内服务器返回顶部按钮是个人博客的标配。下面这段 JS 直接放在js/main.js// js/main.js window.addEventListener(scroll, function () { var btn document.getElementById(backToTop); if (window.scrollY 300) { btn.style.display block; } else { btn.style.display none; } }); document.getElementById(backToTop).addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); });逻辑说明监听滚动事件滚动超过 300px 显示按钮否则隐藏点击时用scrollTo平滑滚回顶部。参数说明300是触发阈值页面短可以调小到 150behavior: smooth在部分老浏览器不支持会直接跳回顶部不影响功能。注意按钮的 HTML 要写成button idbackToTop styledisplay:none; position:fixed; right:20px; bottom:20px;↑/buttonposition: fixed让它固定在视口右下角。4. 给静态页面加上博客该有的功能文章列表、详情页与代码高亮4.1 用纯 HTML 做多篇文章列表不引入框架大学生个人网页设计最常见的需求是「首页列出所有文章点进去看详情」。不引入任何框架纯 HTML 也能做关键是保持列表和详情页的链接一致!-- blog.html -- ul classpost-list lia hrefposts/2025-01-01-first.html我的第一篇博客/aspan2025-01-01/span/li lia hrefposts/2025-01-05-css-layout.htmlCSS 布局踩坑记录/aspan2025-01-05/span/li lia hrefposts/2025-01-10-js-event.htmlJS 事件绑定笔记/aspan2025-01-10/span/li /ul.post-list { list-style: none; } .post-list li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f3f4f6; } .post-list a { color: #111827; text-decoration: none; } .post-list span { color: #9ca3af; font-size: 13px; }逻辑说明list-style: none去掉默认圆点flex 让标题和日期分列两端。参数说明border-bottom用浅灰色#f3f4f6做分隔线比纯黑更柔和日期字号比标题小 2px 左右形成层次。4.2 文章详情页的排版正文宽度和字号怎么定详情页最容易翻车的地方是正文太宽一行字太多读起来累。经验值是正文容器最大宽度 720px 到 800px字号 16px行高 1.8.post-content { max-width: 760px; margin: 0 auto; padding: 24px 16px; font-size: 16px; line-height: 1.8; color: #1f2937; } .post-content h2 { font-size: 22px; margin: 32px 0 12px; } .post-content p { margin-bottom: 16px; } .post-content pre { background: #f9fafb; padding: 16px; border-radius: 6px; overflow-x: auto; font-size: 14px; }逻辑说明max-width加margin: 0 auto让正文居中且不过宽overflow-x: auto让代码块在手机上可以横向滚动不撑破布局。参数说明line-height: 1.8是中文长文阅读的舒适值font-size: 14px用于代码块比正文小 2px区分层级。4.3 代码高亮不引入 highlight.js 的轻量替代如果文章里有代码可以用纯 CSS 做基础高亮避免引入外部库拖慢加载pre code .tag { color: #2563eb; } pre code .attr { color: #b45309; } pre code .string { color: #059669; }然后在 HTML 里手动给关键词加span classtag。逻辑说明这种方式适合文章数量少、代码片段短的情况如果文章超过 20 篇建议还是用 highlight.js 自动处理。参数说明颜色值选对比度足够的#2563eb蓝色用于标签名#059669绿色用于字符串符合大多数人的阅读习惯。5. 避坑与排查静态个人网页最容易翻车的 5 个地方5.1 现象本地打开正常传到服务器后样式全丢原因CSS 路径用了绝对路径/css/style.css但网站部署在子目录下比如https://example.com/myblog/实际路径应该是/myblog/css/style.css。解决统一用相对路径css/style.css或者确认部署根目录后再用绝对路径。5.2 现象手机上导航栏挤成两行点不到链接原因导航链接没有换行处理屏幕窄时被压缩。解决给导航加flex-wrap: wrap或者在小屏幕下用媒体查询把导航改成纵向排列media (max-width: 600px) { .site-header { flex-direction: column; align-items: flex-start; } .site-header nav { margin-top: 8px; } .site-header nav a { margin-left: 0; margin-right: 16px; } }5.3 现象图片在手机上超出屏幕出现横向滚动条原因图片没有限制最大宽度。解决全局加img { max-width: 100%; height: auto; }这一条能解决 90% 的移动端溢出问题。5.4 现象改了 CSS 但浏览器没变化原因浏览器缓存了旧文件。解决强制刷新 CtrlShiftR或者在开发阶段给 link 加版本号hrefcss/style.css?v2每次改完把 v 后面的数字加一。5.5 现象中文显示成方块或乱码原因文件保存编码不是 UTF-8或者meta charset写成了gbk但文件实际是 UTF-8。解决用 VS Code 打开文件右下角确认编码是 UTF-8meta charsetutf-8放在 head 第一行。6. 进阶技巧用一份模板批量生成文章页以及上线前的检查清单当你写到第 10 篇文章时手动复制 HTML 会变得很痛苦。我一般会用一个简单的 Node 脚本把 Markdown 或 JSON 数据批量转成 HTML 页面。不需要学框架20 行代码就够// build.js 用 node build.js 运行 const fs require(fs); const posts [ { slug: first, title: 我的第一篇博客, date: 2025-01-01, body: p正文内容/p }, { slug: css-layout, title: CSS 布局踩坑记录, date: 2025-01-05, body: p正文内容/p } ]; const tpl (p) !doctype html html langzh-cn headmeta charsetutf-8title${p.title}/title link relstylesheet href../css/style.css/head bodyarticle classpost-content h1${p.title}/h1p classpost-meta${p.date}/p ${p.body} /article/body/html; posts.forEach(p { fs.writeFileSync(posts/${p.slug}.html, tpl(p)); console.log(生成, p.slug); });逻辑说明posts数组存文章数据tpl函数是模板字符串forEach遍历生成文件。参数说明slug用英文短横线命名和 URL 对应body里放 HTML 片段如果从 Markdown 转需要先转成 HTML 再传入。运行前确保posts目录存在否则writeFileSync会报错。上线前我会过一遍这个检查清单检查项合格标准所有页面标题每页title不同包含文章名图片 alt每张图都有 alt 属性链接没有href#占位链接移动端600px 宽度下无横向滚动控制台无红色报错加载速度首屏图片不超过 200KB最后说一个我自己的习惯每次改完模板先在一个空白文件夹里重新复制一份模拟「新用户下载模板」的流程走一遍。如果新文件夹里打开就报错说明模板里有硬编码的绝对路径或者缺失文件。这个习惯帮我省掉了无数次「本地好好的别人一用就崩」的尴尬。希望帮到你。本文还有配套的精品资源点击获取