使用 HTML、CSS 和 Bootstrap 构建含10个页面的前端毕业设计：实战架构与工程化实践-编程实验室

使用 HTML、CSS 和 Bootstrap 构建含10个页面的前端毕业设计：实战架构与工程化实践

摘要：很多前端初学者在毕业设计里“页面一多就乱”，重复代码、响应式错位、后期改一行动全身。本文用纯 HTML/CSS/Bootstrap 技术栈，从 0 到 1 交付一个含 10 个页面的真实毕业项目，分享模块化组织、统一布局模板、语义化命名、无障碍与性能细节，并给出可直接套用的工程模板。读完即可动手复刻，也能无缝迁移到自己的校园作品或小型官网。

一、背景痛点：为什么 10 个页面就能让人崩溃？

复制粘贴式开发
很多同学把“首页.html”另存为“关于我们.html”，然后手动改导航高亮，结果 10 个文件里 9 份<header>代码，导师让把 Logo 换大 5 px，瞬间改到怀疑人生。
响应式“随缘”
自己写媒体查询时，常常min-width与max-width区间没对齐，iPad 横屏瞬间导航栏折行；Bootstrap 的container和row嵌套层级随意，栅格直接失效。
路径地狱
本地file://打开一切正常，丢到服务器/project/子目录后，CSS、JS、图片 404，答辩现场当场社死。
可访问性 0 分
图片无alt、按钮用<div>、颜色对比度 2:1，评审老师打开屏幕阅读器直接“静音”，直接扣印象分。

痛点的本质：缺少“工程化思维”。毕业设计虽然小，但“多页面 + 零构建工具”场景，反而最适合练手“原生前端工程化”。

二、技术选型：为什么只选 HTML + CSS + Bootstrap？

无构建依赖，0 配置
校园网拉个 200 MB 的 Node 安装包都卡，直接双击打开就能跑，最稳。
Bootstrap 5 栅格 + 组件 = 快速出活
- 栅格系统：12 栏响应式，把“写媒体查询”变成“拼类名”。
- 组件：导航、轮播、卡片、模态框全部自带，无需重复造轮子。
- Utility：d-flex、justify-content-center等原子类，让“垂直居中”不再玄学。
纯原生便于“秀基础”
毕业答辩评委更想看你“语义化标签、CSS 命名规范、无障碍细节”，而不是“Vue 生命周期背得溜”。用原生技术能把基本功亮出来，反而加分。

三、整体架构：先搭好“骨架”再填肉

project/ ├─ index.html // 首页 ├─ pages/ // 其余 9 页面 │ ├─ about.html │ ├─ service.html │ ├─ gallery.html │ ├─ blog.html │ ├─ post.html │ ├─ contact.html │ ├─ login.html │ ├─ dashboard.html │ └─ 404.html ├─ assets/ │ ├─ css/ │ │ ├─ main.css // 自定义覆盖 │ ├─ img/ │ ├─ js/ │ │ ├─ include.js // 统一加载 header/footer ├─ components/ │ ├─ header.html │ └─ footer.html └─ README.md

统一布局模板
利用fetch()在页面加载时把header.html、footer.html注入，保证“一改全站”。
命名规范（BEM 轻量版）

块：.block
元素：.block__element
修饰：.block--modifier

示例：.hero__title、.btn--primary，一眼看懂层级，避免嵌套地狱。

页面跳转逻辑
全部使用相对路径，配合<base>标签解决子目录问题：

<base href="/project/">

导航高亮用data-page属性 + JS 比对当前路径，自动加.active类，无需手写。

四、关键页面代码示例（Clean Code + 中文注释）

以下示例均基于 Bootstrap 5.3，直接复制即可跑通。

1. 首页 index.html（核心落地页）

<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>校园二手书交易平台</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <base href="/project/"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="assets/css/main.css" rel="stylesheet"> </head> <body>…(header 注入同首页，略)… <main class="container py-5"> <h1 class="mb-4">联系我们</h1> <form action="https://formspree.io/f/your-id" method="POST" class="needs-validation" novalidate> <div class="row"> <div class="col-md-6 mb-3"> <label for="name" class="form-label">姓名</label> <input type="text" class="form-control" id="name" required> <div class="invalid-feedback">请填写姓名</div> </div> <div class="col-md-6 mb-3"> <label for="email" class="form-label">邮箱</label> <input type="email" class="form-control" id="email" required> </div> </div> <div class="mb-3"> <label for="msg" class="form-label">留言</label> <textarea class="form-control" id="msg" rows="4" required></textarea> </div> <button class="btn btn-primary" type="submit">发送</button> </form> </main> <script> /* Bootstrap 原生验证触发 */ Array.from(document.querySelectorAll('.needs-validation')).forEach(form=>{ form.addEventListener('submit',e=>{ if(!form.checkValidity()){ e.preventDefault(); e.stopPropagation(); } form.classList.add('was-validated'); },false); }); </script>

