简介一套适合大学生Web前端期末作业的个人博客网页源码采用HTML5CSS3JavaScript实现共10个页面涵盖首页、关于、留言、登录、个人文章详情等模块整体风格统一功能完整可直接运行演示也便于二次开发。压缩包为zip格式共47个文件其中包括10个html结构文件、6个css样式文件、6个js交互脚本配以jpg/png图片素材、字体图标资源woff/ttf/eot/svg等并整合Bootstrap、jQuery、Vue等常用前端库整体大小约25.84MB。已有185人学习下载。对于想要在短时间内完成网页设计课程作业或独立搭建个人博客的初学者这份材料提供了清晰的项目结构和可复用的前端交互方案能帮助理解页面布局、样式适配与脚本协同开发的完整流程。1. 10 页个人博客静态站点为什么期末 HTML 作业值得这么拆拿到“个人博客10个页面”这类期末作业很多人第一反应是换个名字交差。但真正拆过之后会发现这10个页面其实浓缩了一套完整静态站点该有的东西公共导航与页脚、轮播图、文章列表、详情页、留言表单、登录页、响应式布局以及Bootstrap、jQuery、Vue混用时的真实冲突。把这些页面读透再做企业官网、活动页或后台原型效率会明显不一样。本文会从目录结构开始逐步拆到CSS覆盖、JS校验、部署路径和交作业前的检查清单适合刚学完HTML/CSS/JS的大一大二学生也适合想快速套一套个人博客模板的前端初学者。2. 目录结构与技术选型先把 10 个页面读成一张蓝图2.1 十个页面在项目里的真实分工解压“我的博客10个页面.zip”后不要急着双击index.html先把文件按原目录结构放好。原包里的10个html文件不是随便命名的index是门户about承载个人信息login负责登录message收集留言剩下的textOne到textSix是文章详情页。它们共用同一套头部、底部和大部分CSS真正不同的只是中间内容区。用表格理清分工更直观页面文件定位主要差异化内容index.html站点首页轮播图、最新文章卡片、博主信息about.html关于页个人简介、头像二维码、技能时间线login.html登录页表单校验、背景图、居中布局message.html留言板留言列表、提交表单、消息提示textOne.html文章页正文排版、标签、上一篇/下一篇textTwo.html文章页对应第二篇文章内容textThree.html文章页对应第三篇文章内容textFour.html文章页对应第四篇文章内容textFive.html文章页对应第五篇文章内容textSix.html文章页对应第六篇文章内容这个划分符合个人博客静态模板的常见习惯。文章页占了六页说明期末作业的考察重点不是信息架构多复杂而是“同一模板下内容更换”的熟练度。你改造时不需要十个页面都从零写先把index的导航栏、footer和公共样式抽出来其他页面照着替换文本和图片即可。2.2 为什么静态页面要同时引入 Bootstrap、jQuery 和 Vue看到js目录里有bootstrap.js、jquery-3.4.1.js、jquery-3.2.1.min.js和vue.js第一反应是“模板真乱”。实际上这是课程作业里常见的“全家桶”写法Bootstrap负责栅格、按钮、轮播这些组件的样式和行为jQuery负责DOM操作和已有组件初始化Vue负责小范围的数据渲染。三者不是平等关系而是“Bootstrap管外观、jQuery管交互、Vue管数据”。以首页文章列表为例如果六个文章页共用一套结构用Vue循环生成会比手写六份HTML更高效div idapp ul classlist-unstyled li v-forarticle in articles :keyarticle.id h4a :hrefarticle.url{{ article.title }}/a/h4 p{{ article.desc }}/p /li /ul /div script srcjs/vue.js/script script new Vue({ el: #app, data: { articles: [ { id: 1, title: 前端布局入门, url: textOne.html, desc: 从盒模型聊到浮动 } ] } }); /scriptv-for把视图和数据结构绑定后续增删文章只需要改articles数组不需要复制整段HTML。需要注意el指向的#app必须唯一期末作业里最常见的报错是两个容器都用了idapp导致第二个区域的点击事件失灵。这里用Vue并不是为了炫技而是让你在答辩时能说清“为什么用Vue”因为文章列表是重复结构数据驱动比手工复制更稳。2.3 从 .vscode/settings.json 和资源文件看开发习惯原目录里有一个.vscode/settings.json这类文件在换电脑或者多人协作时很有用。常见配置会锁定格式化工具、缩进大小和文件编码{ editor.tabSize: 2, editor.formatOnSave: true, files.encoding: utf8, html.format.wrapLineLength: 80 }tabSize设为2还是4看个人习惯但前后必须一致formatOnSave保存时自动格式化能避免手敲缩进不齐files.encoding强制UTF-8防止中文乱码。.vscode文件夹和.DS_Store在macOS下容易误传打包前最好清理掉否则评分老师解压后会看到一堆隐藏垃圾文件印象分降低。再看img目录lunbo1.jpg到lunbo4.jpg是轮播图boke1.png到boke6.png是博客配图message.png和qr.jpg分别用于留言图标和二维码。图片用英文小写加数字命名是静态站通用习惯避免部署到Linux服务器因为大小写不一致出现404。资源文件的命名本身就是项目规范的一部分后面部署章节会再展开。3. 拆首页轮播、卡片和 CSS 样式的实现边界3.1 栅格布局与轮播图的挂载方式index.html是整站门面也是评分老师第一眼看到的东西。它通常由导航栏、轮播区、内容卡片区和页脚组成。Bootstrap的container和row负责把页面切成12列卡片区用row包装多个col-md-4每行放三张卡小屏下自动堆叠为单列。轮播图是首页最大的动态元素。原始版本一般长这样div idcarouselExample classcarousel slide>$(#carouselExample).carousel({ interval: 3000, wrap: true });interval: 3000表示每3秒切一张wrap: true允许最后一张循环回第一张。初始化脚本要放在页面底部或者放在$(document).ready(function() { ... })中间确保DOM加载完成后再绑定。3.2 鼠标移入事件与“更多文章”模块首页卡片区常见的交互是鼠标移入时图片放大或显示遮罩层这正是热词里的“css 鼠标移入事件”。其实不一定要用JavaScript纯CSS的:hover就能完成图片缩放.article-card .card-img-wrap { overflow: hidden; } .article-card .card-img-wrap img { transition: transform 0.4s ease; } .article-card .card-img-wrap:hover img { transform: scale(1.08); }.card-img-wrap设置overflow: hidden让放大后的图片不会溢出卡片边界transition负责平滑过渡。这种用CSS实现的“伪鼠标移入事件”比频繁操作style性能更好。如果希望鼠标移入后显示一段文字摘要可以用jQuery做类名切换$(.article-card).on(mouseenter, function () { $(this).find(.article-mask).stop(true, true).fadeIn(200); }).on(mouseleave, function () { $(this).find(.article-mask).fadeOut(200); });.on(mouseenter, ...)是标准事件绑定mouseenter不会像mouseover那样在子元素间反复触发.stop(true, true)用来清空动画队列避免快速进出时遮罩层闪烁。这里的.article-mask默认是display: none的一个绝对定位遮罩层里面可以放“阅读全文”按钮。3.3 自定义 CSS 覆盖 Bootstrap 的三种写法Bootstrap样式很好用但期末作业最怕“一眼看出是Bootstrap模板”。这时需要自定义CSS覆盖。覆盖有三种层次第一种是直接写在标签上的行内style优先级最高但不适合维护第二种是新建index.css并保证它在bootstrap.css之后引入第三种是用更具体的选择器例如#main .card来提高权重。/* index.css 必须放在 bootstrap.css 之后 */ .blog-header { background: #2c3e50 !important; } #main .card { border-radius: 0.75rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }.blog-header这种自定义类名本身没有冲突写在后面就会覆盖同名Bootstrap类。#main .card则利用ID选择器的权重压过.card默认样式。!important是最后手段只在第三方插件用行内样式写死时使用滥用会让调试变得很痛苦。如果你想让页面更有个性可以把Bootstrap主色调改成自己的主题色。常见做法是下载bootstrap.css后全局搜索#007bff替换为自定义颜色这比引入一个巨大编译环境要快得多。3.4 图片资源命名与懒加载考虑原包里的图片都是jpg和png没有经过压缩。页面图片越多首屏白屏时间越长。img-fluid只能保证图片宽度不超父容器无法减少传输体积。一个低成本的做法是给非首屏图片加上原生懒加载属性img srcimg/boke1.png alt博客配图 loadinglazy classimg-fluidloadinglazy是HTML自带功能浏览器会滚动到图片附近才加载不需要引入额外JS。需要提醒的是首屏轮播图不要加loadinglazy否则浏览器可能因为计算视口位置导致首屏区域闪烁。图片优化可以最后做先保证功能与样式都正常。4. 内容页与 Bootstrap 组件正文排版、表单反馈和前端校验4.1 从 textOne.html 看文章页共用模板textOne到textSix六个页面是博客正文载体。它们结构相似顶部导航、左侧正文、右侧博主信息或推荐文章、底部页脚。改造时不要六页独立写而是把textOne作为母版复制后改内容。以textOne为例主干结构如下header classblog-header py-3/header main classcontainer py-4 div classrow article classcol-lg-8 h1 classdisplay-5前端布局入门/h1 p classtext-muted发布时间 / 分类 / 作者/p div classblog-content p正文第一段.../p p正文第二段.../p /div /article aside classcol-lg-4 div classcard博主介绍/div /aside /div /main footer classblog-footer/footer文章页里的代码块样式需要单独处理。Bootstrap没有内置代码高亮最简单的是用precode加自定义CSS.blog-content pre { background: #f8f9fa; padding: 1rem; border-left: 4px solid #0d6efd; overflow-x: auto; }这种左侧色条加灰色底的做法是技术博客常见样式。overflow-x: auto防止长代码撑破页面横向滚动条只在代码区域出现。4.2 用 bootstrap.css 的表单样式做留言和登录login.html和message.html都是表单页面。form-group配合form-control能快速得到统一高度的输入框btn btn-primary得到主按钮。留言板用textarea登录页用input typepassword。典型留言表单如下form idmessageForm action# methodpost classneeds-validation novalidate div classform-group label fornickname昵称/label input typetext classform-control idnickname namenickname required /div div classform-group label forcontent留言内容/label textarea classform-control idcontent rows4 required/textarea /div button typesubmit classbtn btn-primary提交留言/button /formneeds-validation是Bootstrap手动校验的标记novalidate让浏览器先不弹默认气泡把校验逻辑交给自己写。注意form的action#只是占位真正模板里没有后端所以提交后页面会刷新这是静态站点正常现象。4.3 JS 前端校验判断内容后再决定提示留言和登录页最好有一点JS校验。这里用原生DOM方法处理正好覆盖“js判断字符串是否包含”这个高频搜索点document.getElementById(messageForm).addEventListener(submit, function (e) { e.preventDefault(); var nickname document.getElementById(nickname).value.trim(); var content document.getElementById(content).value.trim(); if (nickname.length 0) { alert(昵称不能为空); return; } if (content.length 5) { alert(留言内容至少 5 个汉字); return; } if (content.indexOf(http) ! -1) { alert(留言不能包含链接); return; } this.submit(); });trim()去掉首尾空格indexOf(http) ! -1判断字符串中是否包含某段子串这是最朴素的链接拦截方式。e.preventDefault()先停掉默认提交校验通过后再用this.submit()继续。这里的逻辑很直白每一项校验失败都直接return终止后续代码执行。如果你更熟悉jQuery也可以写成$(#messageForm).on(submit, function(e){...})但原生写法在期末答辩时更好讲。4.4 移动端适配与“段落分割线”等细节响应式是Bootstrap的长处但自定义CSS里容易出现固定宽度比如侧边栏写成width:300px手机端就会溢出。常见做法是用流式宽度加媒体查询.blog-content .divider { border: none; border-top: 1px dashed #d0d7de; margin: 2rem 0; } media (max-width: 768px) { .blog-content { font-size: 0.95rem; } }.divider就是CSS实现段落分割线的例子用border-top加虚线模拟分割线。媒体查询只在小屏下缩小正文字体布局由Bootstrap栅格自动堆叠。这里的max-width: 768px对齐Bootstrap的平板断点如果使用更小的手机屏幕还可以再加一层max-width: 576px。自定义CSS如果写在Bootstrap之前媒体查询里的同名类可能被覆盖所以自定义样式表一定要放在bootstrap.css后面。5. 真实部署前路径、JS 冲突与浏览器兼容5.1 相对路径与使用中文目录名的坑压缩包解压后顶层目录是“我的博客10个页面”这是一个中文目录名。双击index.html在本地能打开但传到Linux服务器后URL会变成http://你的域名/我的博客10个页面/index.html浏览器会做URL编码但部分服务器配置下无法正确解码中文目录导致css和图片全挂。稳妥做法是把项目目录改成英文比如blog-demo再上传。本地调试也不建议直接双击打开因为有些jQuery插件在file://协议下会因跨域限制失效。最可靠的方式是启动一个静态服务器。以Python为例cd ~/Desktop/blog-demo python3 -m http.server 8080然后在浏览器访问http://localhost:8080/index.html。python3 -m http.server是Python自带的静态文件服务器8080是端口号如果被占用会报Address already in use换成8081或8000即可。保持终端窗口运行关闭终端服务就停。5.2 引入多个 jQuery 版本的隐患原项目里同时有jquery-3.4.1.js和jquery-3.2.1.min.js这是静态站常见隐患。两个版本同时存在时后加载的window.jQuery会覆盖前一个但已绑定的插件可能还持有旧版本对象于是出现“Bootstrap轮播正常、自定义点击无反应”这种怪问题。检查方法很简单在浏览器控制台执行window.jQuery.fn.jquery看当前生效版本。修复时只保留一个jQuery如果页面主要用Bootstrap和自定义交互保留3.4.1如果某个插件严格要求3.2.1则把插件换成兼容新版的形式而不是保留两份。删除后还要逐个html检查script标签避免残留。我一般会把所有公共脚本放到footer统一管理顺序先是jquery-3.4.1.min.js再是bootstrap.min.js最后是自定义loving.js和backtop.js。这样可以避免页面加载一半时DOM还没建立就执行脚本。5.3 一键返回顶部与“JS 捆绑”的最小实现长文章页超过一屏后返回顶部按钮是个刚需。最简单的方式不依赖任何插件只用一个固定定位的按钮加scroll事件var backTop document.createElement(button); backTop.textContent TOP; backTop.setAttribute(aria-label, 返回顶部); Object.assign(backTop.style, { position: fixed, bottom: 30px, right: 30px, display: none, zIndex: 999 }); document.body.appendChild(backTop); window.addEventListener(scroll, function () { backTop.style.display window.scrollY 300 ? block : none; }); backTop.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); });scrollY 300控制按钮出现的临界点behavior: smooth是原生平滑滚动不需要引入额外动画库。这里用DOM动态创建按钮避免在每个页面手写重复HTML。如果你有多个文章页可以把这段代码放进js/backtop.js然后在公共footer统一引入这就是最小化的“JS捆绑”思路把通用功能文件合并成一个脚本减少页面请求数。5.4 用浏览器开发者工具验证页面构成在VSCode里写完页面怎么看代码到底渲染成了什么样打开Chrome开发者工具点击左上角箭头图标再点页面上的任意区域Elements面板会高亮对应HTML节点右侧Styles会显示命中的所有CSS规则。这个操作对应“vscode 做网页前端开发 如何查看web界面代码构成的界面”实际排查时重点看三处元素是否有正确class、CSS规则有没有被删除线划掉、Network面板里图片和css是否全部加载成功。如果发现样式没生效先在Styles面板找被划掉的规则通常是该规则优先级不够。这时回到代码里增加选择器权重而不是乱加!important。排查完再点开Console看有没有红色报错常见报错是$ is not defined说明jQuery没有在脚本前加载。6. 交作业之前把“成品”改成“自己的作品”的小技巧6.1 全局替换站点名与版权信息用编辑器全局搜索“我的博客”或“博主”替换成自己的名字。注意不只是title标签还包括导航栏、footer、about页和文章作者。建议按下面这张表逐项核对修改位置原始标记替换为所有页面title我的博客姓名个人博客导航栏品牌文字博客名自己的博客名about.html头像img/about.png本人头像首页二维码img/qr.jpg个人二维码footer版权© 2024 我的博客姓名学号二维码不要只换图片还要确认扫码后的链接指向有效。如果二维码指向一个学院官网或空白页会给答辩减分。6.2 给一两个页面加“差异化亮点”评分老师最怕十页长得一样。建议在index.html加一个CSS动画在message.html加一条提交成功提示在textSix.html嵌入一个视频链接。下面这组CSS能让卡片在页面加载时有一个上浮效果keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .card { animation: fadeUp 0.6s ease both; }animation-fill-mode: both让动画开始前保持from状态结束后保持to状态避免卡片先闪现再消失。这个技巧不算复杂但演示时很直观。6.3 打包前的一张检查清单收尾时按下面的顺序跑一遍项目目录改成英文名删除.DS_Store、.vscode和多余jQuery在项目根目录执行python3 -m http.server 8080逐个点击十个页面图片和css不能有404打开Chrome开发者工具的手机模式检查导航栏折叠按钮和轮播图是否正常确认所有外部资源都在本地代码里不要残留网络图片地址压缩成zip压缩包内第一层应该是英文目录不要把十个文件散在根目录。最后再逐页点击一遍链接十个页面互相跳转要能回来尤其是textSix返回首页的按钮很多同学在这里少了一个hrefindex.html。检查完链接这份作业就可以交了。本文还有配套的精品资源点击获取