简介中华历史10个页面网页设计资源包面向大学生HTML5期末作业和Web前端实践。全站以HTMLCSSJavaScript为主要技术围绕中华历史、人物、名著等主题搭建10个网页适合需要完成文化历史类前端成品或练习页面制作的学习者。压缩包共86个文件包含10个html页面、5套css样式、5个js脚本以及55张jpg和8张png图片素材另附PSD源文件方便直接修改和替换资源包约7.33MB。已有437人浏览学习可用性得到初步验证。通过该资源可快速获得完整的前端页面结构与视觉风格既能用于课程作业提交也能参考其导航、轮播、注册登录等交互实现提升HTML5、CSS3与JavaScript综合运用能力。1. 从一堆 HTML 文件里拆懂一个完整的历史主题站点拿到这份「中华历史10个页面」的资源包第一反应不是打开 index.html 看效果而是先看目录。包里除了常见的 index.html、lishi.html、renwu.html还有 mingzhu1.html 到 mingzhu5.html 这样的专题页以及 login.html、register.html 这种带表单的页面再加上 img 目录里几十张素材图。这其实是一个很典型的多页面静态站点适合用来做大学生 HTML5 期末作业也适合给刚在学 html、css、js 网页设计的人当对照样本。它没有依赖框架纯手写结构浏览器直接能跑改起来不费劲。我直接把它页面组织、CSS 分层、JavaScript 分工和上线前检查方式拆开讲一遍让你既能搞懂原理也能快速改成自己想要的样子。2. 页面骨架与多页导航HTML 结构先立住2.1 从文件命名反推站点结构资源包里的 .html 文件就是一个个独立页面。一个静态内容站做成多页面而不是单页应用最大的好处是页面之间解耦不用维护复杂路由。比如 index.html 负责总览lishi.html 放朝代概述renwu.html 陈列历史人物mingzhu1.html 到 mingzhu5.html 则可以放名城、名著、名物等专题内容。这种命名方式虽然朴素但对期末作业来说页面职责清楚老师点开每个文件名就能猜到内容。我一般拿到这种包会先在编辑器里把 HTML 文件都打开看看 head 区域的 title 和 meta 描述是否对应。这个包里几个页面的 head 部分都写了 charset 和 viewport说明基础 SEO 意识是有的。2.2 公共导航栏每个页面都有一份相同的头部多页面站点最常见的坑是导航链接路径写错。比如首页在根目录页面也在根目录那链接用相对路径lishi.html就可以如果以后把页面放到子目录就得多加一层../。这个包目前所有页面都在同一层所以导航基本都是短路径。看一段典型的导航结构header classheader div classlogoa hrefindex.htmlimg srcimg/logo.png alt中华历史/a/div nav classnav ul lia hrefindex.html首页/a/li lia hreflishi.html历史/a/li lia hrefrenwu.html人物/a/li lia hrefmingzhu1.html专题一/a/li lia hrefmingzhu2.html专题二/a/li lia hreflogin.html登录/a/li lia hrefregister.html注册/a/li /ul /nav /header这段代码里img/logo.png是相对当前 HTML 文件的图片路径a标签的 href 是页面间跳转入口。需要注意如果页面和图片不在同一级目录这个路径就要调整成../img/logo.png。我一般会建议把公共导航复制到每个页面并保持一致因为纯静态站没有模板引擎只能靠复制。改动导航时用编辑器的全局替换功能比逐个改更靠谱。2.3 当前页高亮用 JS 给导航加状态复制粘贴带来的问题是用户不知道自己在哪个页面。常见做法是给当前页的导航项加一个active类。这个包里虽然没有明显的 active 类但我们可以用一小段 JS 实现// 根据当前页面文件名给对应导航项高亮 const page location.pathname.split(/).pop(); document.querySelectorAll(.nav a).forEach(link { const href link.getAttribute(href); if (href page) { link.classList.add(active); } });这段代码先通过location.pathname取到当前文件名比如lishi.html然后遍历所有导航链接如果某个链接的 href 和当前文件名一致就加上active类。实际中还要处理index.html和首页根路径/的情况所以可以在条件里加一个page || page index.html的判断。这样导航高亮就不需要每个页面手工写死了。这里还要注意如果直接把这段代码放在每个页面底部页面多的时候会重复执行但因为是幂等操作影响不大。更好的方式是把公共脚本放进一个独立 JS 文件里比如common.js然后在每个页面底部引用。2.4 页面结构表10 个页面分别干什么文件可能的功能定位index.html首页展示站点入口和 bannerlishi.html历史总览页按时间线或时期展示renwu.html历史人物列表页mingzhu1.html ~ mingzhu5.html专题详情页可能是名城、名人、名物等login.html登录页含表单register.html注册页含表单reneu.html可能是某个子页面比如“人物”的二级页这个表只是根据文件名和文件数量推断的实际内容以代码为准。拿到包以后最快的确认方法是逐个打开页面看 title 和正文标题。一般老师不太关心页面叫什么名字而是关心页面之间跳转是否完整、内容是否一致。2.5 新增页面的正确操作顺序如果要在这个站点上再补一个页面不要从零新建。正确做法是复制一个结构最接近的页面比如复制renwu.html改成renwu2.html然后做三件事改title、改页面的内容区、改导航里的链接。注意复制后图片路径仍然是可用的因为页面还在同一级目录。如果页面放在子目录就要检查所有img/路径是否要加../。3. CSS 体系与主题定制从 base.css 到页面级样式3.1 样式文件的分工逻辑资源包里 css 目录下有 base.css、index.css、lishi.css、zhuzuo.css、remwu.css、login.css 等。这种命名习惯很直接base.css 是全局基础样式其余文件对应页面。我们得知道它们的优先级。先看 base.css 可能包含的内容/* base.css —— 全局重置与通用样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, sans-serif; font-size: 14px; line-height: 1.6; color: #333; } a { text-decoration: none; color: inherit; } ul { list-style: none; }这段代码里box-sizing: border-box是所有现代网页都该加的基础设置它能避免 padding 把盒子撑大。text-decoration: none去掉链接下划线等下自己写的a:hover状态下再补充下划线或颜色变化。需要注意的是各页面样式文件是在 base.css 之后引入的比如link relstylesheet hrefcss/base.css link relstylesheet hrefcss/index.css这样后引入的 index.css 可以覆盖 base.css 里的默认规则。覆盖时注意不要用!important到处强盖否则后期改主题会很痛苦。3.2 主题色修改把所有历史感集中到一个变量上这个包里的历史网站配色大概率是偏古风的比如褐色、米黄、暗红。如果想把整套网页设计改成自己想要的色调最省力的方法是利用 CSS 自定义属性。假设 base.css 里有:root { --main-color: #8b5a2b; --bg-color: #f5f0e8; --text-color: #333; } .header { background-color: var(--main-color); }只需要在:root里改三个变量整个站点的主色调就换了。如果原包没有变量直接搜#8b5a2b这样的颜色值替换也行但要注意可能会误伤图片里的颜色。我一般会先把所有 hex 颜色值列出来人工判断哪些是背景、哪些是文字再统一替换。3.3 卡片与列表布局中的 CSS 细节历史人物页经常用卡片布局。看一段典型的.card-list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .card { width: 300px; background: #fff; border-radius: 8px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }这里flex-wrap: wrap让卡片在窄屏下自动换行gap: 20px控制间距。transition和transform是 css 动画的基础常用于鼠标移入事件。初学者经常忘记加transition导致 hover 效果生硬。另外overflow: hidden是为了避免图片圆角溢出这个细节在卡片布局里很常见。3.4 响应式不要只做 PC 端Web 前端网页制作里响应式是逃不掉的。这个包里的页面如果老师在手机上看至少不能用横向滚动条。加一段媒体查询就能解决大部分问题media (max-width: 768px) { .nav ul { flex-direction: column; align-items: center; } .card-list { justify-content: flex-start; } .card { width: 100%; } }在窄屏下把横向导航改成纵向卡片宽度改成 100%。flex-direction: column是纵向排列的核心属性。这里要注意如果原网站已经用了固定宽度比如width: 1200px那么在小屏上会出现横向滚动这时需要把固定宽度改成max-width: 1200px同时加上width: 100%。另外很多人喜欢用三行代码完成一个水平垂直居中类似display: flex; justify-content: center; align-items: center;这是最实用的三行模式 css 写法。如果页面上有按钮要水平垂直居中优先用这一组。4. JavaScript 交互层滚动动画、轮播图与页面脚本分工4.1 JS 文件按页面拆还是合并资源包里有 animate.js、index.js、lishi.js、renwu.js 等。这种按页面拆脚本的方式对多人协作和后期维护更友好。每个页面只加载自己需要的 JS性能开销小。来看 index.html 底部常见的引入方式script srcjs/index.js/script script srcjs/animate.js/script注意顺序如果 index.js 里用到了 animate.js 的函数animate.js 必须先引入。一般要放在/body之前确保 DOM 已经加载完。如果放在head里需要加defer或把代码包在DOMContentLoaded事件里。4.2 首页轮播图一种常见的动画实现历史类首页通常会有 banner 轮播。看一个简易实现// index.js —— banner 轮播 let current 0; const banners document.querySelectorAll(.banner-item); const total banners.length; function showBanner(index) { banners.forEach((item, i) { item.style.display i index ? block : none; }); } document.querySelector(.next-btn).addEventListener(click, () { current (current 1) % total; showBanner(current); }); document.querySelector(.prev-btn).addEventListener(click, () { current (current - 1 total) % total; showBanner(current); }); // 自动播放 setInterval(() { current (current 1) % total; showBanner(current); }, 3000); showBanner(current);这段代码的逻辑是用一个current变量记录当前第几张showBanner函数负责把当前项显示出来其余隐藏。% total取模运算让索引循环。setInterval是常见的自动播放方式注意如果页面还有手动点击最好在点击时重置定时器可以用clearInterval先清除再重新开启。否则用户手动切到第 2 张3 秒后自动跳到第 3 张体验会很奇怪。参数说明3000是毫秒改大改小都会影响轮播速度。prev-btn和next-btn是左右箭头的类名如果原包用的 id 或其它类名需要对应修改。4.3 滚动到顶部用 JS 判断位置历史人物页或专题页内容长网站一般会做个回到顶部按钮。这里涉及两个 JS 知识点scroll事件的监听和window.scrollTo方法。// common.js —— 回到顶部 const topBtn document.getElementById(backTop); window.addEventListener(scroll, () { // 判断滚动高度超过 300 再显示 if (window.scrollY 300) { topBtn.style.display block; } else { topBtn.style.display none; } }); topBtn.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });window.scrollY返回当前页面滚动的垂直距离 300表示滚动超过 300 像素后显示按钮。behavior: smooth让滚动平滑不是瞬移。注意scroll事件触发频率很高如果里面做复杂操作会卡一般节流处理。这里只是改display开销不大。如果原包里没有这个功能直接加一个按钮和这段脚本就行。注意topBtn可能为空脚本可能需要if (topBtn)保护。4.4 登录表单校验JS 判断字符串是否包含包里还有 login.html 和 register.html正好把表单校验一起看了。一个简单的登录页前端校验可以这样写// login.js —— 登录表单校验 const form document.querySelector(#loginForm); const username document.querySelector(#username); const password document.querySelector(#password); form.addEventListener(submit, (e) { e.preventDefault(); const nameVal username.value.trim(); const passVal password.value; if (nameVal ) { alert(用户名不能为空); return; } // 用 includes 判断字符串是否包含指定字符 if (!passVal.includes() passVal.length 6) { alert(密码需要包含 或至少 6 位); return; } // 放行 form.submit(); });这里trim()去掉首尾空格includes()是 JS 判断字符串是否包含某个子串的常用方法。e.preventDefault()阻止表单真正提交等校验通过后再调用form.submit()。实际项目中前端校验只是体验兜底后端校验才是真正安全边界但作为期末作业能体现这个逻辑已经够了。4.5 用控制台排查 JS 报错拿到的包如果点按钮没反应先打开浏览器开发者工具F12看 Console 面板。常见问题document.querySelector(.banner-item)返回 null说明类名对不上引入的 JS 文件路径 404检查script src有没有拼错图片路径错误导致图片无法加载但这不影响 JS我一般会按顺序检查script是否加载、函数是否有定义、元素是否找到。这三步能解决大部分问题。比如资源包里的renwu.js如果报错可以打开renwu.html在控制台输入typeof someFunction看是否undefined。5. 部署前检查用 Live Server 验证链接和资源路径5.1 启动本地预览在 VS Code 里打开项目文件夹安装 Live Server 插件然后在 index.html 上右键选择“Open with Live Server”。它会启动一个本地服务器端口默认 5500浏览器会自动打开。这一步很重要直接双击打开 HTML 文件虽然也能看但某些浏览器对本地文件的模块加载和 fetch 会有限制用 Live Server 更接近线上环境。5.2 批量检查文件引用是否有效一个 10 个页面的站点难免有图片路径写错。可以在终端用 grep 检查所有 HTML 中引用的图片是否真实存在于 img 目录。比如在项目根目录执行grep -o img/[^]* *.html | sort -u | while read path; do test -f $path || echo missing: $path; done这条命令从所有 HTML 里提取img/开头的路径去重后逐个检查文件是否存在缺失的会打出来。注意grep -o输出匹配部分sort -u去重test -f判断文件存在。如果你用 PowerShell可以用Get-ChildItem *.html | Select-String img/[^]* | ForEach-Object { $_.Matches.Value } | Sort-Object -Unique | ForEach-Object { if (-not (Test-Path $_)) { Write-Host missing: $_ } }5.3 最后一遍人工走查自动检查之后照着用户路径点一遍首页 → 历史 → 人物 → 专题一 → 登录 → 注册每个页面都看一下导航是否高亮、图片是否加载、按钮有没有控制台报错。如果准备当作业提交可以顺手把这个过程录屏作为项目演示视频。这比写一页说明文档更有说服力。先在终端跑一遍上面的 grep 命令把 missing 的图片路径补上再按照这条路径点一圈基本就能出活了。本文还有配套的精品资源点击获取