简介这份资源是一套面向师范高等学院主题的HTML5网页设计成品适合大学生用于Web前端期末作业、课程设计或HTMLCSSJS综合实训。整站共12个页面涵盖首页、新闻中心、新闻详情、招生就业、教学科研、团学在线、公共服务、机构设置、系部概况、信息公开与统一信息门户等模块结构贴近高校官网真实场景便于直接参考或二次修改。压缩包共41个文件约1.39MB包含12个html页面、1个css样式表以及webp、png、jpg、gif等图片素材和xml配置文件页面与样式、图像资源分层存放目录组织清晰方便按模块查找替换。目前已有81人学习下载。对于需要完成HTML5期末作业或前端入门练习的同学可借此了解多页面站点的导航组织、公共样式复用与图文排版思路快速搭建出结构完整、风格统一的校园类网页作品。1. 师范高等学院官网 12 页整站一份能直接交的 HTMLCSSJS 期末作业长什么样每年期末前两周总有人被师范高等学院 12 个页面这类题目卡住——不是不会写单个页面而是不知道 12 个页面怎么分工、导航怎么串、样式怎么复用最后交上去的成品要么是 12 个孤岛要么是复制粘贴到连页脚都一模一样。这份作业真正考的不是你会不会写div而是你能不能把一个学院的官网拆成首页、院系概况、师资队伍、招生就业、党建思政、校园文化、通知公告、联系我们等模块用一套公共 CSS 和一段公共 JS 把它们粘成一个整体。它适合正在赶 Web 前端期末作业的大学生也适合想拿一个完整静态站练手的初学者。下面我按自己带学生改作业的顺序把 12 个页面从目录结构到交互细节拆开讲参数、命令、踩坑点都给到照着做能跑通也能看出边界在哪。2. 12 个页面怎么分工目录结构、公共资源与导航串联2.1 先定目录再写第一行 HTML很多人一上来就打开编辑器写首页写到第 5 个页面发现图片路径全乱、CSS 重复三份。正确顺序是先建目录。师范高等学院官网这种体量推荐扁平化结构所有 HTML 放根目录资源分文件夹# 在桌面新建项目文件夹进入后执行 mkdir -p css js images uploads touch index.html about.html departments.html faculty.html admissions.html touch party.html campus.html news.html notice.html contact.html touch majors.html students.html执行完你会得到 12 个空 HTML 文件加 4 个资源目录。css放公共样式和页面级样式js放公共脚本images放校徽、banner、师资照片uploads放通知公告里的附件图标。为什么扁平化因为期末作业通常用file://直接双击打开路径层级越深越容易在../上翻车。12 个页面全部与css、js、images同级引用统一写成css/style.css、images/logo.png不用管相对层级。提示文件名全小写、用英文或拼音别用首页.html师资队伍.html。部分浏览器和打包工具对中文文件名支持不稳交作业前改名能省一堆玄学问题。2.2 公共头部、导航和页脚一次写对12 页复用12 个页面最大的浪费是每个页面重写一遍导航。做法是先把头部结构定死然后复制到每个页面。下面这段是公共头部的骨架注意meta charsetutf-8和 viewport 必须每个页面都有!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title师范高等学院 - 首页/title link relstylesheet hrefcss/style.css /head body header classsite-header div classlogo img srcimages/logo.png alt师范高等学院校徽 span师范高等学院/span /div nav classmain-nav ul lia hrefindex.html classactive首页/a/li lia hrefabout.html学院概况/a/li lia hrefdepartments.html院系设置/a/li lia hreffaculty.html师资队伍/a/li lia hrefmajors.html专业介绍/a/li lia hrefadmissions.html招生就业/a/li lia hrefparty.html党建思政/a/li lia hrefcampus.html校园文化/a/li lia hrefnews.html新闻动态/a/li lia hrefnotice.html通知公告/a/li lia hrefstudents.html学生工作/a/li lia hrefcontact.html联系我们/a/li /ul /nav /header main classpage-main!-- 各页面内容 --/main footer classsite-footer p版权所有 © 师范高等学院 | 地址XX省XX市XX路1号 | 电话0000-0000000/p /footer script srcjs/main.js/script /body /html逻辑说明header里放 logo 和 12 项主导航正好对应 12 个页面classactive标记当前页靠 CSS 高亮。main是每个页面唯一变化的部分footer统一版权信息。参数上langzh-cn影响中文断行和字体回退charsetutf-8不写会出现中文乱码——这是新手最高频的翻车点。复制时只改title、active类的位置和main里的内容其余不动。2.3 用一套 CSS 变量管住 12 个页面的配色12 个页面如果各写各的颜色改一次主色要改 12 遍。用 CSS 自定义属性变量在:root里集中定义这是现代做法也是老师看代码时判断你有没有工程意识的点/* css/style.css */ :root { --main-color: #1a5fb4; /* 学院主色深蓝 */ --accent-color: #e5a50a; /* 强调色用于按钮和标题装饰 */ --text-color: #2b2b2b; --bg-light: #f5f7fa; --radius: 6px; --max-width: 1200px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, sans-serif; color: var(--text-color); line-height: 1.7; } .site-header { display: flex; justify-content: space-between; align-items: center; max-width: var(--max-width); margin: 0 auto; padding: 16px 20px; } .main-nav ul { display: flex; list-style: none; gap: 18px; } .main-nav a { text-decoration: none; color: var(--text-color); } .main-nav a.active, .main-nav a:hover { color: var(--main-color); border-bottom: 2px solid var(--accent-color); }逻辑说明:root里的变量全局可用改--main-color一处12 个页面的导航高亮、按钮、标题装饰全部跟着变。box-sizing: border-box让 padding 不撑破宽度是布局不炸的基础。max-width: 1200px加margin: 0 auto实现居中比写死宽度更稳。参数怎么调主色换成学校 VI 色--max-width按屏幕适配需求改 10001400 之间gap控制导航项间距太挤就加大。2.4 导航高亮和返回顶部一段 JS 管全站12 个页面手动改active容易漏用 JS 根据当前 URL 自动高亮更省事顺便把返回顶部也做了// js/main.js document.addEventListener(DOMContentLoaded, function () { // 1. 自动高亮当前导航 var path location.pathname.split(/).pop() || index.html; document.querySelectorAll(.main-nav a).forEach(function (a) { if (a.getAttribute(href) path) a.classList.add(active); }); // 2. 返回顶部按钮 var btn document.createElement(button); btn.className back-top; btn.textContent ↑; document.body.appendChild(btn); btn.style.display none; window.addEventListener(scroll, function () { btn.style.display window.scrollY 300 ? block : none; }); btn.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); }); });逻辑说明第一段取当前文件名和导航href比对命中就加active这样 12 个页面共用一段脚本不用手改。第二段动态创建返回顶部按钮滚动超过 300px 才显示点击平滑回顶。参数上300是显示阈值页面短可以调小behavior: smooth是平滑滚动老浏览器不支持会直接跳不影响功能。注意脚本放在/body前或加DOMContentLoaded否则 DOM 还没生成就查询会拿到空。3. 首页和列表页的排版banner、栅格卡片与通知公告3.1 首页 banner 用纯 CSS 做不依赖图片首页 banner 是评分重点但很多同学直接贴一张大图缩放就糊。用 CSS 渐变加文字层清晰且好改.banner { height: 420px; background: linear-gradient(135deg, #1a5fb4 0%, #3a7bd5 60%, #e5a50a 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; } .banner h1 { font-size: 42px; letter-spacing: 4px; } .banner p { margin-top: 14px; font-size: 18px; opacity: 0.9; }逻辑说明linear-gradient三个色标做出学院蓝到强调金的过渡flex居中文字。参数上135deg是渐变角度改to right变水平height按内容调移动端要配媒体查询降到 260px 左右。这样 banner 不依赖外部图片交作业时不会因为图片丢失而开天窗。3.2 院系、专业、新闻用同一套栅格卡片12 个页面里院系设置、专业介绍、新闻动态、校园文化基本都是多条目卡片用一套栅格类复用.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--max-width); margin: 40px auto; padding: 0 20px; } .card { background: #fff; border-radius: var(--radius); box-shadow: 0 2px 10px rgba(0,0,0,0.08); overflow: hidden; transition: transform 0.3s; } .card:hover { transform: translateY(-6px); } .card img { width: 100%; height: 180px; object-fit: cover; } .card-body { padding: 16px; } media (max-width: 768px) { .card-grid { grid-template-columns: 1fr; } }逻辑说明grid-template-columns: repeat(3, 1fr)一行三列gap控制间距object-fit: cover让图片不变形地填满。transition加hover位移是常见交互成本低效果好。参数上列数按内容改 2 或 4媒体查询在 768px 以下降为单列这是移动端适配的最低要求。注意box-shadow别太重0.08透明度比较克制。3.3 通知公告列表日期对齐和换行省略通知公告页是列表型最容易出现日期和标题对不齐、长标题换行难看。用 flex 加文本省略.notice-list { max-width: var(--max-width); margin: 30px auto; padding: 0 20px; } .notice-list li { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px dashed #ddd; list-style: none; } .notice-list .title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-right: 20px; } .notice-list .date { color: #888; font-size: 14px; flex-shrink: 0; }逻辑说明flex: 1让标题占满剩余空间white-space: nowrap加text-overflow: ellipsis实现单行省略flex-shrink: 0保证日期不被压缩。参数上margin-right是标题和日期的安全距离border-bottom用虚线比实线更轻。如果标题要显示两行再省略得用-webkit-line-clamp但兼容性要测期末作业单行省略足够。4. 师资、招生、党建页面的差异化处理与表单4.1 师资队伍头像网格加信息卡师资页和普通卡片不同重点是人物头像和职称信息。用固定比例头像避免大小不一.teacher-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .teacher { text-align: center; } .teacher img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg-light); } .teacher h3 { margin: 12px 0 4px; font-size: 17px; } .teacher span { color: #888; font-size: 14px; }逻辑说明border-radius: 50%做圆形头像object-fit: cover保证不拉伸固定140px让网格整齐。参数上列数 4 适合师资多的学院人少改 3头像尺寸和gap要匹配否则换行错位。注意图片命名用拼音如zhangwei.jpg别用中文避免路径问题。4.2 招生就业时间线展示录取流程招生页适合用纵向时间线表达流程比纯文字清楚.timeline { position: relative; max-width: 800px; margin: 40px auto; padding-left: 30px; } .timeline::before { content: ; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--main-color); } .timeline li { position: relative; margin-bottom: 28px; list-style: none; } .timeline li::before { content: ; position: absolute; left: -30px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-color); border: 2px solid #fff; }逻辑说明::before画竖线每个li的::before画圆点形成时间线。参数上left值要和padding-left配合圆点才落在线上top: 6px让圆点和首行文字对齐。这是纯 CSS 技巧不依赖图片改颜色只动变量。4.3 联系我们表单校验和提交反馈联系页通常带留言表单前端校验是加分项form idcontactForm classcontact-form input typetext namename placeholder您的姓名 required input typeemail nameemail placeholder邮箱 required textarea namemessage rows5 placeholder留言内容 required/textarea button typesubmit提交留言/button /formdocument.getElementById(contactForm).addEventListener(submit, function (e) { e.preventDefault(); var name this.name.value.trim(); var email this.email.value.trim(); var msg this.message.value.trim(); if (name.length 2) { alert(姓名至少 2 个字); return; } if (!/^[^][^]\.[^]$/.test(email)) { alert(邮箱格式不正确); return; } if (msg.length 5) { alert(留言至少 5 个字); return; } alert(提交成功我们会尽快联系您); this.reset(); });逻辑说明required是浏览器原生校验JS 里再补长度和邮箱正则双保险。e.preventDefault()阻止默认提交因为静态站没有后端。参数上姓名长度阈值 2、留言 5 可按需调邮箱正则是最简版够用但不覆盖所有合法邮箱期末作业足够。注意this.reset()清空表单提升体验。5. 避坑与排查12 页作业最容易翻车的 5 个地方5.1 中文乱码现象是页面显示锟斤拷现象打开页面中文变成乱码方块或锟斤拷。原因HTML 文件保存编码和meta charset不一致常见于用记事本另存为 ANSI。解决编辑器统一存 UTF-8head第一行就写meta charsetutf-8两者必须一致。VS Code 右下角能看到当前编码点一下选通过编码保存改 UTF-8。5.2 图片不显示路径大小写和中文名现象本地能看换台电脑或打包后图片全裂。原因Windows 路径不区分大小写但有些环境区分Images/logo.png和images/logo.png在 Linux 下就是两个路径中文文件名在部分浏览器也会失效。解决目录和文件名全小写英文引用路径和实际路径逐字符核对。用浏览器 F12 的 Network 面板看哪个请求 404一眼定位。5.3 导航高亮错位active写死在多个页面现象点进师资队伍首页还高亮着。原因复制头部时忘了删上一页的active或者 JS 高亮和手写active冲突。解决要么全交给 2.4 的 JS 自动高亮HTML 里不写active要么每页只保留一个。两者混用会出现两个高亮排查时搜active看出现几次。5.4 布局错位浮动没清除或盒模型没统一现象卡片换行、页脚跑到中间、宽度超出屏幕出现横向滚动条。原因老式float没清除浮动或者没设box-sizing: border-box导致 padding 撑破容器。解决统一用* { box-sizing: border-box; }布局优先用 flex 和 grid少用 float。出现横向滚动条时给body临时加outline: 1px solid red找超宽元素。5.5 返回顶部按钮不出现或点了没反应现象滚动很久按钮不显示或点了直接跳不是平滑。原因脚本在 DOM 生成前执行querySelector拿到 null或浏览器不支持behavior: smooth。解决脚本放/body前或包在DOMContentLoaded里平滑滚动是增强不支持时直接跳顶也能接受别为它引入额外库。6. 交作业前的自检清单与一个提分技巧最后一章说点实在的。12 个页面写完别急着打包按这个顺序过一遍先断网双击index.html看样式和图片是否全在这一步能抓出所有路径问题再逐个点 12 个导航确认每页都能到、高亮都对、没有 404然后缩窗口到手机宽度看有没有横向滚动条和文字溢出最后 F12 看 Console 有没有红色报错有报错就修别留着。提分技巧是给每个页面加一个当前位置面包屑成本极低但显得完整div classbreadcrumb a hrefindex.html首页/a gt; span师资队伍/span /div.breadcrumb { max-width: var(--max-width); margin: 16px auto 0; padding: 0 20px; font-size: 14px; color: #888; } .breadcrumb a { color: var(--main-color); text-decoration: none; }逻辑说明面包屑放在main顶部告诉用户和老师这是第几层页面12 个页面各改一个span文字即可。参数上字号比正文小 2px颜色用灰不抢主内容。这个细节在评分时属于超出预期的部分写起来不到五分钟。我自己的习惯是所有页面写完先不碰样式用纯 HTML 把 12 个页面的结构和链接全部打通确认导航闭环再回头统一套 CSS。这样返工最少也不会出现样式写完了发现少一个页面的血泪情况。希望帮到你。本文还有配套的精品资源点击获取