簡(jiǎn)介在網(wǎng)頁設(shè)計(jì)與前端開發(fā)中HTML負(fù)責(zé)內(nèi)容結(jié)構(gòu)CSS控制視覺表現(xiàn)JavaScript實(shí)現(xiàn)交互邏輯三者協(xié)同構(gòu)建現(xiàn)代網(wǎng)站。掌握Flex布局、CSS Grid等響應(yīng)式排版技術(shù)能顯著提升頁面在不同設(shè)備上的適配能力而合理運(yùn)用CSS動(dòng)效與JavaScript數(shù)據(jù)渲染則能增強(qiáng)用戶體驗(yàn)。這些基礎(chǔ)技術(shù)廣泛適用于個(gè)人主頁、專題展示、課程設(shè)計(jì)等場(chǎng)景。本文基于一套包含四套家鄉(xiāng)主題的網(wǎng)頁設(shè)計(jì)資源詳細(xì)拆解其目錄結(jié)構(gòu)、布局方法、CSS技巧及JavaScript常見問題幫助初學(xué)者理解模板代碼背后的原理并快速將其改造成自己的作品。 朋友轉(zhuǎn)發(fā)給我一個(gè)壓縮包名字叫“HTMLCSSJavaScript4套家鄉(xiāng)主題網(wǎng)頁設(shè)計(jì).zip”大小18MB左右。解壓前我以為又是一堆從網(wǎng)上扒下來、沒有說明的作業(yè)模板結(jié)果打開才發(fā)現(xiàn)這個(gè)包整理得相當(dāng)規(guī)矩四套頁面每套都有獨(dú)立的文件夾結(jié)構(gòu)、注釋、素材都齊全。對(duì)我來說這類資源最大的價(jià)值不是直接拿來交差而是把里面用到的布局方式、CSS動(dòng)效、JavaScript交互一個(gè)個(gè)拆出來搞清楚“為什么這樣寫”之后再換成自己的內(nèi)容和風(fēng)格重新做一遍。無論你是剛學(xué)完HTML、CSS、JavaScript基礎(chǔ)語法、還沒完整做過一個(gè)網(wǎng)頁作品的新手還是需要一個(gè)課設(shè)/個(gè)人主頁原型但不想從零起步的人這個(gè)包都很值得認(rèn)真過一遍。1. 先說說拿到壓縮包后的第一件事解壓與目錄分析很多人解壓zip就是雙擊、解壓到當(dāng)前文件夾然后直接打開index.html。這一步本身沒什么問題但這個(gè)包里我確實(shí)踩過幾個(gè)小坑先寫出來幫大家省點(diǎn)時(shí)間。1.1 解壓時(shí)容易踩到的坑亂碼、損壞、路徑過長在Windows上直接右鍵解壓如果用的是系統(tǒng)自帶的zip處理邏輯遇到在Linux/macOS上打包的壓縮包中文文件名很容易變成亂碼尤其像“家鄉(xiāng)味道.html”這種帶中文的頁面。用Bandizip或7-Zip解壓時(shí)可以在選項(xiàng)里設(shè)置“UTF-8/CP936自動(dòng)識(shí)別”能避免大部分亂碼問題。用Linux服務(wù)器的朋友也經(jīng)常遇到“file is not a zip file”的報(bào)錯(cuò)。這通常不是zip命令的問題而是文件下載時(shí)沒有以二進(jìn)制方式完整傳輸或者從網(wǎng)盤下載被中轉(zhuǎn)服務(wù)改動(dòng)了頭部信息。建議先執(zhí)行file 網(wǎng)頁設(shè)計(jì).zip如果輸出里寫著Zip archive data說明文件頭正常如果報(bào)data或者gzip compressed data那就要重新下載。確認(rèn)是zip格式后再用unzip -O gbk 網(wǎng)頁設(shè)計(jì).zip -d my_site-O gbk是在某些Linux發(fā)行版上指定解壓字符集用的能解決從Windows打包文件解壓后亂碼的問題。如果unzip版本老不支持-O可以安裝unzip-iconv或者用Python腳本處理。另外壓縮包里如果嵌套了多層文件夾解壓出來的路徑很長Windows資源管理器可能報(bào)“源路徑過長”。我習(xí)慣解壓后立刻把文件夾重命名成短名比如hometown-site然后每個(gè)套件子目錄用01_gucheng、02_shanshui這種命名后面改代碼不會(huì)因?yàn)槁窂絾栴}心煩。1.2 解壓后目錄結(jié)構(gòu)長什么樣這個(gè)包四套模板分別對(duì)應(yīng)四種家鄉(xiāng)主題古城、山水、美食、民俗。每個(gè)套件內(nèi)部結(jié)構(gòu)基本統(tǒng)一hometown-site/ ├── 01_gucheng/ │ ├── index.html │ ├── css/ │ │ ├── style.css │ │ └── base.css │ ├── js/ │ │ └── main.js │ └── images/ │ ├── hero.jpg │ ├── street-01.jpg │ └── ... ├── 02_shanshui/ ...每個(gè)套件都有一個(gè)主頁面index.htmlCSS拆分成了基礎(chǔ)重置base.css和主樣式style.cssJavaScript腳本集中在一個(gè)main.js里。圖片素材不多每套大約8到12張jpg/png沒有湊數(shù)的占位圖。這種組織方式很符合小型個(gè)人網(wǎng)站的常規(guī)習(xí)慣頁面入口清晰、樣式分模塊、腳本盡量少。對(duì)于初學(xué)者來說直接在一個(gè)HTML文件里堆樣式和腳本當(dāng)然更快但項(xiàng)目一旦增加到四套就會(huì)明白拆分的價(jià)值——改配色、換圖片時(shí)不需要翻一個(gè)幾百行的文件。1.3 路由和資源引用方式要提前理清打開HTML后如果發(fā)現(xiàn)樣式加載不出來八成是CSS路徑問題。這個(gè)包里的頁面采用的是相對(duì)路徑link relstylesheet hrefcss/style.css所以必須從index.html所在目錄打開不能只把HTML文件單獨(dú)復(fù)制到別處。也不要改成href/css/style.css這種以斜杠開頭的絕對(duì)路徑本地用file協(xié)議打開時(shí)會(huì)直接指向磁盤根目錄反而找不到。圖片路徑同理盡量用相對(duì)路徑這樣整個(gè)文件夾打包發(fā)給別人解壓就能直接運(yùn)行。還有一個(gè)細(xì)節(jié)如果頁面本身沒有其他模塊雙擊index.html就能預(yù)覽。如果之后你往頁面里加了類似fetch(./data.json)這樣讀取本地文件的代碼file協(xié)議下會(huì)報(bào)跨域錯(cuò)誤那就得用本地服務(wù)器打開這個(gè)后面單獨(dú)說。2. 四套家鄉(xiāng)主題設(shè)計(jì)的拆解從布局到配色四套模板雖然都叫“家鄉(xiāng)主題”但設(shè)計(jì)思路差異很大。我花了一個(gè)晚上把每套的布局grid線畫出來發(fā)現(xiàn)它們分別覆蓋了最常見的幾種個(gè)人/專題頁面的版式單頁長滾動(dòng)、分欄網(wǎng)格、卡片列表、橫向輪播。把這四種模型看明白基本能應(yīng)付大部分內(nèi)容型網(wǎng)站的首頁。2.1 “古城”套用Flex布局做單頁敘事第一套古城的頁面結(jié)構(gòu)是一個(gè)典型的單頁長滾動(dòng)敘事頂部固定導(dǎo)航下面依次是Hero全屏大圖、歷史簡(jiǎn)介、街巷照片墻、民俗活動(dòng)時(shí)間表、頁腳。整體用縱向flex max-width容器實(shí)現(xiàn)每一段的寬度沒有鋪滿全屏而是統(tǒng)一約束在1100px左右讓閱讀節(jié)奏更舒服。Hero區(qū)設(shè)置了.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; }這種寫法可以保證首屏跟瀏覽器窗口同高內(nèi)容始終居中。背景圖用了background-size: cover加background-position: center不會(huì)因?yàn)槠聊槐壤煌瑢?dǎo)致圖片變形。這套模板最值得學(xué)的是“內(nèi)容塊如何收尾”。很多新手寫flex布局子元素一多就不知道寬度怎么分配。古城套里常見的卡片組用.card-list { display: flex; flex-wrap: wrap; gap: 24px; } .card { flex: 1 1 300px; }flex: 1 1 300px表示項(xiàng)目可以放大可以縮小基礎(chǔ)寬度300px。配合flex-wrap在三列和兩列之間自動(dòng)變化不需要額外的媒體查詢。古城套用這個(gè)方式做了街巷照片墻窗口寬一點(diǎn)就三列窄一點(diǎn)就兩列不會(huì)撐破布局。2.2 “山水”套用Grid把板塊分隔得更“抗造”第二套山水主題走的是大色塊拼接風(fēng)格每個(gè)板塊都是一張滿幅圖疊加半透明漸變蒙層再用CSS Grid控制圖文的上下左右位置。比如一個(gè)典型的分隔區(qū).grid-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }這句代碼是這套模板里含金量最高的。repeat(auto-fit, minmax(280px, 1fr))的意思是每列至少280px如果容器夠?qū)捑妥詣?dòng)多排幾列每一列平分剩余空間。所以無論是手機(jī)豎屏還是桌面寬屏圖片格子都不會(huì)被壓縮到很難看。山水套里的“四季”段落很有意思春、夏、秋、冬四張圖片在桌面上排成一行四列在平板和手機(jī)上自動(dòng)換成兩列。因?yàn)間rid容器設(shè)置了自動(dòng)換行所以完全不用手動(dòng)寫媒體查詢。如果把圖片換成自己家鄉(xiāng)的風(fēng)光照片整體效果立刻就不一樣。2.3 “家鄉(xiāng)味道”套卡片式美食清單與數(shù)據(jù)渲染第三套美食主題沒有把菜品圖片直接寫死在HTML里而是在JavaScript里準(zhǔn)備了一個(gè)數(shù)組然后用循環(huán)渲染出卡片。數(shù)據(jù)結(jié)構(gòu)類似const foods [ { name: 米粉蒸肉, img: images/food-1.jpg, desc: 外婆家逢年過節(jié)必上的一道菜, tag: 咸香 }, { name: 瓦罐湯, img: images/food-2.jpg, desc: 慢火煨出來的清甜, tag: 湯品 } ];然后通過foods.forEach((item) { document.querySelector(.food-list).innerHTML article classfood-card img src${item.img} alt${item.name} h3${item.name}/h3 p${item.desc}/p /article; });把數(shù)據(jù)渲染到頁面上。這種做法最大的好處是更新圖片和描述時(shí)只需要改數(shù)組不需要去HTML里復(fù)制粘貼一大堆卡片結(jié)構(gòu)。模板還用了一個(gè)篩選功能點(diǎn)擊“全部/小吃/主食/湯品”按鈕時(shí)重新根據(jù)tag過濾數(shù)組再渲染一次。對(duì)于想練JavaScript數(shù)據(jù)操作的人來說這套模板是最值得讀的。不過有一點(diǎn)要注意直接用innerHTML 在循環(huán)里反復(fù)操作DOM性能不好數(shù)據(jù)量小無所謂如果以后做博客列表、商品列表建議改用document.createDocumentFragment()或者先拼接字符串再一次性賦值。美食套里40多個(gè)菜品沒問題但能養(yǎng)成好習(xí)慣更好。2.4 “民俗”套輪播圖與3D旋轉(zhuǎn)展示第四套民俗主題技術(shù)上最復(fù)雜。它用JavaScript實(shí)現(xiàn)了一個(gè)自動(dòng)輪播圖輪播里不是普通左右滑動(dòng)而是給每張圖片加了CSS 3D旋轉(zhuǎn)效果.carousel-item { transition: transform 0.8s ease; transform-style: preserve-3d; } .carousel-item.active { transform: rotateY(360deg); }同時(shí)在外層容器上設(shè)置了perspective: 1200px讓子元素產(chǎn)生近大遠(yuǎn)小的縱深感。如果忘加perspectiverotateY看起來就只是一個(gè)扁平的左右壓縮完全沒有立體效果。這個(gè)細(xì)節(jié)是3D變換最容易忽略的地方。輪播的控制邏輯不復(fù)雜默認(rèn)第一個(gè)active每隔3秒把a(bǔ)ctive類移到下一項(xiàng)到最后一項(xiàng)后回到第一項(xiàng)。它通過一個(gè)currentIndex變量記錄位置用clearInterval和setInterval實(shí)現(xiàn)暫停和恢復(fù)。我建議新手把輪播代碼逐行讀一遍重點(diǎn)理解“狀態(tài)變量”這個(gè)思想頁面上顯示什么取決于currentIndex是幾而不是直接去操作DOM。后續(xù)你要改成點(diǎn)擊左右按鈕、觸摸滑動(dòng)都是在改這個(gè)狀態(tài)。3. 從模板里提煉的CSS技巧直接抄進(jìn)自己的頁面看模板不是光看熱鬧光欣賞“人家的頁面真漂亮”而是要把里面幾個(gè)高頻技巧拆出來變成自己的動(dòng)作。這一節(jié)我把四套模板里反復(fù)出現(xiàn)的CSS問題說清楚。3.1 文本位置調(diào)整為什么flex對(duì)齊有時(shí)不生效熱門搜索詞里有“怎么調(diào)整css容器里的文本位置”這是新手高頻問題。很多人給文本加了text-align: center發(fā)現(xiàn)文本并不在預(yù)期位置原因多半是“容器沒有高度或?qū)挾取薄ext-align只控制行內(nèi)內(nèi)容在水平方向的對(duì)齊不能讓文本在垂直方向和容器中心對(duì)齊。模板里常用的方案是.container { display: flex; justify-content: center; /* 主軸居中 */ align-items: center; /* 交叉軸居中 */ height: 200px; /* 必須有高度 */ }如果父容器高度撐開子元素高度撐開那么align-items: center就沒有意義。另一個(gè)常見坑是父容器設(shè)了flex-direction: column這時(shí)主軸變成縱向justify-content控制的是垂直方向align-items控制水平方向。很多模板代碼里注釋不清楚自己改布局時(shí)很容易把兩個(gè)屬性混了。我習(xí)慣這樣記justify-content永遠(yuǎn)沿著“flex-direction”方向align-items永遠(yuǎn)垂直于那個(gè)方向。只要先確認(rèn)flex-direction就不會(huì)調(diào)反。3.2 字體漸變background-clip: text家鄉(xiāng)主題的標(biāo)題如果做成一整塊純色會(huì)顯得有點(diǎn)呆。山水套里幾個(gè)大標(biāo)題用了一個(gè)很常見的字體漸變.gradient-text { background: linear-gradient(135deg, #2d9cdb, #6dd5a0); -webkit-background-clip: text; background-clip: text; color: transparent; }核心原理是把漸變色作為背景然后讓背景嚴(yán)格裁剪到文字輪廓內(nèi)再把文字本身設(shè)為透明這樣露出來的就是漸變背景。需要注意兩點(diǎn)一是background-clip: text目前還需要-webkit-前綴才能覆蓋多數(shù)瀏覽器二是不要忘記color: transparent否則文字顏色會(huì)蓋住背景。如果你想要漸變方向從上到下把135deg改成to bottom或者0deg效果完全不一樣。模板里還用了“字體漸變文字陰影”的組合但漸變文字不太適合再加過深的陰影否則會(huì)發(fā)臟。3.3 漣漪光圈擴(kuò)散動(dòng)畫性能的小貼士“css漣漪光圈擴(kuò)散”也是熱搜詞。在這套包的地圖頁或按鈕上我看到了類似點(diǎn)擊波紋的效果核心是這一段keyframes ripple { 0% { transform: scale(0); opacity: 0.5; } 100% { transform: scale(4); opacity: 0; } } .ripple { position: absolute; border-radius: 50%; animation: ripple 0.8s ease-out forwards; }把它加到按鈕上點(diǎn)擊時(shí)生成一個(gè)span元素添加ripple類動(dòng)畫結(jié)束后移除或讓它留在那也沒關(guān)系。這里想強(qiáng)調(diào)“動(dòng)畫性能”這件事transform和opacity不會(huì)觸發(fā)頁面回流和重繪動(dòng)畫過程比較流暢如果用width、height、top、left做相同效果瀏覽器每一幀都要重新計(jì)算布局在小屏手機(jī)上會(huì)掉幀。所以別小看這個(gè)簡(jiǎn)單效果選對(duì)屬性也是一種優(yōu)化思路。3.4 rotate3d和transform的書寫習(xí)慣民俗套的3D旋轉(zhuǎn)用的不是rotateY()而是rotate3d(x, y, z, angle)。比如transform: rotate3d(1, 1, 0, 45deg);表示同時(shí)繞X軸和Y軸旋轉(zhuǎn)45度。實(shí)際項(xiàng)目中如果只需要繞Y軸寫rotateY(45deg)更直觀。但rotate3d在做一個(gè)“盒子多角度展示”時(shí)特別好用可以一次控制朝向。這里要提醒一個(gè)我踩過的坑在模板里調(diào)整transform時(shí)不小心把前一行代碼末尾的分號(hào)刪掉了結(jié)果整個(gè)3D效果失效。CSS里如果這一段是.carousel-item { transform-style: preserve-3d; /* 這里末尾分號(hào)丟了 */ transform: rotateY(45deg) }瀏覽器解析時(shí)會(huì)認(rèn)為transform-style的值是preserve-3d transform: rotateY(45deg)整條聲明無效后面所有3D效果全部失效。遇到樣式突然全部失效時(shí)先檢查上一條聲明后面有沒有分號(hào)這是新手最容易忽略的。4. JavaScript部分踩過的坑從模板交互到控制臺(tái)調(diào)試四套模板都配了JavaScript雖然邏輯不復(fù)雜但它們覆蓋了幾個(gè)典型的JS入門問題。我在試著自己改動(dòng)的時(shí)候就撞到了“for循環(huán)閉包”和“隱式轉(zhuǎn)換”兩座大山這里一塊兒說清楚。4.1 javascript:void(0) 到底解決什么問題很多模板導(dǎo)航里會(huì)寫a hrefjavascript:void(0) classnav-link首頁/ajavascript:void(0)的作用是讓鏈接被點(diǎn)擊時(shí)執(zhí)行空操作不跳轉(zhuǎn)。它相當(dāng)于一個(gè)“假鏈接”專門用來配合JavaScript事件綁定。如果不寫href#會(huì)導(dǎo)致頁面跳到頂部而注冊(cè)的點(diǎn)擊事件里又沒有調(diào)用preventDefault()用戶點(diǎn)一次菜單頁面就莫名其妙回到頂部。我現(xiàn)在的習(xí)慣是如果是按鈕就直接用button元素不要用a hrefjavascript:void(0)如果一定要用a標(biāo)簽?zāi)蔷驮谑录瘮?shù)里加document.querySelectorAll(.nav-link).forEach(link { link.addEventListener(click, (e) { e.preventDefault(); // 真正的邏輯 }); });這樣既保留語義又不依賴javascript:偽協(xié)議。模板里用偽協(xié)議雖然能跑但搜索引擎和瀏覽器對(duì)它的處理并不統(tǒng)一能在自己代碼里避免就盡量避免。4.2 for循環(huán)閉包問題為什么點(diǎn)擊每個(gè)按鈕都彈同一個(gè)值美食套的篩選按鈕是循環(huán)生成的模板里一開始寫的是for (var i 0; i btns.length; i) { btns[i].onclick function () { console.log(i); // 輸出永遠(yuǎn)都是 btns.length }; }這是經(jīng)典的for循環(huán)閉包問題。var聲明的i是函數(shù)作用域等到點(diǎn)擊事件真正觸發(fā)時(shí)循環(huán)早已結(jié)束i已經(jīng)變成了btns.length所以所有按鈕都打印同一個(gè)數(shù)字。模板里改用let就解決了for (let i 0; i btns.length; i) { btns[i].onclick function () { console.log(i); }; }因?yàn)閘et是塊級(jí)作用域每次循環(huán)都會(huì)生成一個(gè)新的綁定循環(huán)變量i的值被保留下來。如果你還在維護(hù)老代碼不能改var也可以包一層立即執(zhí)行函數(shù)for (var i 0; i btns.length; i) { (function (index) { btns[index].onclick function () { console.log(index); }; })(i); }原理是函數(shù)參數(shù)是按值傳遞i的當(dāng)前值被復(fù)制給了形參index閉包捕獲的是這個(gè)副本。兩種寫法都能工作但現(xiàn)代項(xiàng)目直接let就好可讀性高得多。4.3 隱式轉(zhuǎn)換的迷惑[] ![] 為什么是true模板里寫了一個(gè)“判斷變量是否為空”的校驗(yàn)函數(shù)用了if (inputValue null) { ... }這行本身沒什么問題但在搜索引擎上看相關(guān)知識(shí)點(diǎn)時(shí)總有人把話題引到“[] ![]為true”這個(gè)詭異例子上。我第一次看到也愣了。拆開看![]先把空數(shù)組轉(zhuǎn)成布爾值取反空數(shù)組是truthy所以![]是false。然后比較[] false。比較的時(shí)候false轉(zhuǎn)為數(shù)字0數(shù)組[]調(diào)用ToPrimitive轉(zhuǎn)為空字符串空字符串再轉(zhuǎn)為數(shù)字0。兩邊都是0所以結(jié)果是true。這個(gè)例子說明JS隱式轉(zhuǎn)換的規(guī)則很反直覺。模板作者可能只是想做個(gè)短路判斷但寫代碼時(shí)最好避開隱式轉(zhuǎn)換。以后寫比較一律用和!除非你明確知道自己在判斷兩個(gè)數(shù)字類型的變量。我在改造模板時(shí)把原來的都換成了并在關(guān)鍵變量處加了console.log打印類型花不了幾分鐘但能省掉很多調(diào)試時(shí)間。4.4 給模板加上自己的交互回到頂部、導(dǎo)航高亮模板本身已經(jīng)有一些交互但完全還不算完整。我自己加的最有用的小功能是“回到頂部”和“導(dǎo)航高亮”。回到頂部按鈕也很簡(jiǎn)單const topBtn document.getElementById(goTop); window.addEventListener(scroll, () { topBtn.style.display window.scrollY 400 ? block : none; }); topBtn.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });導(dǎo)航高亮是判斷當(dāng)前滾動(dòng)位置與每個(gè)section的offsetTop的差值const sections document.querySelectorAll(section); const navLinks document.querySelectorAll(.nav-link); window.addEventListener(scroll, () { let current 0; sections.forEach((sec, index) { if (window.scrollY sec.offsetTop - 100) { current index; } }); navLinks.forEach((link, index) { link.classList.toggle(active, index current); }); });這里的-100是給導(dǎo)航的偏移量避免滾動(dòng)到section頂部時(shí)導(dǎo)航還沒切換。實(shí)際使用中每個(gè)頁面section高度不同需要微調(diào)這個(gè)值。模板里沒有這個(gè)邏輯自己加上去之后頁面會(huì)“活”很多。5. 二次開發(fā)指南把這些模板變成自己的作品看模板只是第一步真正有價(jià)值的是把模板改成自己的。這個(gè)過程不復(fù)雜但有幾個(gè)地方有隱藏坑。5.1 先改數(shù)據(jù)再改樣式我改造美食套時(shí)第一步不是先調(diào)顏色而是把JavaScript里的菜品數(shù)組整體替換成自己家鄉(xiāng)的小吃。數(shù)據(jù)結(jié)構(gòu)不變只是把name、desc、tag替換掉圖片也換成自己拍的或從免費(fèi)圖庫下載的。這樣頁面內(nèi)容首先變成自己的然后才有心情繼續(xù)調(diào)樣式。如果是古城套、山水套這種圖片和文字直接寫在HTML里的模板同樣建議先替換標(biāo)題、簡(jiǎn)介、圖片確認(rèn)沒有出現(xiàn)文字溢出、圖片變形再動(dòng)布局。不要一上來就改字體、改圓角那樣內(nèi)容還沒換成自己的顏色卻亂了很難判斷改壞了哪一處。5.2 把公共部分拆出來四套模板的導(dǎo)航和頁腳基本一致。復(fù)制粘貼省事但以后要改一個(gè)導(dǎo)航項(xiàng)那得改四個(gè)文件。更簡(jiǎn)單的做法是先把導(dǎo)航和頁腳抽成獨(dú)立的HTML片段比如header.html、footer.html然后在頁面里用JavaScript的fetch加載。不過要注意file協(xié)議下直接用fetch拉本地文件會(huì)報(bào)跨域錯(cuò)誤需要開本地服務(wù)器。如果不想開服務(wù)器最簡(jiǎn)單的方案是保留重復(fù)代碼但把公共部分的樣式集中在base.css里這樣改樣式只要改一個(gè)文件。對(duì)課設(shè)級(jí)別的項(xiàng)目我建議不要過度工程化。可以只復(fù)制同一個(gè)導(dǎo)航的HTML到四個(gè)頁面但CSS里通過一個(gè)類控制當(dāng)前頁高亮。例如首頁body加>body[data-pagegucheng] .nav-link-gucheng { color: #c0392b; }這樣比每個(gè)頁面手動(dòng)改class更可靠不容易漏改。5.3 本地預(yù)覽時(shí)啟動(dòng)一個(gè)開發(fā)服務(wù)器前面提過“直接雙擊index.html”的問題。模板本身能在file協(xié)議下運(yùn)行但我強(qiáng)烈建議你從開始就習(xí)慣用本地服務(wù)器預(yù)覽。最簡(jiǎn)單的方式用VS Code裝Live Server插件在index.html上右鍵“Open with Live Server”。或者安裝Python后在項(xiàng)目根目錄運(yùn)行python -m http.server 8080然后瀏覽器訪問http://localhost:8080。為什么非要這一步因?yàn)楫?dāng)你后續(xù)往頁面里加fetch(data.json)、ES Module的import、字體文件加載file協(xié)議都會(huì)遇到各種限制。早點(diǎn)切到本地服務(wù)器能避免很多“本地好好的一打包就出錯(cuò)”的怪問題。5.4 發(fā)布前檢查清單我每次改完模板都會(huì)按這個(gè)清單過一遍省得交付后出丑檢查HTML里是否還有javascript:void(0)替換成button或事件觸發(fā)。檢查所有圖片路徑是否相對(duì)路徑圖片有沒有丟失。用瀏覽器開發(fā)者工具切換到手機(jī)模擬器看導(dǎo)航是否折疊、字體是否過大、圖片是否變形。檢查頁面標(biāo)題和meta描述不要把原模板的“家鄉(xiāng)古城”留成自己的網(wǎng)頁標(biāo)題。刪除多余的代碼注釋和沒用到的CSS類減小體積。目錄名字改成自己的項(xiàng)目名壓縮成zip時(shí)盡量不要把外層嵌套文件夾一起壓進(jìn)去。這一套檢查做完基本上可以放心提交作業(yè)或者上線了。我在實(shí)際改這套資源的時(shí)候最大的感受是模板不是用來直接交差的它是你把“能看懂代碼”變成“能改代碼”的跳板。四套模板里我最初只想學(xué)Flex布局結(jié)果為了把一個(gè)輪播改成觸摸滑動(dòng)又把指針事件和狀態(tài)管理過了一遍因?yàn)楦拿朗晨ㄆ臑V鏡又開始查漸變和顏色混合模式。整個(gè)過程比看十篇教程都管用。如果你手頭也有類似“HTMLCSSJavaScript4套家鄉(xiāng)主題網(wǎng)頁設(shè)計(jì).zip”的資源建議不要把它放在網(wǎng)盤里吃灰。選一套結(jié)構(gòu)最簡(jiǎn)單的先照著手寫一遍再換成你真正想做的家鄉(xiāng)內(nèi)容最后把它部署到能通過鏈接訪問的地方。完成這些之后你的收獲絕對(duì)不止一個(gè).html文件。本文還有配套的精品資源點(diǎn)擊獲取