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