简介包含10个页面的个人博客网页模板由HTML5CSS3JavaScript实现涵盖首页、登录、关于、留言以及多篇文章详情页适合大学生HTML5期末作业、Web前端课程设计或入门练手。包体共47个文件除10个html页面外还配有6个css样式表、6个js脚本、多张png/jpg图片及字体图标素材压缩包整体25.84MB目录按css、js、img、fonts等模块组织便于定位和二次开发。目前已有185人学习下载人气在同类资源中较突出。这套模板完整呈现个人博客的前端实现流程集成Bootstrap、jQuery与Vue等常用库包含轮播图、表单登录、文章列表、图片展示等交互模块无论是期末答辩、复习前端知识还是快速获得可直接运行的网页模板都能据此快速搭建、修改并理解各文件之间的协作方式。1. 用 htmlcssjs 网页设计做 10 个页面期末作业的核心不是页面数量“个人博客 10 个页面”听起来需要堆出十份互不相关的 HTML但多数大学生期末作业被扣分恰恰不是因为页面少而是因为 10 个页面结构各自为政CSS 重复定义了七八次JS 散落在每个页面的 script 标签里评委点开第二个页面就没了继续看下去的欲望。真正要解决的问题不是“做 10 个页面”而是“做一套能支撑 10 个页面的 htmlcssjs 网页设计规范”。我会按结构拆分、CSS3 变量统一样式、JavaScript 交互补位、批量扩页、提交前验证这条线展开。适合刚写完零散页面想整体收口的同学也适合前端实习生快速看懂一套成品级博客的最小落地路径。2. html 网页制作个人博客 10 个页面的拆分与目录结构2.1 页面怎么拆列表页、详情页、功能页各占几席10 个页面不是随意凑数拆页之前先弄清博客系统的内容模型。个人博客常见内容无非文章、作品、相册、留言外加自我展示。一个标准拆法是把 10 个页面分成三类列表页负责展示多个条目详情页负责展示单个条目功能页负责完成某个动作。页面文件名在这个博客里的职责首页index.html全站入口聚合最新文章标题、作品缩略图关于页about.html个人介绍、联系方式、技能标签博客列表blog.html文章标题列表带分类筛选锚点文章详情post.html一篇完整文章的正文排版评论区占位作品集works.html卡片网格展示项目、比赛或课程设计相册页gallery.htmlCSS Grid 图片墙点击放大占位留言板message.html表单包含昵称、邮箱、留言内容时间线timeline.html学习经历、项目节点纵向时间线收藏夹links.html常用学习资源、站内导航锚点简历页resume.html教育经历、技能列表、获奖信息表格这样拆的好处是重复工作量集中在导航、页脚、卡片组件上差异化工作量集中在列表页与详情页的正文结构上。老师看作业时会先点首页、再点一个列表页和一个详情页然后点留言板看交互这三类页面做好了剩余页面只是同一套组件换内容。2.2 目录怎么组织css / js / images 三层分家页面之间反复复制粘贴最忌讳把样式全写在一个 style 标签里。我一般会建一个干净的工程目录让评审在资源管理器里一眼看出这个项目是有规划的。blog-site/ ├── index.html ├── about.html ├── blog.html ├── post.html ├── works.html ├── gallery.html ├── message.html ├── timeline.html ├── links.html ├── resume.html ├── css/ │ ├── base.css # 重置样式与基础排版 │ ├── common.css # 导航、页脚、按钮、卡片等共用组件 │ └── page.css # 各页面差异样式按页面分组写注释 ├── js/ │ └── main.js # 导航高亮、返回顶部、表单校验、预留数据接口 ├── images/ │ ├── avatar.jpg │ ├── blog-1.jpg │ └── work-1.jpg └── assets/ └── favicon.ico # 可选浏览器标签页图标三个 CSS 文件的拆分逻辑很简单base.css 决定全站一致的排版基线比如字体、行高、容器宽度common.css 管理组件比如导航和卡片page.css 专门容纳每个页面不一样的布局。这种三行模式的 css 文件结构比单个全量 style.css 更好维护。js 只留一个 main.js所有交互按功能写注释分段避免 10 个页面里出现 10 段互不相干的 JS 脚本。提示不要用 fetch 去动态加载公共头部和页脚因为用浏览器直接双击打开 HTML 时file:// 协议下 fetch 会被跨域拦截作业现场打不开会很尴尬。10 个页面用静态复制成本最低也最稳。2.3 公共导航与页脚的 HTML 模板每个页面都需要重复的公共结构是 header 和 footer。先把它们固化成一段固定 HTML复制到 10 个页面的同一个位置。!-- header每个页面都在 body 开头复制这段 -- header classsite-header div classcontainer a hrefindex.html classlogoMi·Blog/a nav classmain-nav idmainNav a hrefindex.html首页/a a hrefblog.html博客/a a hrefworks.html作品/a a hrefgallery.html相册/a a hrefmessage.html留言/a a hrefabout.html关于/a /nav button classnav-toggle idnavToggle typebutton菜单/button /div /header !-- footer每个页面都在 body 结尾复制这段 -- footer classsite-footer div classcontainer p classcopyright© span idyear2024/span Mi·Blog/p /div /footer这段模板里的按钮文本用“菜单”而不是图标符号是为了避免不同系统显示差异。nav 里的链接用了相对路径保证整个目录整体搬迁时链接仍然有效。复制模板后每个页面只需要改两处页面的 title 和导航中当前页对应的链接类名。比如在 blog.html 里给“博客”这个 a 标签加上 classactiveCSS 就会把当前菜单项高亮成按钮样式用户马上知道自己在哪个栏目。这个阶段追求的目标是任意打开 10 个页面中的任意一个导航和页脚看起来完全一致只是内容区不同。一致本身就是网页设计成品感的重要来源比页面数量更能让老师觉得这是一个完整站点。3. CSS3 变量与响应式10 个页面共用一套样式体系3.1 用 CSS 变量统一颜色、圆角、阴影如果 10 个页面各自写颜色值调一次主题色就要全局搜索替换。CSS3 自定义属性也就是常说的 CSS 变量可以把设计规范收敛到 :root 里这个博客的整体视觉基调由这一处决定。/* css/base.css */ :root{ --bg: #f5f6f8; /* 全站背景 */ --card: #ffffff; /* 卡片底色 */ --text: #2b2f36; /* 主文字色 */ --primary: #2563eb; /* 主题色用于按钮和导航高亮 */ --radius: 12px; /* 统一圆角 */ --shadow: 0 4px 12px rgba(0, 0, 0, .08); --space: 24px; /* 卡片内边距和区块间距 */ } *{ margin: 0; padding: 0; box-sizing: border-box; } html{ scroll-behavior: smooth; /* 锚点跳转带平滑滚动 */ } body{ font-family: PingFang SC, Microsoft YaHei, system-ui, sans-serif; line-height: 1.7; color: var(--text); background: var(--bg); } .container{ width: min(1080px, 92%); margin-inline: auto; /* 水平居中替代 margin: 0 auto */ }参数说明里比较值得记的是 width: min(1080px, 92%)它会取 1080px 和视口宽度 92% 中较小的一个大屏固定居中、小屏自适应变窄一行代码完成了原先 max-width 加 width 百分比的组合写法。margin-inline: auto 是逻辑属性效果等同于 margin-left: auto 加 margin-right: auto。font-family 的回退列表里放了系统字体不需要引入任何外部字体文件离线也能正常显示。3.2 导航、卡片、正文排版三个组件的关键样式公共组件交给 common.css 管理。最容易被追问的三个组件是导航、卡片、文章正文标题。导航的 hover 反馈和 active 状态要清晰卡片 hover 要有轻微上浮正文标题要用左边框区分层级。/* css/common.css */ .main-nav a{ color: var(--text); text-decoration: none; padding: 8px 16px; border-radius: 8px; transition: background .2s, color .2s; } .main-nav a:hover{ background: rgba(37, 99, 235, .08); color: var(--primary); } .main-nav a.active{ background: var(--primary); color: #fff; } .card{ background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space); } .card:hover{ transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); transition: transform .25s ease, box-shadow .25s ease; } .post-body h2{ font-size: 1.5rem; margin: 1.5em 0 .5em; padding-left: .75em; border-left: 4px solid var(--primary); } .post-body p{ margin: .9em 0; text-align: justify; /* 两端对齐正文更整齐 */ }这里的大多数效果都是把样式写在 :hover 上也就是用 CSS 实现鼠标移入事件完全不需要 JS 参与。写这些 hover 效果时习惯是把 transition 写在元素默认态transform 写在 hover 态避免页面加载时所有卡片一起做一次入场动画。text-align: justify 只对正文段落生效标题和导航不用两端对齐。3.3 响应式断点移动端浏览器预览是加分项期末作业若只用电脑看响应式不是硬性要求但做上移动端适配往往会在作品说明里写成亮点。个人博客的断点不需要分得太细两档即可。/* css/page.css 末尾或 common.css 移动端适配片段 */ media (max-width: 768px){ .container{ width: 94%; } .main-nav{ display: none; /* 默认隐藏导航菜单 */ flex-direction: column; background: var(--card); box-shadow: var(--shadow); padding: 12px; border-radius: var(--radius); } .main-nav.open{ display: flex; /* JS 切换 .open 后展开 */ } .nav-toggle{ display: inline-block; } } media (min-width: 769px){ .nav-toggle{ display: none; /* 桌面端隐藏菜单按钮 */ } }断点选 768px 是因为它能覆盖绝大多数手机横竖屏。768px 以下用 .open 类切换菜单显隐769px 以上直接平铺导航。main.js 会负责给按钮绑定点击事件这也就是移动端菜单切换逻辑。CSS3 特性的加分组合可以做成一张速查表写作品说明时直接引用CSS3 能力写法在作业里的落点自定义属性:root 变量全站主题色、圆角、阴影统一Flex 布局display: flex导航栏、卡片列表横向排列Grid 布局display: grid相册页、作品集的网格排列过渡与变形transition / transform卡片悬浮上浮、按钮反馈媒体查询media移动端菜单与单列布局4. JavaScript 交互实现导航高亮、返回顶部、表单校验4.1 自动高亮当前导航省去 10 次手改静态 HTML 里给每个页面的当前菜单加 active 类工作量不大但容易漏。比较聪明的做法是把这件事交给 main.js由脚本根据当前文件名自动匹配导航链接。/* js/main.js */ document.addEventListener(DOMContentLoaded, function () { var path location.pathname.split(/).pop() || index.html; var links document.querySelectorAll(.main-nav a); for (var i 0; i links.length; i) { var href links[i].getAttribute(href); if (href path) { links[i].classList.add(active); } } });location.pathname.split(/).pop() 的作用是从当前 URL 中取出文件名比如 /blog-site/blog.html 会得到 blog.html。lar游玩的时候如果直接用 file:// 打开pathname 同样以文件名结尾所以这个写法在本地双击和部署到服务器后行为一致。这段代码代替了每个页面手动维护 active 的工作10 个页面即使复制遗漏评审点开后高亮也正确。4.2 回到顶部按钮兼容平滑滚动与老旧浏览器返回顶部是网页设计中常见的小交互但不同浏览器对 smooth 的支持程度不一样。只用 window.scrollTo 加 behavior: smooth 在大部分现代浏览器没问题最后再补一个降级方案避免个别环境下点击后无反应。var backTop document.getElementById(backTop); window.addEventListener(scroll, function () { var y window.scrollY || document.documentElement.scrollTop; backTop.classList.toggle(show, y 400); }, { passive: true }); backTop.addEventListener(click, function () { if (scrollBehavior in document.documentElement.style) { window.scrollTo({ top: 0, behavior: smooth }); } else { var timer setInterval(function () { var now window.scrollY || document.documentElement.scrollTop; if (now 0) { clearInterval(timer); return; } window.scrollTo(0, now - Math.max(now / 8, 40)); }, 16); } });监听器加上了 passive: true告诉浏览器这个事件里不会调用 preventDefault滚动监听不阻塞主线程。classList.toggle(show, y 400) 的第二个参数是布尔值条件成立时自动加类不成立时移除不需要自己写 if 分支。返回顶部按钮必须一开始就存在于 HTML 中否则点击事件绑定会因获取不到元素而报错。按钮默认用 opacity 和 visibility 隐藏出现时通过 .show 类切换而不是用 display:none这样过渡动画更顺滑。配套的按钮样式可以放在 common.css 里.back-top{ position: fixed; right: 24px; bottom: 32px; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; } .back-top.show{ opacity: 1; visibility: visible; }4.3 留言表单校验正则与文本写入的正确姿势留言板页面的表单如果没有后端接收至少要有前端校验。评阅老师会尝试不填信息直接点提交此时页面必须给出明确反馈。js 里用正则判断邮箱格式是比字符串 includes 更完整的做法。!-- message.html 中的表单核心结构 -- form idmsgForm novalidate label forname昵称/label input typetext idname placeholder你的昵称 required label foremail邮箱/label input typeemail idemail placeholderyouexample.com required label forcontent留言内容/label textarea idcontent rows5 placeholder想说的话 required/textarea p idformTip aria-livepolite/p button typesubmit提交留言/button /formvar form document.getElementById(msgForm); form.addEventListener(submit, function (e) { e.preventDefault(); var name document.getElementById(name).value.trim(); var email document.getElementById(email).value.trim(); var content document.getElementById(content).value.trim(); var tip document.getElementById(formTip); if (!name || !content) { tip.textContent 请填写昵称和留言内容; tip.style.color #dc2626; return; } if (!/^[^\s][^\s]\.[^\s]$/.test(email)) { tip.textContent 邮箱格式不正确; tip.style.color #dc2626; return; } tip.textContent 提交成功我会在邮箱里回复你。; tip.style.color var(--primary); form.reset(); });表单里加了 novalidate 属性目的是禁用浏览器默认提示气泡让错误提示在页面内部统一展示样式更受控。正则 /^[^\s][^\s].[^\s]$/ 的意思是不含空格和 开头、含有 、 后必须有内容且带点号这个层级满足作业演示已经足够。文字反馈用 textContent 而不是 innerHTML可以避免用户输入的内容被当成 HTML 解析这是容易被追问的一个安全点。注意表达错误信息时统一用 alert 也可以但建议往页面里写提示因为评阅老师更愿意看到页面内反馈而且 alert 每点一次都要关窗口体验不太专业。5. Web 前端开发期末大作业提交前验证10 个页面的本地检查技巧5.1 本地起服务别只靠双击打开一个很容易踩的坑是双击 HTML 直接看没报错就认为作业没问题。个人博客页面里如果只有静态内容双击确实能看但如果后面加了 fetch 读取 JSON 数据的扩展file:// 协议下所有 AJAX 都会失效。正确的验证方式是起一个本地静态服务。cd blog-site python -m http.server 8080然后在浏览器地址栏输入 http://localhost:8080从首页之后依次点击 10 个页面观察页面切换与锚点跳转是否正常。起服务与双击看到的界面一致但网络协议行为更接近真实部署环境能提前发现相对路径和异步请求的问题。5.2 一站式检查 10 个页面批量检查时不能只打开一个页面就下结论。我一般会按下面这张表10 个页面逐个过一遍整个检查流程熟悉的话十分钟可以跑完。检查项方法常见的漏改现象标题看每个页面的 document.title10 个页面标题全叫“个人博客”导航高亮打开页面看当前菜单是否有 active 类两个菜单同时高亮图片资源控制台切 Network刷新看 404 项img 路径错误、文件名大小写不一致控制台报错F12 打开 Console记录报错数量变量未定义、id 拼写不一致编码检查中文是否乱码文件保存成了非 UTF-8 编码HTML5 语义检查是否有 header、main、article、footer整页全部用 div 嵌套响应式按 F12 切设备工具栏到手机宽度导航不收起、卡片溢出动态算当前导航高亮的函数挂在 DOMContentLoaded 里file 协议和 http 协议行为一致这是 10 个页面最值得优先验证的公共逻辑。把 console 里任何一条报错都修掉再提交比写一段“本系统功能完善”说明更有说服力。本文还有配套的精品资源点击获取