简介这是一套面向大学生网页设计课程与期末大作业的静态网站模板合集涵盖个人主页、个人博客等常见题材适合刚接触前端、需要快速完成HTML作业的初学者参考与二次修改。压缩包共4261个文件约142.4MB其中html页面243个、css样式411个、js脚本481个另有jpg、png、gif等图片素材及woff、ttf字体文件并包含scss、less预编译源码与少量docx说明文档整体采用divcss框架编写结构规整、便于拆解学习。目前已有22943人学习下载资源经过较多同学验证。使用者可直接挑选合适模板替换文字与图片也能借此熟悉页面布局、样式组织与交互脚本的写法理解导航、轮播、表单等常见模块的实现思路从而高效完成课程作业并积累前端基础经验。1. 从一份“能直接交作业”的静态网页说起个人博客模板到底长什么样如果你正在搜“网页制作 网页模板 个人网页设计 个人网页制作 期末大作业”大概率不是想从零学 HTML而是想找一份结构清楚、能跑起来、还能改出自己名字的静态个人网页作品。这份资源就是干这个的一套纯静态 HTML 个人博客模板打开index.html就能看到完整页面不需要装 Node、不需要配数据库浏览器双击就能预览。它适合两类人一类是刚学完 HTMLCSS、需要一份完整作品交期末大作业的大学生另一类是想快速搭个人主页、又不想被框架绑架的开发者。我拿到这份模板的第一反应是——它把“个人博客”拆成了首页、关于我、文章列表、文章详情四个页面每个页面都是独立 HTML改起来不用怕牵一发动全身。2. 项目结构与技术选型为什么它敢叫“简单静态HTML个人网页作品”2.1 目录结构一眼看清每个文件该放什么拿到源码包后我习惯先tree一下Windows 下用dir /s /b这份模板的目录层级非常浅没有嵌套三层的assets再分css/js/img的复杂结构而是把静态资源平铺在根目录下对新手极其友好。常见做法是personal-blog/ ├── index.html # 首页个人简介 最新文章卡片 ├── about.html # 关于我技能栈、经历时间线 ├── blog.html # 文章列表页所有文章摘要 ├── post.html # 文章详情页单篇正文 ├── css/ │ ├── style.css # 全站主样式 │ └── responsive.css # 移动端断点样式 ├── js/ │ └── main.js # 导航高亮、返回顶部、简单交互 └── images/ ├── avatar.jpg # 头像 └── banner.jpg # 首页横幅这个结构的好处是你交作业时老师问“CSS 在哪”你直接指css/style.css你想换头像只动images/avatar.jpg一个文件。我一般会建议在根目录再加一个README.md写清楚每个页面改哪一行但这份模板本身没带属于可以自己补的加分项。2.2 技术选型没有构建工具反而成了优势这份模板没有用 Vue、React也没有用 Bootstrap 或 Tailwind而是手写 CSS 原生 JavaScript。为什么这样选因为“期末大作业”场景下老师往往要求你讲清楚每一行代码的作用引入框架反而说不清。原生 JS 只做了三件事导航栏当前页高亮、点击返回顶部、移动端菜单展开。代码量很小但足够让页面“活”起来。// js/main.js // 1. 导航高亮根据当前 URL 判断哪个菜单项加 active 类 const currentPage window.location.pathname.split(/).pop() || index.html; document.querySelectorAll(.nav-link).forEach(link { if (link.getAttribute(href) currentPage) { link.classList.add(active); // 给当前页菜单加高亮样式 } }); // 2. 返回顶部监听滚动超过 300px 显示按钮 const backToTop document.getElementById(backToTop); window.addEventListener(scroll, () { backToTop.style.display window.scrollY 300 ? block : none; }); backToTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); // 平滑滚动 });逻辑说明第一段用window.location.pathname拿到当前文件名和导航链接的href比对匹配就加active类这样切页面时菜单高亮不会错。第二段监听scroll事件滚动超过 300 像素才显示返回顶部按钮点击后调用scrollTo平滑回顶。参数怎么改300这个阈值可以按你页面长度调整页面长就改大页面短就改小behavior: smooth如果浏览器兼容性要求高可以换成auto。2.3 页面布局用 Flexbox 还是 Grid模板里首页的文章卡片列表用的是 CSS Grid因为卡片需要等宽排列、自动换行导航栏和页脚用的是 Flexbox因为需要水平分布、垂直居中。这是很标准的选型Grid 管二维布局Flexbox 管一维布局。如果你要改卡片列数找到style.css里的.post-grid/* css/style.css */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 自动填充最小280px */ gap: 24px; /* 卡片间距 */ }auto-fill表示尽可能多地放列minmax(280px, 1fr)表示每列最小 280 像素、最大占满剩余空间。你把280px改成320px卡片就会变大、列数变少改成240px列数变多。gap控制间距改大改小都直观。这个写法比写死grid-template-columns: repeat(3, 1fr)更灵活因为它在小屏幕上会自动变成一列不用额外写媒体查询。3. 本地跑起来与页面改造从“能看”到“像自己的作品”3.1 三种运行方式双击、Live Server、本地服务器这份模板是纯静态的运行方式极其简单。第一种直接双击index.html浏览器会以file://协议打开所有页面都能看但如果你以后想加fetch请求加载文章数据file://协议会被浏览器拦截这是常见坑。第二种用 VS Code 装 Live Server 插件右键index.html选“Open with Live Server”它会起一个本地服务器并支持热更新改完 CSS 保存浏览器自动刷新写作业效率最高。第三种如果你装了 Python在项目根目录执行# Python 3 自带 http.server端口 8000 python -m http.server 8000然后浏览器访问http://localhost:8000。这种方式最接近真实部署环境也方便你后面用手机连同一 WiFi 预览移动端效果。我一般会推荐 Live Server因为它零配置但如果你要模拟线上路径用 Python 起服务更稳。3.2 改内容把“张三”换成你的名字把示例文章换成你的文章模板里的文字都是占位内容改起来就是全局搜索替换。以index.html为例首页横幅区域通常长这样!-- index.html 首页横幅 -- section classbanner img srcimages/banner.jpg alt首页横幅 classbanner-img div classbanner-text h1你好我是张三/h1 p一名热爱前端开发的大学生/p a hrefabout.html classbtn了解更多/a /div /section你要改的就是h1里的名字、p里的简介、a的跳转目标。注意alt属性别删它是图片加载失败时的替代文字也是无障碍访问的基本要求。文章列表页blog.html里每个卡片对应一篇文章复制一个article块就能新增一篇改href指向新的详情页或者统一指向post.html再用 JavaScript 根据 URL 参数加载不同内容——但那是进阶做法交作业阶段直接复制post.html改名更省事。3.3 改样式换配色、换字体、换圆角模板的配色变量通常写在style.css顶部用 CSS 自定义属性管理/* css/style.css 顶部变量 */ :root { --primary-color: #2c3e50; /* 主色深蓝灰 */ --accent-color: #3498db; /* 强调色亮蓝 */ --text-color: #333; /* 正文颜色 */ --bg-color: #f9f9f9; /* 背景色 */ --border-radius: 8px; /* 全局圆角 */ }改配色只动这几个值全站生效。比如把--accent-color改成#e74c3c按钮和链接高亮就变红色把--border-radius改成0所有卡片和按钮变直角。字体在body里设置body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; color: var(--text-color); background-color: var(--bg-color); }这个字体栈优先用系统字体加载快、不依赖外部字体文件。如果你想用中文字体可以在前面加Microsoft YaHei, PingFang SC但注意不同系统渲染效果有差异交作业前最好在教室电脑上预览一遍。4. 避坑与常见问题我踩过的五个坑你别再踩4.1 图片路径大小写不一致本地能看线上 404现象本地 Windows 双击打开正常传到服务器或 GitHub Pages 后图片全裂。原因Windows 文件系统不区分大小写Linux 服务器区分。你写images/Avatar.jpg实际文件是avatar.jpg本地能找到线上就 404。解决统一用小写字母命名所有文件和文件夹引用时严格一致。我一般会在改完路径后用 VS Code 的“查找所有引用”再核对一遍。4.2 中文乱码忘了写meta charsetUTF-8现象页面中文显示成“锟斤拷”或问号。原因HTML 文件保存编码和浏览器解析编码不一致。解决每个 HTML 文件的head第一行必须写meta charsetUTF-8并且用 VS Code 保存时确认右下角编码是 UTF-8 而不是 GBK。如果已经乱码用 VS Code 重新以 UTF-8 保存即可但记得先备份。4.3 移动端没反应少了 viewport meta 标签现象手机上打开页面字小得看不清要双指放大。原因没有告诉浏览器按设备宽度渲染。解决在head里加meta nameviewport contentwidthdevice-width, initial-scale1.0。这行代码是移动端适配的前提加了之后responsive.css里的媒体查询才会按预期生效。检查方法浏览器 F12 切到手机模式看页面是否自动缩放。4.4 导航高亮失效href写成了绝对路径现象点击菜单切换页面后当前页没有高亮。原因main.js里用window.location.pathname.split(/).pop()取文件名如果你href写的是/about.html或https://xxx/about.html取出来的可能不是about.html。解决导航链接统一用相对路径about.html不要以/开头。如果你必须用绝对路径就改 JS 逻辑用endsWith匹配。4.5 交作业前发现控制台报错某个 JS 文件 404现象F12 控制台红色报错GET file:///.../js/main.js net::ERR_FILE_NOT_FOUND。原因script srcjs/main.js的路径写错或者文件被误删。解决检查js文件夹是否存在、文件名是否拼错。如果暂时不需要 JS 交互可以先注释掉script标签但导航高亮和返回顶部会失效。我一般会在交作业前把控制台清空确保没有红色报错再打包。5. 二次开发与改造思路让模板真正变成你的作品5.1 把静态文章改成 JSON 驱动方便批量管理模板原本每篇文章都是一个独立 HTML改十篇就要开十个文件。如果你想让作业看起来更“工程化”可以把文章数据抽成posts.json用fetch加载后动态渲染列表。常见做法是// js/blog.js 动态加载文章列表 fetch(data/posts.json) .then(res res.json()) .then(posts { const grid document.querySelector(.post-grid); posts.forEach(post { const card document.createElement(article); card.className post-card; card.innerHTML h3${post.title}/h3 p${post.summary}/p a hrefpost.html?id${post.id}阅读全文/a ; grid.appendChild(card); }); }) .catch(err console.error(文章加载失败, err));逻辑说明fetch请求data/posts.json拿到数组后遍历为每篇文章创建卡片并插入.post-grid。参数说明post.id用于详情页通过 URL 参数读取对应文章post.title和post.summary对应 JSON 里的字段。注意这种方式必须用本地服务器打开Live Server 或python -m http.server双击file://会被 CORS 拦截。改造后你新增文章只需改 JSON不用复制 HTML作业答辩时也更好讲。5.2 加一个暗色模式切换成本低但效果明显暗色模式是这两年个人主页的常见需求实现起来不难。在style.css里定义暗色变量用body.dark覆盖body.dark { --bg-color: #1a1a1a; --text-color: #e0e0e0; --primary-color: #ecf0f1; }然后在页面右上角加一个按钮JS 里切换body的dark类并用localStorage记住用户选择const toggle document.getElementById(themeToggle); if (localStorage.getItem(theme) dark) { document.body.classList.add(dark); } toggle.addEventListener(click, () { document.body.classList.toggle(dark); localStorage.setItem(theme, document.body.classList.contains(dark) ? dark : light); });这样刷新页面后主题不会丢。注意暗色模式下图片如果太亮会刺眼可以给img加filter: brightness(0.8)但头像一般不加自己权衡。5.3 部署上线GitHub Pages 或任意静态托管静态模板部署最简单的方式是 GitHub Pages新建仓库把文件推上去在 Settings 里开启 Pages选main分支根目录几分钟后就能通过https://你的用户名.github.io/仓库名/访问。如果你不想用 GitHub国内也有静态托管服务上传文件即可。部署前记得把index.html里的示例链接换成自己的把images里的占位图换成真实图片。我一般会在部署后手机、平板、电脑各开一遍确认响应式断点没翻车。5.4 一个我常犯的错误改完 CSS 忘了清缓存有次我改完style.css部署上去浏览器死活不更新我以为代码写错了排查半小时才发现是浏览器缓存了旧 CSS。从那以后我每次改样式都强制走一遍CtrlF5硬刷新或者在style.css引用后面加版本号style.css?v2。这个习惯帮我省了很多“玄学”调试时间。希望这份模板能帮你顺利跑起来改出属于自己的个人网页作品。本文还有配套的精品资源点击获取