企业官网建设流程全解析

简介：包含10个页面的个人博客网页模板，由HTML5+CSS3+JavaScript实现，涵盖首页、登录、关于、留言以及多篇文章详情页，适合大学生HTML5期末作业、Web前端课程设计或入门练手。包体共47个文件，除10个html页面外，还配有6个css样式表、6个js脚本、多张png/jpg图片及字体图标素材，压缩包整体25.84MB，目录按css、js、img、fonts等模块组织，便于定位和二次开发。目前已有185人学习下载，人气在同类资源中较突出。这套模板完整呈现个人博客的前端实现流程，集成Bootstrap、jQuery与Vue等常用库，包含轮播图、表单登录、文章列表、图片展示等交互模块；无论是期末答辩、复习前端知识，还是快速获得可直接运行的网页模板，都能据此快速搭建、修改并理解各文件之间的协作方式。

1. 用 html+css+js 网页设计做 10 个页面，期末作业的核心不是页面数量

“个人博客 10 个页面”听起来需要堆出十份互不相关的 HTML，但多数大学生期末作业被扣分，恰恰不是因为页面少，而是因为 10 个页面结构各自为政，CSS 重复定义了七八次，JS 散落在每个页面的 script 标签里，评委点开第二个页面就没了继续看下去的欲望。真正要解决的问题不是“做 10 个页面”，而是“做一套能支撑 10 个页面的 html+css+js 网页设计规范”。我会按结构拆分、CSS3 变量统一样式、JavaScript 交互补位、批量扩页、提交前验证这条线展开。适合刚写完零散页面想整体收口的同学，也适合前端实习生快速看懂一套成品级博客的最小落地路径。

2. html 网页制作：个人博客 10 个页面的拆分与目录结构

2.1 页面怎么拆：列表页、详情页、功能页各占几席

10 个页面不是随意凑数，拆页之前先弄清博客系统的内容模型。个人博客常见内容无非文章、作品、相册、留言，外加自我展示。一个标准拆法是把 10 个页面分成三类：列表页负责展示多个条目，详情页负责展示单个条目，功能页负责完成某个动作。

这样拆的好处是：重复工作量集中在导航、页脚、卡片组件上，差异化工作量集中在列表页与详情页的正文结构上。老师看作业时，会先点首页、再点一个列表页和一个详情页，然后点留言板看交互，这三类页面做好了，剩余页面只是同一套组件换内容。

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 class="site-header"> <div class="container"> <a href="index.html" class="logo">Mi·Blog</a> <nav class="main-nav" id="mainNav"> <a href="index.html">首页</a> <a href="blog.html">博客</a> <a href="works.html">作品</a> <a href="gallery.html">相册</a> <a href="message.html">留言</a> <a href="about.html">关于</a> </nav> <button class="nav-toggle" id="navToggle" type="button">菜单</button> </div> </header> <!-- footer：每个页面都在 body 结尾复制这段 --> <footer class="site-footer"> <div class="container"> <p class="copyright">© <span id="year">2024</span> Mi·Blog</p> </div> </footer>

这段模板里的按钮文本用“菜单”而不是图标符号，是为了避免不同系统显示差异。nav 里的链接用了相对路径，保证整个目录整体搬迁时链接仍然有效。复制模板后，每个页面只需要改两处：页面的 title 和导航中当前页对应的链接类名。比如在 blog.html 里，给“博客”这个 a 标签加上 class="active"，CSS 就会把当前菜单项高亮成按钮样式，用户马上知道自己在哪个栏目。

这个阶段追求的目标是：任意打开 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 特性的加分组合可以做成一张速查表，写作品说明时直接引用：

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 id="msgForm" novalidate> <label for="name">昵称</label> <input type="text" id="name" placeholder="你的昵称" required> <label for="email">邮箱</label> <input type="email" id="email" placeholder="you@example.com" required> <label for="content">留言内容</label> <textarea id="content" rows="5" placeholder="想说的话" required></textarea> <p id="formTip" aria-live="polite"></p> <button type="submit">提交留言</button> </form>

var 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 个页面逐个过一遍，整个检查流程熟悉的话十分钟可以跑完。

动态算当前导航高亮的函数挂在 DOMContentLoaded 里，file 协议和 http 协议行为一致，这是 10 个页面最值得优先验证的公共逻辑。把 console 里任何一条报错都修掉再提交，比写一段“本系统功能完善”说明更有说服力。

本文还有配套的精品资源，点击获取