3. 数据展示页 dashboard.html（静态表格 + 响应式卡片双视图）

… <section class="container py-5"> <h1 class="mb-4">我的订单</h1> <!-- 大屏表格 / 小屏卡片 --> <div class="d-none d-md-block"> <table class="table table-hover align-middle"> <thead><tr><th>订单号</th><th>书名</th><th>状态</th><th>操作</th></tr></thead> <tbody> <tr> <td>2024051801</td><td>《深入理解计算机系统》</td> <td><span class="badge bg-success">已完成</span></td> <td><a href="post.html" class="btn btn-sm btn-outline-primary">查看</a></td> </tr> … </tbody> </table> </div> <!-- 卡片视图，仅小屏显示 --> <div class="row g-3 d-md-none"> <div class="col-12"> <div class="card"> <div class="card-body"> <h5 class="card-title">《深入理解计算机系统》</h5> <p class="mb-1">订单号：2024051801</p> <p class="mb-2">状态：<span class="badge bg-success">已完成</span></p> <a href="post.html" class="btn btn-sm btn-primary">查看详情</a> </div> </div> </div> </div> </section>

通过“桌面表格 + 移动卡片”一套数据两种皮肤，既炫技又实用。

五、性能与无障碍：让评委挑不出刺

资源加载
- CSS 放顶部，JS 放底部，避免渲染阻塞。
- 图片统一<img loading="lazy">，Bootstrap 5 原生支持。
- 图标用 Bootstrap Icons 字体，一次加载，全站矢量。
语义化 + 无障碍
- 区域标签：<header>/<nav>/<main>/<footer>全部到位。
- 图片alt必填，按钮用<button>而非<div>。
- 色彩对比≥4.5:1，官方$primary蓝#0d6efd自带合规。
- 键盘导航：轮播加data-bs-keyboard="true"，模态框默认可聚焦。
打印友好
在main.css加一段：

@media print { .navbar,footer,.btn{display:none;} body{color:#000;background:#fff;} }

答辩 PPT 贴代码截图时，直接Ctrl+P就是整洁版面。

六、生产环境避坑指南

路径引用错误
本地../assets/css/main.css到服务器就 404。统一用<base>+ 绝对仓库根路径，或全站写/project/assets/...，再不行用location.origin动态拼。
媒体查询被覆盖
Bootstrap 自带min-width断点：576、768、992、1200、1400。自定义样式务必放在bootstrap.min.css之后，且用同等或更高优先级选择器，避免被原子类冲掉。
版本兼容性
校内老电脑自带 jQuery 3.3 与 Bootstrap 5 的data-bs-*不兼容，别混用。Bootstrap 5 已去 jQuery，直接删旧引用。
缓存导致“改了没变化”
服务器加Cache-Control: no-cache, must-revalidate，或在资源后拼?v=1.0.1版本号，演示前强制刷新。
单页注入 SEO
如果学校要求“静态文件可爬虫”，则让header.html里保留核心导航链接，其余用后端模板或预渲染。纯前端方案可用netlify+prerender插件。

七、项目截图（本地运行效果）

图：首页桌面端效果，导航高亮自动切换，轮播使用 Bootstrap 自带组件，代码零 JS 自定义。

八、可继续拓展的方向

多语言：把lang="zh-CN"抽成变量，导航文字放 JSON，切换语言按钮即可。
Dark Mode：Bootstrap 5.3 已内置data-bs-theme="dark"，加一行开关就能切。
PWA：补一个manifest.json+serviceWorker.js，离线可访问，加分项。
自动化部署：Push 到 GitHub → Vercel 自动构建，提交 PR 即可预览，演示更从容。

写完这篇，我把整套源码丢进仓库，本地Live Server一键跑通，导师看完只说一句：“页面多但代码不啰嗦，可以定稿了。” 如果你也在为“10 个页面”头秃，不妨直接 fork 模板，换色、换图、换文案，就是你的毕业设计。
动手重构 or 提 issue 交流，仓库地址等你 GitHub 搜索“bootstrap-10pages-boilerplate”，我们评论区见。