简介一套面向大学生HTML5期末作业与Web前端初学者的个人网站模板——「我的书屋」采用HTMLCSS构建共包含5个页面覆盖首页、个人介绍、爱好展示、书屋相册等常用模块页面风格统一可直接替换文字与图片用于课程设计或静态网页实训。资源包共70个文件压缩包大小6.31MB文件类型以45个JPG、12个PNG图片素材为主搭配7个CSS样式文件和5个HTML页面图片分为背景、封面、头像等不同用途CSS按页面拆分便于理解与改动。已有136人学习下载。通过这套模板可以直观学习HTML5标签结构、CSS选择器、盒模型、浮动布局等核心知识点同时获得一个完整可展示的“书屋”主题个人网站成品适合期末作业参考和前端入门模仿。1. 为什么“我的书屋”比单页作品更像一个完整站点同样是交 HTMLCSS 期末作业有人交一个 index.html 单页有人交一个 5 个页面的小站得分差距往往不在“技术难度”而在“完整度”。浏览器地址栏里能点导航切换 5 个页面、页面之间有统一的头部和风格、书架页能看到书籍卡片排布这本身就证明了制作者理解“站点”而不只是“网页”。这个标题里的“我的书屋”就是一个典型的多页面个人网站模板首页、书架、读书笔记、关于、留言或联系五页共用一份 CSS内容全部围绕“书”这个主题组织。大学生做 HTML5 期末作业选这个方向工作量集中在页面划分和布局细节上不需要 JavaScript 也能做出完整效果Web 前端初学者拿它练习 HTML 标签语义和 CSS 样式控制也合适。有几个页面就要有几套内容后续每一章都围绕“怎么把 5 个页面撑起来、串起来、做出细节”展开。2. 5 个页面的站点结构用统一导航和共用样式把页面串起来2.1 页面规划每个页面只承担一件事多页面站点的第一原则是“一页一职”。常见的做法是拆成 index.html首页、bookshelf.html书架/书单、notes.html读书笔记、about.html关于我、contact.html留言联系。这样写出来的目录结构非常直观老师打开文件夹就知道这个学生做过规划my-books/ ├── index.html ├── bookshelf.html ├── notes.html ├── about.html ├── contact.html ├── css/ │ └── style.css └── images/ ├── cover-1.jpg └── ...这个结构里5 个 HTML 文件放在根目录css 和 images 各用一个子目录。HTML 文件不嵌套子文件夹是因为页面之间要互相跳转扁平结构写相对路径最简单——从任意一个页面访问css/style.css都只需要css/style.css不需要考虑../回退。如果以后页面多了再按模块拆文件夹不迟期末作业这个规模保持扁平最省事。2.2 导航复用把同一段 HTML 粘到 5 个页面多页面站点和单页长滚动的本质区别就是导航。我一般建议先把导航写好再复制到每个页面不要一个页面一个写法。统一导航的价值有两个一是用户在任何页面都知道自己在站点的什么位置二是期末答辩时你可以直接说“全站导航一致体现站点整体性”。header classsite-header div classcontainer header-inner h1 classlogoa hrefindex.html我的书屋/a/h1 nav classmain-nav ul lia hrefindex.html首页/a/li lia hrefbookshelf.html书架/a/li lia hrefnotes.html读书笔记/a/li lia hrefabout.html关于我/a/li lia hrefcontact.html留言/a/li /ul /nav /div /header这段代码里的header-inner用 flex 把 logo 和导航放在一行.container控制整体宽度居中。注意导航里的当前页可以加一个.active类做高亮但那是后话先把结构和链接路径写对。hrefindex.html是相对路径5 个页面都在同一层目录所以从任何页面点回首页都写成index.html不需要加/或./前缀。复制粘贴 5 次之后如果后面要改导航文字就得改 5 个文件。这是静态多页面的固有成本CSS 能共用但 HTML 公共部分没法用纯 HTML 引入。想省事可以用 JavaScript 动态生成导航但那就超出“纯 HTMLCSS 期末作业”的边界了保持纯静态反而更稳。2.3 路径与编码最容易扣分的地方期末作业最常见的低级错误就是图片裂了、样式丢了。排查顺序就两条看路径、看编码。当前页面位置引用 css/style.css引用 images/cover.jpgindex.html根目录css/style.cssimages/cover.jpg子目录/page.html../css/style.css../images/cover.jpg表格说明一个原则相对路径是“从当前文件出发找目标文件”。根目录页面直接写子目录名开头子目录页面必须加../回到上级目录。css 文件内部再用url()引用图片时基准是 css 文件本身的位置不是 HTML 文件的位置这个区别经常让人排查半天。编码方面每个 HTML 文件的head里都要有meta charsetutf-8CSS 文件如果不是用编辑器默认 UTF-8 保存中文注释和字体名会乱码。HBuilder 新建项目默认就是 UTF-8 编码这也是很多大学生用 HBuilder 配置 HTML、CSS、JavaScript 项目的原因——省去手动处理编码的步骤直接开始写页面。如果你用的编辑器默认不是 UTF-8保存时留意右下角编码显示统一改成 UTF-8 就能避免大多数乱码问题。3. 书架页与首页布局用 flex 和 grid 把书“摆”上页面3.1 首页主视觉flex 两栏布局的典型用法“我的书屋”这类个人网站的首页通常不直接堆书单而是先用一句话点题再展示最近在读的书。“我的书屋”四个字作为站点名已经说明主题首页放一个两栏区域左侧是站点介绍文字右侧是当前在读的一本书的封面和信息。section classhero div classcontainer hero-grid div classhero-text h2把读过的每一本书都变成房间里的一束光/h2 p这里记录我读过的书、正在读的书以及每本书留下的笔记。/p a classbtn hrefbookshelf.html去看看书架/a /div div classhero-cover img srcimages/reading-now.jpg alt最近在读的书 p classreading-status正在读 · 《百年孤独》/p /div /div /section.hero-grid { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .hero-text { flex: 1; } .hero-cover { flex: 0 0 280px; } .hero-cover img { width: 100%; border-radius: 8px; box-shadow: 0 8px 24px rgba(60, 40, 20, 0.15); }这里用 flex 而不是 grid 的原因只有两个子元素flex 的justify-content: space-between能让文字和封面一个靠左一个靠右align-items: center让两者垂直居中对齐一行代码解决对齐需求。flex: 0 0 280px的意思是“不放大、不缩小、基准宽度 280px”保证封面区域宽度固定不管屏幕多宽文字区都不会被挤成窄条。3.2 书架页核心grid 自动填充书籍卡片书架页是全站“最像书屋”的一页。常见做法是把每本书做成一张卡片卡片里有封面、书名、作者和一句短评。书籍数量会变所以卡片容器不能写死列数要交给 grid 的auto-fill自动计算。section classbookshelf div classcontainer h2我的书架/h2 div classbook-grid article classbook-card img srcimages/book-1.jpg alt《活着》封面 h3活着/h3 p classbook-author余华/p p classbook-note人是为活着本身而活着的。/p /article !-- 重复 book-card 结构放其余书籍 -- /div /div /section.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px; } .book-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; } .book-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }这段 CSS 是所有书籍卡片的骨架。minmax(180px, 1fr)是 grid 参数里的关键点每个卡片列最少 180px 宽有剩余空间就平均分。auto-fill让浏览器根据容器宽度自动塞尽可能多的列屏幕宽就 5 列窄就 2 列不用写媒体查询也能自适应。aspect-ratio: 3 / 4规定封面图片宽高比——书封面本来就是竖长的这样所有封面高度统一不会因为原图尺寸不同把卡片撑得参差不齐。object-fit: cover则让图片按比例裁剪填满这个框而不是拉伸变形。flex 和 grid 在这个项目里的分工页面级大布局用 flex导航、首页 hero、页脚卡片列表这种“数量会变、要自动换行”的网格用 grid。两者不是替代关系混用才是实际开发常态。3.3 响应式底线一个断点保证手机能看期末作业不要求做到完美响应式但至少别在手机宽度下横向滚动。一个最小配置的媒体查询就能兜底media (max-width: 600px) { .hero-grid { flex-direction: column; } .header-inner { flex-direction: column; text-align: center; } .book-grid { grid-template-columns: repeat(2, 1fr); } }flex-direction: column把横排改成竖排grid-template-columns强制书架变成两列。600px 这个断点覆盖大多数手机横竖屏。如果要更精细可以在 480px 处把书架压成一列但对 5 个页面的课程作业来说做完上面三步已经能说明你理解响应式布局的基本逻辑。4. 交互细节css 伪类选择器与鼠标移入反馈让页面活起来4.1 伪类选择器选对场景导航高亮与卡片反馈纯静态页面没有 JavaScript交互感全靠 CSS 伪类选择器。很多人知道:hover但不知道用在哪这里结合书屋场景给一张常用表选择器作用场景示例a:hover导航链接、文字链接悬停变色a:hover { color: #a0522d; }.book-card:hover书籍卡片悬停上浮强调当前指向的书配合 transform 和 box-shadowinput:focus留言表单输入框聚焦时加边框input:focus { border-color: #a0522d; }.book-list li:nth-child(odd)笔记列表隔行变色增加可读性奇数行浅色背景a:visited区分已读过的文章链接设置成比主色浅的灰棕色这里要澄清一个常见误解CSS 里没有“鼠标移入事件”。事件是 JavaScript 的概念CSS 伪类:hover只是“当鼠标悬停在元素上时应用这套样式”它不触发任何逻辑。用 HBuilder 写网页时很多人会搜“css 鼠标移入事件”搜到的 CSS 方案基本都是:hover或:focus。纯 CSS 期末作业里把:hover用好就够了。4.2 卡片上浮transition 与 transform 组合书架卡片已经有了transition属性现在补上 hover 状态.book-card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }translateY(-6px)让卡片向上移动 6 像素box-shadow从原来的浅阴影加深加扩散视觉上像卡片被“拿起来”了。注意 transition 写在.book-card上而不是写在.book-card:hover上这是关键写在原状态上鼠标移入和移出都有过渡动画写在 hover 状态上只有移入有动画移出会瞬间弹回。鼠标移入效果讲究克制。上浮 6px 是常见取值做移动端适配时 hover 没有意义——触屏没有悬停状态所以 hover 效果不需要考虑手机。桌面浏览器预览时阴影变化幅度不要太大否则整个页面会显得飘。4.3 文字细节删除线、字体渐变与阅读状态书屋类网站和书有关的文字细节有三处可做已读状态的删除线、标题的字体渐变、引用文字的字体样式。.book-list li.finished .book-title { text-decoration: line-through; color: #999; } .site-title { background-image: linear-gradient(90deg, #8b5a2b, #d2a679, #8b5a2b); -webkit-background-clip: text; background-clip: text; color: transparent; } blockquote { font-style: italic; border-left: 4px solid #d2a679; padding-left: 16px; color: #5a4632; }删除线对应“这本书已经读完了”的状态比单纯改颜色更直观条纹删除线text-decoration-style: wavy也可以但会影响博客笔记页的可读性不建议大量使用。字体渐变是 CSS 里一个容易出效果的小技巧先用background-image生成渐变背景再用background-clip: text把背景裁剪到文字形状内最后把文字本身设为透明就得到了渐变文字。兼容性上-webkit-background-clip: text仍然需要保留Firefox 等现代浏览器也支持background-clip: text写两行不冲突。这三个效果的共同点是“有书卷气”比加花哨的动画更贴合书屋主题。页面交互不是越多越好静态站点的细节深度体现在这些地方。5. 上交前最后检查本地预览与文件整理5.1 浏览器验证的 3 个落点写完后不要只在编辑器里看代码一定要用浏览器打开 HTML 文件逐个页面点一遍。验证顺序第一导航条上 5 个链接是否都能跳转有没有 404 页面第二图片是否全部正常显示控制台有没有红色报错第三缩放窗口宽度到 400px 和 1200px观察布局有没有错位。这三点过了基础分就有了。如果双击 HTML 文件后用浏览器打开正常但页面内容更新后浏览器里还是旧的样子按 CtrlF5 强制刷新。这个“HTML 文件无法预览”的现象 90% 是浏览器缓存了旧版本不是代码写错了。使用 HBuilder 时可以直接点右上角的浏览器预览图标启动本地预览它内置了一个静态服务器能避免直接 file:// 协议下某些资源加载的限制但期末作业场景里直接双击文件通常也够用。5.2 交付检查清单检查项状态5 个 HTML 文件均包含!doctype html与meta charsetutf-8是所有a链接路径能找到目标文件无 404是图片格式为 jpg/png/webp命名不含中文和空格是CSS 文件统一为 UTF-8 编码中文注释未乱码是全站导航与风格一致首页无空白区块是文件夹压缩为 zip命名包含学号姓名如作业要求是5.3 一个提速技巧用替换功能统一改导航5 个页面复制了同一段导航如果交之前想把“留言”改成“联系我”不要手动点开 5 个文件逐个改。HBuilder 或 VS Code 都支持“文件夹内搜索替换”——在编辑器左侧资源管理器里右键项目文件夹选择“在文件中替换”把旧的留言替换成联系我确认替换范围是整个项目目录一次完成。这样改完后再用浏览器把 5 个页面点一遍重点看导航是否都更新了。多页面站点后期维护的成本就在这里工具用对能省一半时间。本文还有配套的精品资源点击获取