简介这份资源是一套面向师范高等学院主题的HTML网页设计成品适合大学生用于HTML5期末作业、Web前端课程实训或网页制作入门练手。整包共41个文件以12个html页面为主体搭配1个css样式表统一控制布局与配色另有webp、png、jpg、gif等图片素材用于横幅、图标与新闻配图以及少量xml配置文件压缩包约1.39MB结构轻量、便于直接运行与二次修改。页面模块覆盖首页、系部概况、机构设置、教学科研、团学在线、招生就业、公共服务、新闻中心及新闻详情、信息公开、统一信息门户等基本还原高校官网常见栏目层级可帮助读者理解多页面站点的导航组织、内容排版与样式复用方式。目前已有81人学习下载适合需要快速获取完整页面框架、对照练习HTMLCSSJS基础布局与交互效果的同学参考使用。1. 师范高等学院 12 个页面从零搭一套能交差的 HTML5 期末作业每年期末前两周总有人翻出「htmlcssjs网页设计 师范高等学院 12个页面」这个关键词想找一套能直接跑、能改、能讲清楚逻辑的成品。我带过几届学生的课程设计也帮人改过不少「看着能跑、一打开就散架」的作业最常见的翻车不是代码写不出来而是页面之间没有统一结构首页能看点进二级页就露馅。这套方案要解决的就是这件事用一套可复用的 HTML5 骨架加一份公共 CSS把师范高等学院的 12 个页面串成一个完整站点首页、院系介绍、师资队伍、招生就业、校园文化、联系我们这些典型栏目都能覆盖。适合正在做 Web 前端期末作业、需要交一份结构完整、样式统一、带少量 JS 交互的大学生也适合刚接触 html css 网页制作、想拿一个真实多页项目练手的初学者。整套东西不依赖框架浏览器直接打开就能看改起来也不费劲。2. 12 个页面怎么切分师范高等学院的栏目规划与文件结构2.1 先定栏目再写代码别反过来很多人一上来就打开编辑器写首页写到第三个页面发现导航对不上又回头改来回折腾。我的习惯是先在纸上把 12 个页面列清楚再动手。师范高等学院这类站点的信息架构其实很固定按「学校概况 → 教学单位 → 师资 → 招生 → 校园生活 → 服务」这条线走基本不会漏。具体切分如下序号页面文件名页面主题主要内容块1index.html首页轮播 banner、新闻动态、通知公告、快速入口2about.html学校概况学校简介、历史沿革、办学定位3departments.html院系设置各二级学院列表与简介4teachers.html师资队伍教师卡片、职称筛选5majors.html专业介绍专业方向、培养目标、核心课程6admissions.html招生就业招生简章、就业数据7campus.html校园文化社团活动、校园风光8news.html新闻中心新闻列表、分页样式9notice.html通知公告公告列表、时间排序10gallery.html校园图库图片网格、点击放大11contact.html联系我们地址、地图占位、留言表单12login.html教务登录登录表单、表单校验这份表不是随便排的它决定了后面导航栏怎么写、CSS 类名怎么起。比如 news.html 和 notice.html 都是列表页可以共用一套列表样式teachers.html 和 gallery.html 都是卡片网格可以共用 grid 布局。提前想清楚这些CSS 能少写三分之一。2.2 目录结构定死后面谁改都不乱文件结构我一般这么放简单但够用shifan-college/ ├── index.html ├── about.html ├── departments.html ├── teachers.html ├── majors.html ├── admissions.html ├── campus.html ├── news.html ├── notice.html ├── gallery.html ├── contact.html ├── login.html ├── css/ │ ├── reset.css │ ├── common.css │ └── pages.css ├── js/ │ ├── common.js │ └── gallery.js └── images/ ├── banner/ ├── teachers/ └── campus/reset.css 清默认样式common.css 放导航、页脚、按钮这些全站复用的pages.css 放各页面特有的。js 只留两个文件common.js 管导航高亮和返回顶部gallery.js 管图库放大。这样交作业的时候老师一看结构就知道你是有组织地写的不是东拼西凑。提示文件名全部用小写英文不要用中文名。有些老师会在不同系统上打开你的作业中文文件名在某些环境下会变成乱码到时候图片加载不出来解释都解释不清。2.3 公共头尾抽出来12 个页面才不会各写各的纯静态 HTML 没有 include公共部分只能复制。但复制也要复制得聪明——先把头部和尾部在一张页面上调好确认没问题了再整段拷到其他 11 个页面只改中间内容区和title。下面是我常用的头部结构!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title师范高等学院 - 首页/title link relstylesheet hrefcss/reset.css link relstylesheet hrefcss/common.css link relstylesheet hrefcss/pages.css /head body header classsite-header div classcontainer header-inner a hrefindex.html classlogo img srcimages/logo.png alt师范高等学院 /a nav classmain-nav ul lia hrefindex.html classactive首页/a/li lia hrefabout.html学校概况/a/li lia hrefdepartments.html院系设置/a/li lia hrefteachers.html师资队伍/a/li lia hrefmajors.html专业介绍/a/li lia hrefadmissions.html招生就业/a/li lia hrefcampus.html校园文化/a/li lia hrefcontact.html联系我们/a/li /ul /nav /div /header main classsite-main !-- 各页面内容写在这里 -- /main footer classsite-footer div classcontainer p版权所有 © 师范高等学院 | 地址XX省XX市XX区XX路XX号/p p联系电话0000-00000000 | 邮箱webmasterexample.com/p /div /footer script srcjs/common.js/script /body /html这段骨架里几个点值得说清楚。langzh-CN是给浏览器和屏幕阅读器看的写作业别省。viewport那行不加的话手机上打开会缩成一团老师用手机看你的作业直接扣分。导航里classactive是当前页高亮每个页面复制过去之后记得把 active 挪到对应的a上这个后面用 JS 也能自动做但手动改最稳。main标签是 HTML5 语义化标签比一堆 div 强答辩的时候也能说得出理由。3. 公共 CSS 怎么写导航、卡片、页脚一次调好3.1 reset 和 common 的分工要明确reset.css 只做一件事把浏览器默认的 margin、padding、list-style 清掉让各浏览器起点一致。内容很短* { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; }box-sizing: border-box是关键不写这个后面算宽度能算到崩溃。img设成 block 是为了去掉图片底部的幽灵间隙这个坑我踩过不止一次图片下面莫名其妙多出几像素空白查半天才发现是 inline 元素的基线对齐问题。common.css 放全站复用的组件。导航栏我用 flex 布局比 float 省心.container { width: 1200px; margin: 0 auto; } .site-header { background-color: #1a3a6b; position: sticky; top: 0; z-index: 100; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; } .main-nav ul { display: flex; gap: 28px; } .main-nav a { color: #fff; font-size: 15px; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color 0.3s; } .main-nav a:hover, .main-nav a.active { border-bottom-color: #f0c040; }position: sticky让导航吸顶滚动的时候一直能看到这个细节老师通常会注意到。gap控制导航项间距比给每个 li 加 margin-right 干净。hover 和 active 用同一条下划线样式视觉统一。颜色我选了深蓝配金黄师范类院校用这个配色比较稳不会太跳。3.2 卡片网格用 grid两行代码搞定响应式师资队伍和图库页面都是卡片网格用 grid 写最省事.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; padding: 40px 0; } .card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); transition: transform 0.3s, box-shadow 0.3s; } .card:hover { transform: translateY(-6px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .card img { width: 100%; height: 200px; object-fit: cover; } .card-body { padding: 16px; } .card-body h3 { font-size: 17px; margin-bottom: 8px; color: #1a3a6b; } .card-body p { font-size: 14px; color: #666; line-height: 1.6; }repeat(auto-fill, minmax(260px, 1fr))这行的意思是每列最小 260px能塞几列塞几列剩余空间平分。不用写媒体查询就能自适应窗口拉窄了自动从四列变三列变两列。object-fit: cover保证图片裁切填充不变形教师头像尺寸不统一的时候特别有用。hover 上浮效果加个 transition鼠标移上去有反馈答辩演示的时候观感好很多。3.3 页脚和返回顶部小细节决定完成度页脚简单处理深色底白字居中.site-footer { background-color: #1a3a6b; color: #ccc; text-align: center; padding: 30px 0; font-size: 13px; line-height: 2; margin-top: 60px; }返回顶部按钮用固定定位JS 控制显示隐藏.back-to-top { position: fixed; right: 30px; bottom: 40px; width: 44px; height: 44px; background: #1a3a6b; color: #fff; border: none; border-radius: 50%; font-size: 20px; cursor: pointer; display: none; z-index: 99; } .back-to-top.show { display: block; }对应的 JS 在 common.js 里// 返回顶部按钮滚动超过 300px 显示点击平滑回顶 const backToTop document.querySelector(.back-to-top); window.addEventListener(scroll, function () { if (window.scrollY 300) { backToTop.classList.add(show); } else { backToTop.classList.remove(show); } }); backToTop.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); });window.scrollY 300这个阈值可以按页面高度调300 是个比较舒服的值太早出现会挡内容。behavior: smooth让滚动有过渡比瞬间跳上去自然。这个按钮每个页面都要有所以 HTML 里把它放在body末尾、script之前12 个页面统一加。4. 首页和列表页的交互轮播、导航高亮、图库放大4.1 轮播图不引插件手写一个够用的首页 banner 轮播是加分项但引 Swiper 这类插件对期末作业来说有点重手写一个简单的自动切换就够div classbanner div classbanner-slides img srcimages/banner/1.jpg alt校园风光 classslide active img srcimages/banner/2.jpg alt教学楼 classslide img srcimages/banner/3.jpg alt图书馆 classslide /div div classbanner-dots span classdot active>.banner { position: relative; height: 420px; overflow: hidden; } .banner-slides { height: 100%; } .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s; } .slide.active { opacity: 1; } .banner-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; } .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; } .dot.active { background: #f0c040; }// 轮播每 3 秒切换一张点击圆点跳转对应图 const slides document.querySelectorAll(.slide); const dots document.querySelectorAll(.dot); let current 0; let timer null; function goTo(index) { slides[current].classList.remove(active); dots[current].classList.remove(active); current index; slides[current].classList.add(active); dots[current].classList.add(active); } function next() { goTo((current 1) % slides.length); } function startAuto() { timer setInterval(next, 3000); } function stopAuto() { clearInterval(timer); } dots.forEach(function (dot) { dot.addEventListener(click, function () { stopAuto(); goTo(Number(this.dataset.index)); startAuto(); }); }); startAuto();opacity切换比display切换多了过渡效果视觉上更顺。(current 1) % slides.length保证到最后一张回到第一张。点击圆点后先停掉自动播放再重新开始避免用户刚点完就被自动切走。这个轮播逻辑简单答辩的时候能一行行讲清楚比说「我用了某个插件」有说服力。4.2 导航高亮用 JS 自动判断省得每页手改前面说手动改 active 最稳但 12 个页面改起来也烦。用 JS 根据当前 URL 自动加高亮更省事// 根据当前页面路径自动高亮导航项 const navLinks document.querySelectorAll(.main-nav a); const currentPage window.location.pathname.split(/).pop() || index.html; navLinks.forEach(function (link) { const href link.getAttribute(href); if (href currentPage) { link.classList.add(active); } });window.location.pathname.split(/).pop()拿到当前文件名跟导航链接的 href 比对。注意首页要处理空值的情况|| index.html就是干这个的。这段代码放在 common.js 里每个页面引入后自动生效不用再手动改 active。4.3 图库点击放大一个遮罩层解决gallery.html 的图片点击放大不用引 lightbox自己写个遮罩层div classlightbox idlightbox img src alt放大预览 idlightbox-img /div.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; z-index: 200; cursor: zoom-out; } .lightbox.show { display: flex; } .lightbox img { max-width: 90%; max-height: 85%; border-radius: 4px; }// 图库点击放大点击缩略图显示遮罩层大图点击遮罩关闭 const galleryItems document.querySelectorAll(.card img); const lightbox document.getElementById(lightbox); const lightboxImg document.getElementById(lightbox-img); galleryItems.forEach(function (img) { img.addEventListener(click, function () { lightboxImg.src this.src; lightbox.classList.add(show); }); }); lightbox.addEventListener(click, function () { this.classList.remove(show); });inset: 0是top/right/bottom/left的简写撑满全屏。点击遮罩任意位置关闭不用额外加关闭按钮。max-width: 90%和max-height: 85%保证大图不会超出屏幕。这个交互代码量少效果直观演示的时候点开一张图就能说明白。5. 避坑与排查12 个页面最容易翻车的 5 个地方5.1 页面之间样式不一致多半是 CSS 路径写错了现象首页样式正常点进 about.html 导航变成默认蓝色下划线布局全乱。原因about.html 在根目录但 CSS 引用写成了hrefcss/common.css路径没错问题出在有些页面被放进了子文件夹或者复制的时候路径被改成了../css/common.css。解决所有页面保持在同一层级CSS 引用统一用相对路径css/common.css不要有的页面加./有的不加。检查方法很简单打开浏览器控制台看 Network 面板CSS 文件是不是 404。5.2 图片不显示文件名大小写是重灾区现象本地打开图片正常换台电脑或者交上去之后图片全裂。原因Windows 文件系统不区分大小写Images/Logo.PNG和images/logo.png都能找到但有些环境区分大小写直接 404。解决文件名全部用小写扩展名也统一小写HTML 里引用的时候跟实际文件名一字不差。另外图片路径里不要有空格和中文images/校园风光 1.jpg这种写法在某些浏览器里会出问题。5.3 导航 active 高亮错位首页和二级页抢类名现象首页导航高亮了「学校概况」或者两个导航项同时高亮。原因手动改 active 的时候复制粘贴漏改了或者 JS 自动判断的逻辑跟手动写的 active 冲突了。解决二选一要么全手动改要么全交给 JS。我一般用 JS 自动判断然后把 HTML 里所有手写的 active 删干净。如果发现高亮不对先检查window.location.pathname拿到的值是不是你预期的文件名。5.4 轮播图切换时闪烁opacity 和 z-index 没配合好现象轮播切换的时候图片闪一下或者两张图叠在一起。原因所有 slide 都是position: absoluteopacity 从 0 到 1 过渡的时候如果 z-index 没控制好下面的图会透出来。解决给.slide.active加z-index: 1非 active 的保持默认。另外确保所有 slide 的尺寸一致object-fit: cover要加不然图片比例不同切换时会跳。5.5 表单提交后页面刷新login.html 的校验白做了现象login.html 点击登录按钮页面刷新一下校验提示闪一下就没了。原因form默认提交行为会刷新页面JS 校验还没执行完就被打断了。解决给 form 加onsubmitreturn false或者在 JS 里event.preventDefault()。下面这段是 login.html 的校验逻辑// 登录表单校验阻止默认提交检查用户名和密码是否为空 const loginForm document.getElementById(login-form); loginForm.addEventListener(submit, function (e) { e.preventDefault(); const username document.getElementById(username).value.trim(); const password document.getElementById(password).value.trim(); const tip document.getElementById(tip); if (!username) { tip.textContent 请输入用户名; return; } if (!password) { tip.textContent 请输入密码; return; } if (password.length 6) { tip.textContent 密码不能少于 6 位; return; } tip.textContent 校验通过正在跳转...; });e.preventDefault()是必须的不写这行后面全白搭。trim()去掉首尾空格防止用户输入一堆空格被当成有效内容。校验顺序从空到长度逐层拦截提示信息要具体别只写「输入有误」。6. 交作业前怎么自检一套 10 分钟能跑完的检查清单代码写完不等于能交我每次收尾都会跑一遍下面这套检查10 分钟能过完能挡掉大部分低级问题。先看控制台。打开每个页面按 F12 看 Console 有没有红色报错再看 Network 面板有没有 404 的资源。这一步能发现路径错误、JS 语法错误、图片缺失。很多人写完不检查控制台交上去被老师打开一看一堆红字印象分直接没了。再点一遍所有链接。12 个页面之间的跳转、导航栏、页脚链接、卡片上的「查看详情」每个都点一下确认没有死链。特别留意那些href#的占位链接要么补上真实页面要么改成javascript:void(0)并加个提示别让老师点上去没反应。然后缩窗口。把浏览器从全屏慢慢拉窄看导航会不会挤成一团、卡片会不会溢出、文字会不会重叠。1200px 的容器在窄屏下要有兜底至少加一条media (max-width: 1240px) { .container { width: 95%; } }让它在小屏上不至于横向滚动。接着检查表单。login.html 和 contact.html 的留言表单空提交、超长输入、特殊字符都试一遍看提示信息是否正常显示页面是否被刷新。表单校验是老师最爱测的地方因为交互直观一眼就能看出你有没有认真做。最后换浏览器。至少用 Chrome 和 Edge 各开一遍有条件的话用 Firefox 再看一眼。不同浏览器对gap、sticky、object-fit的支持都很好但如果你用了某些新属性还是确认一下。IE 就不用管了现在没人用。注意交作业前把images/文件夹整个拷一份备份改崩了能随时回退。我见过有人改到最后把首页改坏了又没有备份只能重写。这套 12 页面的方案核心思路就是「先定结构、再抽公共、最后补交互」。结构定好了后面写 CSS 和 JS 都是顺水推舟。我自己的习惯是每写完三个页面就打开浏览器整体点一遍别等 12 个全写完再检查那时候改起来牵一发动全身。希望帮到你。本文还有配套的精品资源点击获取
简介这份资源是一套面向师范高等学院主题的HTML网页设计成品适合大学生用于HTML5期末作业、Web前端课程实训或网页制作入门练手。整包共41个文件以12个html页面为主体搭配1个css样式表统一控制布局与配色另有webp、png、jpg、gif等图片素材用于横幅、图标与新闻配图以及少量xml配置文件压缩包约1.39MB结构轻量、便于直接运行与二次修改。页面模块覆盖首页、系部概况、机构设置、教学科研、团学在线、招生就业、公共服务、新闻中心及新闻详情、信息公开、统一信息门户等基本还原高校官网常见栏目层级可帮助读者理解多页面站点的导航组织、内容排版与样式复用方式。目前已有81人学习下载适合需要快速获取完整页面框架、对照练习HTMLCSSJS基础布局与交互效果的同学参考使用。1. 师范高等学院 12 个页面从零搭一套能交差的 HTML5 期末作业每年期末前两周总有人翻出「htmlcssjs网页设计 师范高等学院 12个页面」这个关键词想找一套能直接跑、能改、能讲清楚逻辑的成品。我带过几届学生的课程设计也帮人改过不少「看着能跑、一打开就散架」的作业最常见的翻车不是代码写不出来而是页面之间没有统一结构首页能看点进二级页就露馅。这套方案要解决的就是这件事用一套可复用的 HTML5 骨架加一份公共 CSS把师范高等学院的 12 个页面串成一个完整站点首页、院系介绍、师资队伍、招生就业、校园文化、联系我们这些典型栏目都能覆盖。适合正在做 Web 前端期末作业、需要交一份结构完整、样式统一、带少量 JS 交互的大学生也适合刚接触 html css 网页制作、想拿一个真实多页项目练手的初学者。整套东西不依赖框架浏览器直接打开就能看改起来也不费劲。2. 12 个页面怎么切分师范高等学院的栏目规划与文件结构2.1 先定栏目再写代码别反过来很多人一上来就打开编辑器写首页写到第三个页面发现导航对不上又回头改来回折腾。我的习惯是先在纸上把 12 个页面列清楚再动手。师范高等学院这类站点的信息架构其实很固定按「学校概况 → 教学单位 → 师资 → 招生 → 校园生活 → 服务」这条线走基本不会漏。具体切分如下序号页面文件名页面主题主要内容块1index.html首页轮播 banner、新闻动态、通知公告、快速入口2about.html学校概况学校简介、历史沿革、办学定位3departments.html院系设置各二级学院列表与简介4teachers.html师资队伍教师卡片、职称筛选5majors.html专业介绍专业方向、培养目标、核心课程6admissions.html招生就业招生简章、就业数据7campus.html校园文化社团活动、校园风光8news.html新闻中心新闻列表、分页样式9notice.html通知公告公告列表、时间排序10gallery.html校园图库图片网格、点击放大11contact.html联系我们地址、地图占位、留言表单12login.html教务登录登录表单、表单校验这份表不是随便排的它决定了后面导航栏怎么写、CSS 类名怎么起。比如 news.html 和 notice.html 都是列表页可以共用一套列表样式teachers.html 和 gallery.html 都是卡片网格可以共用 grid 布局。提前想清楚这些CSS 能少写三分之一。2.2 目录结构定死后面谁改都不乱文件结构我一般这么放简单但够用shifan-college/ ├── index.html ├── about.html ├── departments.html ├── teachers.html ├── majors.html ├── admissions.html ├── campus.html ├── news.html ├── notice.html ├── gallery.html ├── contact.html ├── login.html ├── css/ │ ├── reset.css │ ├── common.css │ └── pages.css ├── js/ │ ├── common.js │ └── gallery.js └── images/ ├── banner/ ├── teachers/ └── campus/reset.css 清默认样式common.css 放导航、页脚、按钮这些全站复用的pages.css 放各页面特有的。js 只留两个文件common.js 管导航高亮和返回顶部gallery.js 管图库放大。这样交作业的时候老师一看结构就知道你是有组织地写的不是东拼西凑。提示文件名全部用小写英文不要用中文名。有些老师会在不同系统上打开你的作业中文文件名在某些环境下会变成乱码到时候图片加载不出来解释都解释不清。2.3 公共头尾抽出来12 个页面才不会各写各的纯静态 HTML 没有 include公共部分只能复制。但复制也要复制得聪明——先把头部和尾部在一张页面上调好确认没问题了再整段拷到其他 11 个页面只改中间内容区和title。下面是我常用的头部结构!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title师范高等学院 - 首页/title link relstylesheet hrefcss/reset.css link relstylesheet hrefcss/common.css link relstylesheet hrefcss/pages.css /head body header classsite-header div classcontainer header-inner a hrefindex.html classlogo img srcimages/logo.png alt师范高等学院 /a nav classmain-nav ul lia hrefindex.html classactive首页/a/li lia hrefabout.html学校概况/a/li lia hrefdepartments.html院系设置/a/li lia hrefteachers.html师资队伍/a/li lia hrefmajors.html专业介绍/a/li lia hrefadmissions.html招生就业/a/li lia hrefcampus.html校园文化/a/li lia hrefcontact.html联系我们/a/li /ul /nav /div /header main classsite-main !-- 各页面内容写在这里 -- /main footer classsite-footer div classcontainer p版权所有 © 师范高等学院 | 地址XX省XX市XX区XX路XX号/p p联系电话0000-00000000 | 邮箱webmasterexample.com/p /div /footer script srcjs/common.js/script /body /html这段骨架里几个点值得说清楚。langzh-CN是给浏览器和屏幕阅读器看的写作业别省。viewport那行不加的话手机上打开会缩成一团老师用手机看你的作业直接扣分。导航里classactive是当前页高亮每个页面复制过去之后记得把 active 挪到对应的a上这个后面用 JS 也能自动做但手动改最稳。main标签是 HTML5 语义化标签比一堆 div 强答辩的时候也能说得出理由。3. 公共 CSS 怎么写导航、卡片、页脚一次调好3.1 reset 和 common 的分工要明确reset.css 只做一件事把浏览器默认的 margin、padding、list-style 清掉让各浏览器起点一致。内容很短* { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; }box-sizing: border-box是关键不写这个后面算宽度能算到崩溃。img设成 block 是为了去掉图片底部的幽灵间隙这个坑我踩过不止一次图片下面莫名其妙多出几像素空白查半天才发现是 inline 元素的基线对齐问题。common.css 放全站复用的组件。导航栏我用 flex 布局比 float 省心.container { width: 1200px; margin: 0 auto; } .site-header { background-color: #1a3a6b; position: sticky; top: 0; z-index: 100; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; } .main-nav ul { display: flex; gap: 28px; } .main-nav a { color: #fff; font-size: 15px; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color 0.3s; } .main-nav a:hover, .main-nav a.active { border-bottom-color: #f0c040; }position: sticky让导航吸顶滚动的时候一直能看到这个细节老师通常会注意到。gap控制导航项间距比给每个 li 加 margin-right 干净。hover 和 active 用同一条下划线样式视觉统一。颜色我选了深蓝配金黄师范类院校用这个配色比较稳不会太跳。3.2 卡片网格用 grid两行代码搞定响应式师资队伍和图库页面都是卡片网格用 grid 写最省事.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; padding: 40px 0; } .card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); transition: transform 0.3s, box-shadow 0.3s; } .card:hover { transform: translateY(-6px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .card img { width: 100%; height: 200px; object-fit: cover; } .card-body { padding: 16px; } .card-body h3 { font-size: 17px; margin-bottom: 8px; color: #1a3a6b; } .card-body p { font-size: 14px; color: #666; line-height: 1.6; }repeat(auto-fill, minmax(260px, 1fr))这行的意思是每列最小 260px能塞几列塞几列剩余空间平分。不用写媒体查询就能自适应窗口拉窄了自动从四列变三列变两列。object-fit: cover保证图片裁切填充不变形教师头像尺寸不统一的时候特别有用。hover 上浮效果加个 transition鼠标移上去有反馈答辩演示的时候观感好很多。3.3 页脚和返回顶部小细节决定完成度页脚简单处理深色底白字居中.site-footer { background-color: #1a3a6b; color: #ccc; text-align: center; padding: 30px 0; font-size: 13px; line-height: 2; margin-top: 60px; }返回顶部按钮用固定定位JS 控制显示隐藏.back-to-top { position: fixed; right: 30px; bottom: 40px; width: 44px; height: 44px; background: #1a3a6b; color: #fff; border: none; border-radius: 50%; font-size: 20px; cursor: pointer; display: none; z-index: 99; } .back-to-top.show { display: block; }对应的 JS 在 common.js 里// 返回顶部按钮滚动超过 300px 显示点击平滑回顶 const backToTop document.querySelector(.back-to-top); window.addEventListener(scroll, function () { if (window.scrollY 300) { backToTop.classList.add(show); } else { backToTop.classList.remove(show); } }); backToTop.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); });window.scrollY 300这个阈值可以按页面高度调300 是个比较舒服的值太早出现会挡内容。behavior: smooth让滚动有过渡比瞬间跳上去自然。这个按钮每个页面都要有所以 HTML 里把它放在body末尾、script之前12 个页面统一加。4. 首页和列表页的交互轮播、导航高亮、图库放大4.1 轮播图不引插件手写一个够用的首页 banner 轮播是加分项但引 Swiper 这类插件对期末作业来说有点重手写一个简单的自动切换就够div classbanner div classbanner-slides img srcimages/banner/1.jpg alt校园风光 classslide active img srcimages/banner/2.jpg alt教学楼 classslide img srcimages/banner/3.jpg alt图书馆 classslide /div div classbanner-dots span classdot active>.banner { position: relative; height: 420px; overflow: hidden; } .banner-slides { height: 100%; } .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s; } .slide.active { opacity: 1; } .banner-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; } .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; } .dot.active { background: #f0c040; }// 轮播每 3 秒切换一张点击圆点跳转对应图 const slides document.querySelectorAll(.slide); const dots document.querySelectorAll(.dot); let current 0; let timer null; function goTo(index) { slides[current].classList.remove(active); dots[current].classList.remove(active); current index; slides[current].classList.add(active); dots[current].classList.add(active); } function next() { goTo((current 1) % slides.length); } function startAuto() { timer setInterval(next, 3000); } function stopAuto() { clearInterval(timer); } dots.forEach(function (dot) { dot.addEventListener(click, function () { stopAuto(); goTo(Number(this.dataset.index)); startAuto(); }); }); startAuto();opacity切换比display切换多了过渡效果视觉上更顺。(current 1) % slides.length保证到最后一张回到第一张。点击圆点后先停掉自动播放再重新开始避免用户刚点完就被自动切走。这个轮播逻辑简单答辩的时候能一行行讲清楚比说「我用了某个插件」有说服力。4.2 导航高亮用 JS 自动判断省得每页手改前面说手动改 active 最稳但 12 个页面改起来也烦。用 JS 根据当前 URL 自动加高亮更省事// 根据当前页面路径自动高亮导航项 const navLinks document.querySelectorAll(.main-nav a); const currentPage window.location.pathname.split(/).pop() || index.html; navLinks.forEach(function (link) { const href link.getAttribute(href); if (href currentPage) { link.classList.add(active); } });window.location.pathname.split(/).pop()拿到当前文件名跟导航链接的 href 比对。注意首页要处理空值的情况|| index.html就是干这个的。这段代码放在 common.js 里每个页面引入后自动生效不用再手动改 active。4.3 图库点击放大一个遮罩层解决gallery.html 的图片点击放大不用引 lightbox自己写个遮罩层div classlightbox idlightbox img src alt放大预览 idlightbox-img /div.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; z-index: 200; cursor: zoom-out; } .lightbox.show { display: flex; } .lightbox img { max-width: 90%; max-height: 85%; border-radius: 4px; }// 图库点击放大点击缩略图显示遮罩层大图点击遮罩关闭 const galleryItems document.querySelectorAll(.card img); const lightbox document.getElementById(lightbox); const lightboxImg document.getElementById(lightbox-img); galleryItems.forEach(function (img) { img.addEventListener(click, function () { lightboxImg.src this.src; lightbox.classList.add(show); }); }); lightbox.addEventListener(click, function () { this.classList.remove(show); });inset: 0是top/right/bottom/left的简写撑满全屏。点击遮罩任意位置关闭不用额外加关闭按钮。max-width: 90%和max-height: 85%保证大图不会超出屏幕。这个交互代码量少效果直观演示的时候点开一张图就能说明白。5. 避坑与排查12 个页面最容易翻车的 5 个地方5.1 页面之间样式不一致多半是 CSS 路径写错了现象首页样式正常点进 about.html 导航变成默认蓝色下划线布局全乱。原因about.html 在根目录但 CSS 引用写成了hrefcss/common.css路径没错问题出在有些页面被放进了子文件夹或者复制的时候路径被改成了../css/common.css。解决所有页面保持在同一层级CSS 引用统一用相对路径css/common.css不要有的页面加./有的不加。检查方法很简单打开浏览器控制台看 Network 面板CSS 文件是不是 404。5.2 图片不显示文件名大小写是重灾区现象本地打开图片正常换台电脑或者交上去之后图片全裂。原因Windows 文件系统不区分大小写Images/Logo.PNG和images/logo.png都能找到但有些环境区分大小写直接 404。解决文件名全部用小写扩展名也统一小写HTML 里引用的时候跟实际文件名一字不差。另外图片路径里不要有空格和中文images/校园风光 1.jpg这种写法在某些浏览器里会出问题。5.3 导航 active 高亮错位首页和二级页抢类名现象首页导航高亮了「学校概况」或者两个导航项同时高亮。原因手动改 active 的时候复制粘贴漏改了或者 JS 自动判断的逻辑跟手动写的 active 冲突了。解决二选一要么全手动改要么全交给 JS。我一般用 JS 自动判断然后把 HTML 里所有手写的 active 删干净。如果发现高亮不对先检查window.location.pathname拿到的值是不是你预期的文件名。5.4 轮播图切换时闪烁opacity 和 z-index 没配合好现象轮播切换的时候图片闪一下或者两张图叠在一起。原因所有 slide 都是position: absoluteopacity 从 0 到 1 过渡的时候如果 z-index 没控制好下面的图会透出来。解决给.slide.active加z-index: 1非 active 的保持默认。另外确保所有 slide 的尺寸一致object-fit: cover要加不然图片比例不同切换时会跳。5.5 表单提交后页面刷新login.html 的校验白做了现象login.html 点击登录按钮页面刷新一下校验提示闪一下就没了。原因form默认提交行为会刷新页面JS 校验还没执行完就被打断了。解决给 form 加onsubmitreturn false或者在 JS 里event.preventDefault()。下面这段是 login.html 的校验逻辑// 登录表单校验阻止默认提交检查用户名和密码是否为空 const loginForm document.getElementById(login-form); loginForm.addEventListener(submit, function (e) { e.preventDefault(); const username document.getElementById(username).value.trim(); const password document.getElementById(password).value.trim(); const tip document.getElementById(tip); if (!username) { tip.textContent 请输入用户名; return; } if (!password) { tip.textContent 请输入密码; return; } if (password.length 6) { tip.textContent 密码不能少于 6 位; return; } tip.textContent 校验通过正在跳转...; });e.preventDefault()是必须的不写这行后面全白搭。trim()去掉首尾空格防止用户输入一堆空格被当成有效内容。校验顺序从空到长度逐层拦截提示信息要具体别只写「输入有误」。6. 交作业前怎么自检一套 10 分钟能跑完的检查清单代码写完不等于能交我每次收尾都会跑一遍下面这套检查10 分钟能过完能挡掉大部分低级问题。先看控制台。打开每个页面按 F12 看 Console 有没有红色报错再看 Network 面板有没有 404 的资源。这一步能发现路径错误、JS 语法错误、图片缺失。很多人写完不检查控制台交上去被老师打开一看一堆红字印象分直接没了。再点一遍所有链接。12 个页面之间的跳转、导航栏、页脚链接、卡片上的「查看详情」每个都点一下确认没有死链。特别留意那些href#的占位链接要么补上真实页面要么改成javascript:void(0)并加个提示别让老师点上去没反应。然后缩窗口。把浏览器从全屏慢慢拉窄看导航会不会挤成一团、卡片会不会溢出、文字会不会重叠。1200px 的容器在窄屏下要有兜底至少加一条media (max-width: 1240px) { .container { width: 95%; } }让它在小屏上不至于横向滚动。接着检查表单。login.html 和 contact.html 的留言表单空提交、超长输入、特殊字符都试一遍看提示信息是否正常显示页面是否被刷新。表单校验是老师最爱测的地方因为交互直观一眼就能看出你有没有认真做。最后换浏览器。至少用 Chrome 和 Edge 各开一遍有条件的话用 Firefox 再看一眼。不同浏览器对gap、sticky、object-fit的支持都很好但如果你用了某些新属性还是确认一下。IE 就不用管了现在没人用。注意交作业前把images/文件夹整个拷一份备份改崩了能随时回退。我见过有人改到最后把首页改坏了又没有备份只能重写。这套 12 页面的方案核心思路就是「先定结构、再抽公共、最后补交互」。结构定好了后面写 CSS 和 JS 都是顺水推舟。我自己的习惯是每写完三个页面就打开浏览器整体点一遍别等 12 个全写完再检查那时候改起来牵一发动全身。希望帮到你。本文还有配套的精品资源点击获取
