簡(jiǎn)介這份資源是一套面向師范高等學(xué)院主題的HTML5網(wǎng)頁(yè)設(shè)計(jì)成品適合大學(xué)生用于Web前端期末作業(yè)、課程設(shè)計(jì)或HTMLCSSJS綜合實(shí)訓(xùn)。整站共12個(gè)頁(yè)面涵蓋首頁(yè)、新聞中心、新聞詳情、招生就業(yè)、教學(xué)科研、團(tuán)學(xué)在線、公共服務(wù)、機(jī)構(gòu)設(shè)置、系部概況、信息公開(kāi)與統(tǒng)一信息門(mén)戶(hù)等模塊結(jié)構(gòu)貼近高校官網(wǎng)真實(shí)場(chǎng)景便于直接參考或二次修改。壓縮包共41個(gè)文件約1.39MB包含12個(gè)html頁(yè)面、1個(gè)css樣式表以及webp、png、jpg、gif等圖片素材和xml配置文件頁(yè)面與樣式、圖像資源分層存放目錄組織清晰方便按模塊查找替換。目前已有81人學(xué)習(xí)下載。對(duì)于需要完成HTML5期末作業(yè)或前端入門(mén)練習(xí)的同學(xué)可借此了解多頁(yè)面站點(diǎn)的導(dǎo)航組織、公共樣式復(fù)用與圖文排版思路快速搭建出結(jié)構(gòu)完整、風(fēng)格統(tǒng)一的校園類(lèi)網(wǎng)頁(yè)作品。1. 師范高等學(xué)院官網(wǎng) 12 頁(yè)整站一份能直接交的 HTMLCSSJS 期末作業(yè)長(zhǎng)什么樣每年期末前兩周總有人被師范高等學(xué)院 12 個(gè)頁(yè)面這類(lèi)題目卡住——不是不會(huì)寫(xiě)單個(gè)頁(yè)面而是不知道 12 個(gè)頁(yè)面怎么分工、導(dǎo)航怎么串、樣式怎么復(fù)用最后交上去的成品要么是 12 個(gè)孤島要么是復(fù)制粘貼到連頁(yè)腳都一模一樣。這份作業(yè)真正考的不是你會(huì)不會(huì)寫(xiě)div而是你能不能把一個(gè)學(xué)院的官網(wǎng)拆成首頁(yè)、院系概況、師資隊(duì)伍、招生就業(yè)、黨建思政、校園文化、通知公告、聯(lián)系我們等模塊用一套公共 CSS 和一段公共 JS 把它們粘成一個(gè)整體。它適合正在趕 Web 前端期末作業(yè)的大學(xué)生也適合想拿一個(gè)完整靜態(tài)站練手的初學(xué)者。下面我按自己帶學(xué)生改作業(yè)的順序把 12 個(gè)頁(yè)面從目錄結(jié)構(gòu)到交互細(xì)節(jié)拆開(kāi)講參數(shù)、命令、踩坑點(diǎn)都給到照著做能跑通也能看出邊界在哪。2. 12 個(gè)頁(yè)面怎么分工目錄結(jié)構(gòu)、公共資源與導(dǎo)航串聯(lián)2.1 先定目錄再寫(xiě)第一行 HTML很多人一上來(lái)就打開(kāi)編輯器寫(xiě)首頁(yè)寫(xiě)到第 5 個(gè)頁(yè)面發(fā)現(xiàn)圖片路徑全亂、CSS 重復(fù)三份。正確順序是先建目錄。師范高等學(xué)院官網(wǎng)這種體量推薦扁平化結(jié)構(gòu)所有 HTML 放根目錄資源分文件夾# 在桌面新建項(xiàng)目文件夾進(jìn)入后執(zhí)行 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執(zhí)行完你會(huì)得到 12 個(gè)空 HTML 文件加 4 個(gè)資源目錄。css放公共樣式和頁(yè)面級(jí)樣式j(luò)s放公共腳本images放?；铡anner、師資照片uploads放通知公告里的附件圖標(biāo)。為什么扁平化因?yàn)槠谀┳鳂I(yè)通常用file://直接雙擊打開(kāi)路徑層級(jí)越深越容易在../上翻車(chē)。12 個(gè)頁(yè)面全部與css、js、images同級(jí)引用統(tǒng)一寫(xiě)成css/style.css、images/logo.png不用管相對(duì)層級(jí)。提示文件名全小寫(xiě)、用英文或拼音別用首頁(yè).html師資隊(duì)伍.html。部分瀏覽器和打包工具對(duì)中文文件名支持不穩(wěn)交作業(yè)前改名能省一堆玄學(xué)問(wèn)題。2.2 公共頭部、導(dǎo)航和頁(yè)腳一次寫(xiě)對(duì)12 頁(yè)復(fù)用12 個(gè)頁(yè)面最大的浪費(fèi)是每個(gè)頁(yè)面重寫(xiě)一遍導(dǎo)航。做法是先把頭部結(jié)構(gòu)定死然后復(fù)制到每個(gè)頁(yè)面。下面這段是公共頭部的骨架注意meta charsetutf-8和 viewport 必須每個(gè)頁(yè)面都有!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title師范高等學(xué)院 - 首頁(yè)/title link relstylesheet hrefcss/style.css /head body header classsite-header div classlogo img srcimages/logo.png alt師范高等學(xué)院校徽 span師范高等學(xué)院/span /div nav classmain-nav ul lia hrefindex.html classactive首頁(yè)/a/li lia hrefabout.html學(xué)院概況/a/li lia hrefdepartments.html院系設(shè)置/a/li lia hreffaculty.html師資隊(duì)伍/a/li lia hrefmajors.html專(zhuān)業(yè)介紹/a/li lia hrefadmissions.html招生就業(yè)/a/li lia hrefparty.html黨建思政/a/li lia hrefcampus.html校園文化/a/li lia hrefnews.html新聞動(dòng)態(tài)/a/li lia hrefnotice.html通知公告/a/li lia hrefstudents.html學(xué)生工作/a/li lia hrefcontact.html聯(lián)系我們/a/li /ul /nav /header main classpage-main!-- 各頁(yè)面內(nèi)容 --/main footer classsite-footer p版權(quán)所有 ? 師范高等學(xué)院 | 地址XX省XX市XX路1號(hào) | 電話0000-0000000/p /footer script srcjs/main.js/script /body /html邏輯說(shuō)明header里放 logo 和 12 項(xiàng)主導(dǎo)航正好對(duì)應(yīng) 12 個(gè)頁(yè)面classactive標(biāo)記當(dāng)前頁(yè)靠 CSS 高亮。main是每個(gè)頁(yè)面唯一變化的部分footer統(tǒng)一版權(quán)信息。參數(shù)上langzh-cn影響中文斷行和字體回退charsetutf-8不寫(xiě)會(huì)出現(xiàn)中文亂碼——這是新手最高頻的翻車(chē)點(diǎn)。復(fù)制時(shí)只改title、active類(lèi)的位置和main里的內(nèi)容其余不動(dòng)。2.3 用一套 CSS 變量管住 12 個(gè)頁(yè)面的配色12 個(gè)頁(yè)面如果各寫(xiě)各的顏色改一次主色要改 12 遍。用 CSS 自定義屬性變量在:root里集中定義這是現(xiàn)代做法也是老師看代碼時(shí)判斷你有沒(méi)有工程意識(shí)的點(diǎn)/* css/style.css */ :root { --main-color: #1a5fb4; /* 學(xué)院主色深藍(lán) */ --accent-color: #e5a50a; /* 強(qiáng)調(diào)色用于按鈕和標(biāo)題裝飾 */ --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); }邏輯說(shuō)明:root里的變量全局可用改--main-color一處12 個(gè)頁(yè)面的導(dǎo)航高亮、按鈕、標(biāo)題裝飾全部跟著變。box-sizing: border-box讓 padding 不撐破寬度是布局不炸的基礎(chǔ)。max-width: 1200px加margin: 0 auto實(shí)現(xiàn)居中比寫(xiě)死寬度更穩(wěn)。參數(shù)怎么調(diào)主色換成學(xué)校 VI 色--max-width按屏幕適配需求改 10001400 之間gap控制導(dǎo)航項(xiàng)間距太擠就加大。2.4 導(dǎo)航高亮和返回頂部一段 JS 管全站12 個(gè)頁(yè)面手動(dòng)改active容易漏用 JS 根據(jù)當(dāng)前 URL 自動(dòng)高亮更省事順便把返回頂部也做了// js/main.js document.addEventListener(DOMContentLoaded, function () { // 1. 自動(dòng)高亮當(dāng)前導(dǎo)航 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 }); }); });邏輯說(shuō)明第一段取當(dāng)前文件名和導(dǎo)航href比對(duì)命中就加active這樣 12 個(gè)頁(yè)面共用一段腳本不用手改。第二段動(dòng)態(tài)創(chuàng)建返回頂部按鈕滾動(dòng)超過(guò) 300px 才顯示點(diǎn)擊平滑回頂。參數(shù)上300是顯示閾值頁(yè)面短可以調(diào)小behavior: smooth是平滑滾動(dòng)老瀏覽器不支持會(huì)直接跳不影響功能。注意腳本放在/body前或加DOMContentLoaded否則 DOM 還沒(méi)生成就查詢(xún)會(huì)拿到空。3. 首頁(yè)和列表頁(yè)的排版banner、柵格卡片與通知公告3.1 首頁(yè) banner 用純 CSS 做不依賴(lài)圖片首頁(yè) banner 是評(píng)分重點(diǎn)但很多同學(xué)直接貼一張大圖縮放就糊。用 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; }邏輯說(shuō)明linear-gradient三個(gè)色標(biāo)做出學(xué)院藍(lán)到強(qiáng)調(diào)金的過(guò)渡flex居中文字。參數(shù)上135deg是漸變角度改to right變水平height按內(nèi)容調(diào)移動(dòng)端要配媒體查詢(xún)降到 260px 左右。這樣 banner 不依賴(lài)外部圖片交作業(yè)時(shí)不會(huì)因?yàn)閳D片丟失而開(kāi)天窗。3.2 院系、專(zhuān)業(yè)、新聞?dòng)猛惶讝鸥窨ㄆ?2 個(gè)頁(yè)面里院系設(shè)置、專(zhuān)業(yè)介紹、新聞動(dòng)態(tài)、校園文化基本都是多條目卡片用一套柵格類(lèi)復(fù)用.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; } }邏輯說(shuō)明grid-template-columns: repeat(3, 1fr)一行三列g(shù)ap控制間距object-fit: cover讓圖片不變形地填滿。transition加hover位移是常見(jiàn)交互成本低效果好。參數(shù)上列數(shù)按內(nèi)容改 2 或 4媒體查詢(xún)?cè)?768px 以下降為單列這是移動(dòng)端適配的最低要求。注意box-shadow別太重0.08透明度比較克制。3.3 通知公告列表日期對(duì)齊和換行省略通知公告頁(yè)是列表型最容易出現(xiàn)日期和標(biāo)題對(duì)不齊、長(zhǎng)標(biāo)題換行難看。用 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; }邏輯說(shuō)明flex: 1讓標(biāo)題占滿剩余空間white-space: nowrap加text-overflow: ellipsis實(shí)現(xiàn)單行省略flex-shrink: 0保證日期不被壓縮。參數(shù)上margin-right是標(biāo)題和日期的安全距離border-bottom用虛線比實(shí)線更輕。如果標(biāo)題要顯示兩行再省略得用-webkit-line-clamp但兼容性要測(cè)期末作業(yè)單行省略足夠。4. 師資、招生、黨建頁(yè)面的差異化處理與表單4.1 師資隊(duì)伍頭像網(wǎng)格加信息卡師資頁(yè)和普通卡片不同重點(diǎn)是人物頭像和職稱(chēng)信息。用固定比例頭像避免大小不一.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; }邏輯說(shuō)明border-radius: 50%做圓形頭像object-fit: cover保證不拉伸固定140px讓網(wǎng)格整齊。參數(shù)上列數(shù) 4 適合師資多的學(xué)院人少改 3頭像尺寸和gap要匹配否則換行錯(cuò)位。注意圖片命名用拼音如zhangwei.jpg別用中文避免路徑問(wèn)題。4.2 招生就業(yè)時(shí)間線展示錄取流程招生頁(yè)適合用縱向時(shí)間線表達(dá)流程比純文字清楚.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; }邏輯說(shuō)明::before畫(huà)豎線每個(gè)li的::before畫(huà)圓點(diǎn)形成時(shí)間線。參數(shù)上left值要和padding-left配合圓點(diǎn)才落在線上top: 6px讓圓點(diǎn)和首行文字對(duì)齊。這是純 CSS 技巧不依賴(lài)圖片改顏色只動(dòng)變量。4.3 聯(lián)系我們表單校驗(yàn)和提交反饋聯(lián)系頁(yè)通常帶留言表單前端校驗(yàn)是加分項(xiàng)form idcontactForm classcontact-form input typetext namename placeholder您的姓名 required input typeemail nameemail placeholder郵箱 required textarea namemessage rows5 placeholder留言?xún)?nèi)容 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 個(gè)字); return; } if (!/^[^][^]\.[^]$/.test(email)) { alert(郵箱格式不正確); return; } if (msg.length 5) { alert(留言至少 5 個(gè)字); return; } alert(提交成功我們會(huì)盡快聯(lián)系您); this.reset(); });邏輯說(shuō)明required是瀏覽器原生校驗(yàn)JS 里再補(bǔ)長(zhǎng)度和郵箱正則雙保險(xiǎn)。e.preventDefault()阻止默認(rèn)提交因?yàn)殪o態(tài)站沒(méi)有后端。參數(shù)上姓名長(zhǎng)度閾值 2、留言 5 可按需調(diào)郵箱正則是最簡(jiǎn)版夠用但不覆蓋所有合法郵箱期末作業(yè)足夠。注意this.reset()清空表單提升體驗(yàn)。5. 避坑與排查12 頁(yè)作業(yè)最容易翻車(chē)的 5 個(gè)地方5.1 中文亂碼現(xiàn)象是頁(yè)面顯示錕斤拷現(xiàn)象打開(kāi)頁(yè)面中文變成亂碼方塊或錕斤拷。原因HTML 文件保存編碼和meta charset不一致常見(jiàn)于用記事本另存為 ANSI。解決編輯器統(tǒng)一存 UTF-8head第一行就寫(xiě)meta charsetutf-8兩者必須一致。VS Code 右下角能看到當(dāng)前編碼點(diǎn)一下選通過(guò)編碼保存改 UTF-8。5.2 圖片不顯示路徑大小寫(xiě)和中文名現(xiàn)象本地能看換臺(tái)電腦或打包后圖片全裂。原因Windows 路徑不區(qū)分大小寫(xiě)但有些環(huán)境區(qū)分Images/logo.png和images/logo.png在 Linux 下就是兩個(gè)路徑中文文件名在部分瀏覽器也會(huì)失效。解決目錄和文件名全小寫(xiě)英文引用路徑和實(shí)際路徑逐字符核對(duì)。用瀏覽器 F12 的 Network 面板看哪個(gè)請(qǐng)求 404一眼定位。5.3 導(dǎo)航高亮錯(cuò)位active寫(xiě)死在多個(gè)頁(yè)面現(xiàn)象點(diǎn)進(jìn)師資隊(duì)伍首頁(yè)還高亮著。原因復(fù)制頭部時(shí)忘了刪上一頁(yè)的active或者 JS 高亮和手寫(xiě)active沖突。解決要么全交給 2.4 的 JS 自動(dòng)高亮HTML 里不寫(xiě)active要么每頁(yè)只保留一個(gè)。兩者混用會(huì)出現(xiàn)兩個(gè)高亮排查時(shí)搜a(bǔ)ctive看出現(xiàn)幾次。5.4 布局錯(cuò)位浮動(dòng)沒(méi)清除或盒模型沒(méi)統(tǒng)一現(xiàn)象卡片換行、頁(yè)腳跑到中間、寬度超出屏幕出現(xiàn)橫向滾動(dòng)條。原因老式float沒(méi)清除浮動(dòng)或者沒(méi)設(shè)box-sizing: border-box導(dǎo)致 padding 撐破容器。解決統(tǒng)一用* { box-sizing: border-box; }布局優(yōu)先用 flex 和 grid少用 float。出現(xiàn)橫向滾動(dòng)條時(shí)給body臨時(shí)加outline: 1px solid red找超寬元素。5.5 返回頂部按鈕不出現(xiàn)或點(diǎn)了沒(méi)反應(yīng)現(xiàn)象滾動(dòng)很久按鈕不顯示或點(diǎn)了直接跳不是平滑。原因腳本在 DOM 生成前執(zhí)行querySelector拿到 null或?yàn)g覽器不支持behavior: smooth。解決腳本放/body前或包在DOMContentLoaded里平滑滾動(dòng)是增強(qiáng)不支持時(shí)直接跳頂也能接受別為它引入額外庫(kù)。6. 交作業(yè)前的自檢清單與一個(gè)提分技巧最后一章說(shuō)點(diǎn)實(shí)在的。12 個(gè)頁(yè)面寫(xiě)完別急著打包按這個(gè)順序過(guò)一遍先斷網(wǎng)雙擊index.html看樣式和圖片是否全在這一步能抓出所有路徑問(wèn)題再逐個(gè)點(diǎn) 12 個(gè)導(dǎo)航確認(rèn)每頁(yè)都能到、高亮都對(duì)、沒(méi)有 404然后縮窗口到手機(jī)寬度看有沒(méi)有橫向滾動(dòng)條和文字溢出最后 F12 看 Console 有沒(méi)有紅色報(bào)錯(cuò)有報(bào)錯(cuò)就修別留著。提分技巧是給每個(gè)頁(yè)面加一個(gè)當(dāng)前位置面包屑成本極低但顯得完整div classbreadcrumb a hrefindex.html首頁(yè)/a gt; span師資隊(duì)伍/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; }邏輯說(shuō)明面包屑放在main頂部告訴用戶(hù)和老師這是第幾層頁(yè)面12 個(gè)頁(yè)面各改一個(gè)span文字即可。參數(shù)上字號(hào)比正文小 2px顏色用灰不搶主內(nèi)容。這個(gè)細(xì)節(jié)在評(píng)分時(shí)屬于超出預(yù)期的部分寫(xiě)起來(lái)不到五分鐘。我自己的習(xí)慣是所有頁(yè)面寫(xiě)完先不碰樣式用純 HTML 把 12 個(gè)頁(yè)面的結(jié)構(gòu)和鏈接全部打通確認(rèn)導(dǎo)航閉環(huán)再回頭統(tǒng)一套 CSS。這樣返工最少也不會(huì)出現(xiàn)樣式寫(xiě)完了發(fā)現(xiàn)少一個(gè)頁(yè)面的血淚情況。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取