簡介網(wǎng)頁制作是前端開發(fā)學(xué)習(xí)的核心實(shí)踐而一份完整的HTML5期末作業(yè)往往需要綜合運(yùn)用HTML5語義化標(biāo)簽、CSS3布局與動(dòng)畫、JavaScript交互設(shè)計(jì)等技術(shù)。從頁面骨架搭建到公共模塊復(fù)用從Flex/Grid響應(yīng)式布局到輪播圖、表單驗(yàn)證等交互實(shí)現(xiàn)每個(gè)環(huán)節(jié)都體現(xiàn)著工程化思維與代碼組織能力。以廈門旅游網(wǎng)為例的14頁面項(xiàng)目完整展示了如何將旅游類網(wǎng)站的視覺表現(xiàn)力與功能邏輯相結(jié)合在滿足作業(yè)要求的同時(shí)提升作品的專業(yè)度與答辯說服力。本文圍繞網(wǎng)頁制作全流程拆解技術(shù)選型、常見布局坑點(diǎn)及答辯高頻問題為學(xué)習(xí)者提供可落地的實(shí)踐參考。 期末周、課程設(shè)計(jì)、實(shí)訓(xùn)項(xiàng)目……每年這個(gè)時(shí)候都有一大波同學(xué)被“網(wǎng)頁制作成品”這幾個(gè)字折磨得頭大。如果你正好刷到這篇十有八九是在找一份拿得出手、能直接交差又不會(huì)被老師一眼看穿是模板的HTML5期末作業(yè)。今天這篇就結(jié)合“廈門旅游網(wǎng)”這個(gè)14頁面的完整項(xiàng)目把從頁面規(guī)劃、技術(shù)選型到具體實(shí)現(xiàn)的整個(gè)流程攤開來講包括代碼怎么組織、CSS3和JS的高級(jí)特性怎么用、以及最后答辯時(shí)老師最愛問的幾個(gè)問題怎么應(yīng)對。這份項(xiàng)目我前前后后帶過好幾屆學(xué)生落地整體難度適中既能體現(xiàn)H5CSS3JS三大塊的功底做出來的視覺效果又足夠唬人拿來當(dāng)期末作業(yè)或者課程設(shè)計(jì)都非常合適。1. 項(xiàng)目從哪下手先把14個(gè)頁面的骨架定下來1.1 為什么選“旅游類網(wǎng)站”當(dāng)期末作業(yè)做網(wǎng)頁設(shè)計(jì)期末作業(yè)選題基本決定了一半的分?jǐn)?shù)。論壇、個(gè)人主頁、電商首頁這些題材要么交互太簡單要么頁面結(jié)構(gòu)太過套路化老師看多了容易審美疲勞。旅游類網(wǎng)站是我個(gè)人非常推薦的選題方向原因有三個(gè)第一旅游類網(wǎng)站的視覺表現(xiàn)空間極大風(fēng)景圖、漸變色、卡片式布局都有天然的發(fā)揮余地最能直觀體現(xiàn)CSS3功底第二頁面類型豐富既要有展示型的首頁也要有列表頁、詳情頁、表單頁方便你湊夠“14個(gè)頁面”這種硬性數(shù)量要求第三交互場景天然存在——輪播圖、Tab切換、回到頂部、搜索篩選、表單驗(yàn)證JS的活兒全都能安排上不用硬凹需求。廈門旅游網(wǎng)這個(gè)主題在旅游類里屬于“穩(wěn)妥牌”。作為熱門旅游城市廈門在視覺上有鼓浪嶼、環(huán)島路、沙坡尾這些高辨識(shí)度的地標(biāo)圖片素材一搜一大把版權(quán)上也很少踩雷盡量用Unsplash、Pexels這類免費(fèi)圖庫。內(nèi)容上既可以說景點(diǎn)、說美食、說住宿也能延展出攻略、游記、留言板這些互動(dòng)型頁面14頁的填充難度大大降低。1.2 14個(gè)頁面到底怎么分配才合理有些同學(xué)一聽到“14個(gè)頁面”就開始焦慮以為要把14個(gè)頁面全做成完全不同布局的大型頁面。實(shí)際上14個(gè)頁面完全可以按照“首頁 頻道頁 內(nèi)容頁 功能頁 輔助頁”的邏輯來分層規(guī)劃很多頁面之間只需要復(fù)用公共模塊工作量沒有想象中大。我這份項(xiàng)目最終定下來的頁面結(jié)構(gòu)是首頁index.html、景點(diǎn)列表頁、景點(diǎn)詳情頁、美食列表頁、美食詳情頁、住宿列表頁、住宿詳情頁、旅游攻略列表頁、旅游攻略詳情頁、游記分享頁、留言板、關(guān)于我們、登錄頁、注冊頁正好是14個(gè)頁面。列表頁和詳情頁之間是重復(fù)的卡片結(jié)構(gòu)約等于一套模板換數(shù)據(jù)登錄頁和注冊頁共用一套表單樣式關(guān)于我們和留言板的側(cè)邊欄布局完全一致只換主體內(nèi)容。這樣算下來真正需要從零開始設(shè)計(jì)的頁面其實(shí)只有首頁、列表頁、詳情頁、功能頁、輔助頁這五種模板每個(gè)模板再做兩到三個(gè)變體就夠了。1.3 公共模塊先行導(dǎo)航欄、頁腳、側(cè)邊欄網(wǎng)頁開發(fā)里有一條很樸素的道理先搭公共模塊再做具體頁面。因?yàn)閷?dǎo)航欄、頁腳這些東西你在14個(gè)頁面里要用14遍如果每一頁都重新寫一遍不僅效率低而且稍有不慎就是導(dǎo)航欄寬度對不齊、鏈接地址寫錯(cuò)這種低級(jí)問題。這套項(xiàng)目里導(dǎo)航欄我建議做成“通欄深色 半透明吸頂 下拉子菜單”的組合。半透明吸頂是CSS3的一個(gè)典型應(yīng)用點(diǎn)用position: sticky或者position: fixed都能實(shí)現(xiàn)配合backdrop-filter: blur()做出毛玻璃效果視覺上非常加分。導(dǎo)航結(jié)構(gòu)上可以規(guī)劃為“首頁、景點(diǎn)、美食、住宿、攻略、游記、留言板”七個(gè)一級(jí)欄目其中“景點(diǎn)、美食、住宿、攻略”四個(gè)欄目都可以加下拉菜單把二級(jí)頁面塞進(jìn)去這樣頁面之間的跳轉(zhuǎn)關(guān)系就從“平鋪”變成了“樹狀”網(wǎng)站的層級(jí)感一下就出來了。頁腳的話三欄布局是標(biāo)準(zhǔn)做法左側(cè)放網(wǎng)站的簡介和logo中間放快速鏈接關(guān)于我們、聯(lián)系郵箱等右側(cè)放備案信息或版權(quán)聲明。頁腳這塊還有一個(gè)容易被忽略的點(diǎn)——要在頁腳上方加一條淺色的分割線或者利用背景色差進(jìn)行區(qū)分讓整頁的視覺結(jié)束感更清晰。2. 核心技術(shù)點(diǎn)拆解HTML5CSS3JS分別該把功夫下在哪里2.1 HTML5不要只把div當(dāng)萬能工具現(xiàn)在很多同學(xué)寫HTML還是“一div到底”這對期末作業(yè)的評分來說是非常吃虧的。HTML5新增了header、nav、main、section、article、aside、footer這一批語義化標(biāo)簽它們不僅能替代div讓代碼結(jié)構(gòu)一目了然更能讓你的作業(yè)從“寫出來了”躍升到“寫得專業(yè)”。以首頁為例正確的結(jié)構(gòu)應(yīng)該是這樣組織的網(wǎng)頁最上方是header區(qū)域里面嵌套nav放主導(dǎo)航主體內(nèi)容放進(jìn)main按內(nèi)容區(qū)塊拆成若干個(gè)section比如“熱門景點(diǎn)”“當(dāng)?shù)孛朗场薄熬纷∷蕖薄坝瓮婀ヂ浴泵總€(gè)section用article來裝具體的景點(diǎn)卡片右側(cè)有推薦的用aside包起來最底部才是footer。這種寫法一旦被老師看到印象分直接拉高一個(gè)檔次。另外一個(gè)常被忽略的H5標(biāo)簽是figure和figcaption用來包裹圖文組合比如景點(diǎn)卡片里的圖片加說明文字語義上比div p正宗得多。另外表單是HTML5作業(yè)的另一個(gè)考點(diǎn)。登錄頁和注冊頁里input的type一定要用對郵箱用typeemail密碼用typepassword需要勾選的同意條款用typecheckbox。加上required必填屬性和placeholder提示文字瀏覽器端的基礎(chǔ)驗(yàn)證就有了這段代碼能直接證明你掌握了HTML5的表單新特性。2.2 CSS3用Flex和Grid把頁面結(jié)構(gòu)搭穩(wěn)CSS3是期末作業(yè)拿分的核心因?yàn)樗苯記Q定作品的“顏值”。我建議技術(shù)點(diǎn)這樣分配布局方式上主用Flexbox輔以Grid。Flex是解決一維布局的比如導(dǎo)航欄左右分布、卡片內(nèi)圖片和文字豎排、按鈕居中等用display: flex加justify-content和align-items就能搞定比float好用十倍不止。Grid適合二維布局比如景點(diǎn)列表頁的三列九宮格用display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;一句話就能讓卡片均勻排布段間距整齊得像用尺子量過而且響應(yīng)式也比float方案好做。圓角與陰影也是CSS3的重點(diǎn)。景點(diǎn)卡片的border-radius: 12px、按鈕的box-shadow: 0 4px 12px rgba(0,0,0,0.1)這類細(xì)節(jié)能讓整個(gè)頁面瞬間擺脫“學(xué)生作業(yè)感”。用得好的陰影是懸浮提升層次感用不好的陰影就是一層發(fā)灰的模糊塊這里我的經(jīng)驗(yàn)是陰影參數(shù)里透明度不要超過0.15模糊半徑控制在10到20像素之間擴(kuò)撒半徑最好設(shè)置為0效果最自然。動(dòng)畫與過渡效果是拉開差距的地方。建議在卡片上做hover上浮效果transform: translateY(-6px)transition: all 0.3s ease在按鈕上做背景漸變動(dòng)畫在 banner 的字幕上用比較克制的text-shadow做呼吸效果。CSS3的keyframes動(dòng)畫可以做一個(gè)頁面加載時(shí)的淡入效果但不要滿屏亂飛——期末作業(yè)不是電競官網(wǎng)動(dòng)畫是為了輔助瀏覽體驗(yàn)而不是炫技做太多反而顯得廉價(jià)。2.3 JavaScript不抄插件也能做出夠用的交互說實(shí)話期末作業(yè)階段的JS用不到太深的東西但如果你連JS都沒寫老師很可能覺得你在“逃避”前端三件套里的核心一環(huán)。不用慌也不需要去抄什么復(fù)雜的插件原生JS做到這幾個(gè)交互就夠用了輪播圖也叫圖片幻燈片是旅游網(wǎng)站的標(biāo)配功能。實(shí)現(xiàn)原理無非是把圖片排成一行放在一個(gè)容器里通過切換transform: translateX()的值來左右移動(dòng)再配合定時(shí)器實(shí)現(xiàn)自動(dòng)播放點(diǎn)擊左右按鈕手動(dòng)切換。最簡版大概40行代碼就能搞定建議不要用display: none切圖——那種實(shí)現(xiàn)太“原始”懂行的老師一眼就能看出來。Tab切換用在首頁“熱門景點(diǎn)/當(dāng)?shù)孛朗?精品住宿”這種板塊上或者攻略列表頁的篩選排序功能里。原理是給每個(gè)Tab綁定點(diǎn)擊事件切換時(shí)給當(dāng)前Tab加active類同時(shí)控制對應(yīng)內(nèi)容區(qū)塊的顯隱?；氐巾敳堪粹o這個(gè)雖然簡單但非常顯眼是個(gè)性價(jià)比極高的加分項(xiàng)。監(jiān)聽window.onscroll當(dāng)滾動(dòng)距離超過頁面一屏?xí)r顯示按鈕點(diǎn)擊后使用requestAnimationFrame或setInterval讓頁面平滑滾動(dòng)到頂部而不是直接用location.href #這種老掉牙的方式。表單驗(yàn)證注冊頁最好加上。用JS判斷密碼長度是否大于6位、兩次輸入的密碼是否一致、郵箱格式是否匹配。這既是JS應(yīng)用點(diǎn)也是網(wǎng)頁交互嚴(yán)謹(jǐn)性的體現(xiàn)。我當(dāng)時(shí)做的時(shí)候還加了一個(gè)用戶名長度判斷輸入少于2位就彈紅色提示且禁止提交這下JS的“存在感”直接拉滿。懶加載也可以安排上用在景點(diǎn)詳情頁的長圖列表上。先給img的>:root { --primary-color: #1a9c8c; --secondary-color: #f5c451; --text-main: #333333; --text-light: #666666; --bg-page: #f8f8f8; --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); }后面寫頁面的時(shí)候直接color: var(--primary-color)調(diào)用既規(guī)范又方便統(tǒng)一調(diào)整頁面多了之后你會(huì)感謝這個(gè)決定。3. 實(shí)操全過程從零搭出廈門旅游網(wǎng)的完整流程3.1 初始化目錄結(jié)構(gòu)和共用文件在動(dòng)手寫頁面之前先把目錄結(jié)構(gòu)規(guī)劃好。合理的目錄是既能讓你開發(fā)時(shí)手不忙腳亂也能在答辯時(shí)讓老師覺得你工程素養(yǎng)不錯(cuò)。我建議這樣組織xiamen-travel/ ├── index.html ├── css/ │ ├── common.css │ ├── index.css │ ├── list.css │ ├── detail.css │ ├── form.css │ └── about.css ├── js/ │ ├── common.js │ ├── slider.js │ ├── tab.js │ ├── backtotop.js │ └── validate.js ├── images/ │ ├── banner/ │ ├── spots/ │ ├── food/ │ └── hotel/ └── pages/ ├── spots.html ├── spot-detail.html ├── foods.html ├── food-detail.html ├── hotels.html ├── hotel-detail.html ├── guides.html ├── guide-detail.html ├── travel-notes.html ├── message.html ├── about.html ├── login.html └── register.htmlcommon.css里放所有頁面通用的樣式——清浮動(dòng)、鏈接默認(rèn)樣式重置、導(dǎo)航欄、頁腳、返回頂部按鈕、通用卡片樣式。每個(gè)頁面通過自己的CSS文件覆蓋獨(dú)有的樣式。JS文件同理common.js里放回到頂部、下拉菜單這類公共交互功能型的代碼拆分成獨(dú)立的文件是為了讓每個(gè)函數(shù)的職責(zé)清晰答辯時(shí)老師問起來你能講明白“哪個(gè)文件干什么”。記得在pages目錄下的HTML里引用CSS時(shí)路徑要寫成../css/common.css這是新手最容易翻車的地方。3.2 首頁開發(fā)的具體實(shí)現(xiàn)步驟首頁是整份作業(yè)的門面也是工作量最大的頁面。我按區(qū)塊拆解步驟Banner輪播圖是最先動(dòng)的區(qū)塊。我在index.html里放了三個(gè)div.slide每個(gè)里面是一張背景圖加一個(gè)居中的標(biāo)題和副標(biāo)題然后通過CSS把.slider-container設(shè)置成display: flexoverflow: hidden。slider.js里定義一個(gè)let currentIndex 0每隔3秒讓currentIndex加1然后操作container.style.transform translateX(- currentIndex * 100 %)當(dāng)索引等于幻燈片數(shù)量時(shí)直接歸零實(shí)現(xiàn)無縫循環(huán)效果。景點(diǎn)推薦板塊我用Grid排了一個(gè)三列卡片布局。每一張卡片由圖片、標(biāo)題、簡介、一個(gè)“查看詳情”的文字鏈接組成?？ㄆJ(rèn)狀態(tài)是普通的白色背景加陰影hover時(shí)上浮并展示一個(gè)半透明的遮罩層這個(gè)遮罩層用CSS3的position: absoluteopacity過渡來實(shí)現(xiàn)。登錄注冊入口放在導(dǎo)航欄右側(cè)是整站功能性的體現(xiàn)。做了兩個(gè)按鈕登錄按鈕是白底淡色邊框注冊按鈕是主色漸變底白色文字。這兩個(gè)按鈕直接鏈接到pages/login.html和pages/register.html保證14個(gè)頁面的跳轉(zhuǎn)關(guān)系是閉環(huán)的這是老師檢查“頁面完整性”時(shí)的必看內(nèi)容。3.3 列表頁與詳情頁的通用模板操作列表頁的核心工作是“復(fù)用”。寫spots.html時(shí)我直接把首頁的“熱門景點(diǎn)”卡片區(qū)塊復(fù)制過來把6張卡片擴(kuò)充成9到12張?jiān)僭陧敳考右粋€(gè)篩選排序欄比如“按熱度 / 按評分 / 按價(jià)格”。這三個(gè)排序按鈕不需要真正的后臺(tái)數(shù)據(jù)排序用JS的數(shù)組排序就能模擬把卡片對應(yīng)的標(biāo)題、評分這些數(shù)據(jù)存在一個(gè)數(shù)組里點(diǎn)擊按鈕時(shí)對數(shù)組進(jìn)行排序然后用document.querySelectorAll操作DOM的順序這也是JS數(shù)組方法的實(shí)戰(zhàn)運(yùn)用。詳情頁的布局我建議做成“左側(cè)內(nèi)容 右側(cè)側(cè)邊欄”。左側(cè)放圖片大圖、文字介紹、行程安排這類正文右側(cè)側(cè)邊欄放“熱門景點(diǎn)推薦”“相關(guān)美食”“聯(lián)系我們”等模塊。左右用Flex布局左側(cè)flex: 2右側(cè)flex: 1。右側(cè)的“熱門推薦”一般是4到5個(gè)小卡片點(diǎn)擊能跳到對應(yīng)的詳情頁。這樣詳情頁的跳轉(zhuǎn)關(guān)系又多了好幾層網(wǎng)站的整體連通性也變得更好。3.4 登錄注冊頁與表單樣式登錄和注冊頁的HTML結(jié)構(gòu)很簡單一個(gè)居中的卡片容器里放一個(gè)form里面是label、input、button。漂亮的關(guān)鍵在于CSS細(xì)節(jié)——輸入框聚焦時(shí)的表現(xiàn)是老師會(huì)認(rèn)真看的地方我用input:focus設(shè)置了border-color: var(--primary-color)和box-shadow: 0 0 0 3px rgba(26, 156, 140, 0.15)這個(gè)光暈效果既現(xiàn)代又不會(huì)太突兀是很多優(yōu)秀UI的常用手法。注冊頁的JS驗(yàn)證我做了四個(gè)檢查項(xiàng)function validateForm() { var username document.getElementById(username).value.trim(); var password document.getElementById(password).value; var confirmPwd document.getElementById(confirmPwd).value; var email document.getElementById(email).value.trim(); if (username.length 2) { alert(用戶名不能少于2個(gè)字符); return false; } if (password.length 6) { alert(密碼長度不能少于6位); return false; } if (password ! confirmPwd) { alert(兩次輸入的密碼不一致); return false; } var emailReg /^\w([-.]\w)*\w([-.]\w)*\.\w([-.]\w)*$/; if (!emailReg.test(email)) { alert(請輸入正確的郵箱格式); return false; } return true; }這是我實(shí)測過的經(jīng)典寫法零依賴、邏輯清晰、答辯時(shí)就能直接說“這里用了正則表達(dá)式校驗(yàn)郵箱格式”一句話就暴露不了你的真實(shí)水平。3.5 留言板和關(guān)于我們頁的布局套路留言板頁面是一個(gè)典型的“表單 展示列表”頁面。上面是一個(gè)textarea留言框和“提交留言”按鈕下面是已經(jīng)留言內(nèi)容的列表純靜態(tài)假數(shù)據(jù)。你可以在JS里加一個(gè)小功能點(diǎn)擊提交按鈕后把textarea里輸入的內(nèi)容動(dòng)態(tài)插入到留言列表的頂部。這個(gè)操作配合數(shù)組的unshift方法和DOM的insertBefore或者innerHTML拼接都能實(shí)現(xiàn)邏輯也不復(fù)雜。這個(gè)小交互在答辯現(xiàn)場的演示效果特別好因?yàn)樗侨旧儆械摹包c(diǎn)擊后能看到真實(shí)變化”的功能。關(guān)于我們頁面建議做一個(gè)“網(wǎng)站簡介 團(tuán)隊(duì)/站點(diǎn)數(shù)據(jù) 聯(lián)系我們”的結(jié)構(gòu)配上地圖截圖或者幾張廈門風(fēng)光圖。這個(gè)頁面不需要什么交互但必須在SEO和結(jié)構(gòu)上做清楚——語義化標(biāo)簽、標(biāo)題層級(jí)、alt屬性這些細(xì)節(jié)都可以在這里集中展示。最好再加一段CSS3的linear-gradient背景漸變把關(guān)于頁做得有設(shè)計(jì)感一些。4. 常見問題與排查技巧實(shí)錄4.1 三個(gè)讓人崩潰的CSS布局坑做網(wǎng)頁期末作業(yè)時(shí)我見過最多的同學(xué)翻車在這三個(gè)地方坑一導(dǎo)航欄和banner之間出現(xiàn)一條白色縫隙。原因是瀏覽器默認(rèn)的body有margin: 8px在頁面頂部總會(huì)留下一圈白邊。解法是寫一個(gè)全局reset* { margin: 0; padding: 0; box-sizing: border-box; }把三件套全部清零所有間距從零開始自己控制。box-sizing: border-box一定要加否則你在Flex或Grid里設(shè)置寬度時(shí)會(huì)莫名其妙地多算border和padding的尺寸?？佣lex容器里的子元素寬度壓縮變形。Flex布局下子元素默認(rèn)可以收縮如果你的圖片或卡片被擠扁了多半是沒加flex-shrink: 0或者在圖片上沒寫死width和height。經(jīng)驗(yàn)之談凡是希望保持固定尺寸的元素直接加flex: 0 0 auto或者width/height別給它自由發(fā)揮的空間?？尤吕藛蔚亩ㄎ伙h了。下拉子菜單的容器要設(shè)置position: relative子菜單用position: absolute定位到父容器下方。很多同學(xué)寫完發(fā)現(xiàn)子菜單跑到了頁面的右下角就是因?yàn)楦溉萜鳑]設(shè)relative子菜單的absolute就跑去定位到最近的定位祖先或者是瀏覽器視口了。這個(gè)知識(shí)點(diǎn)是面試必考的前端基礎(chǔ)題期末答辯老師也可能會(huì)點(diǎn)。4.2 JS報(bào)錯(cuò)的經(jīng)典現(xiàn)場新手寫原生JS時(shí)最容易遇到的報(bào)錯(cuò)是TypeError: Cannot read property addEventListener of null意思是你想給一個(gè)不存在的DOM元素綁定事件。排除思路就兩步一是確認(rèn)JavaScript代碼是否放在了HTML末尾/body之前確保DOM已經(jīng)加載完畢二是檢查ID名是否拼寫一致有時(shí)候getElementById(slide)寫成了getElementById(slider)這種錯(cuò)誤看半天都發(fā)現(xiàn)不了。另一個(gè)經(jīng)典問題是輪播圖在最后一頁切換回第一頁時(shí)視覺跳變。原因是translateX從最后一頁寬度瞬間回到0%中間沒有過渡動(dòng)畫。處理思路是做一個(gè)“假第一張”放在最后當(dāng)切換到假第一張后關(guān)掉過渡動(dòng)畫瞬間跳回真的第一張。或者更簡單的方式用setInterval每次移動(dòng)一格到最后一張時(shí)直接重置并關(guān)閉過渡。我在代碼里采用了后者雖說不算最優(yōu)雅但在應(yīng)付期末作業(yè)這個(gè)層面已經(jīng)完全夠用了。4.3 不同瀏覽器兼容性檢查前端期末作業(yè)最大的隱性要求是“能在不同瀏覽器里跑起來”。雖然現(xiàn)在的Chrome、Edge、Firefox對HTML5和CSS3的支持已經(jīng)很好了但仍有幾個(gè)需要注意的兼容點(diǎn)backdrop-filter: blur()在某些老版本瀏覽器上不支持如果你用了毛玻璃效果最好同時(shí)準(zhǔn)備一個(gè)純色半透明背景兜底position: sticky在一些老內(nèi)核瀏覽器上不生效可以用position: fixed做降級(jí)方案CSSgap屬性在老版本Safari上也有兼容問題實(shí)在不放心就用margin或padding代替。我在項(xiàng)目里提前用supports語法做了優(yōu)雅降級(jí)瀏覽器支持backdrop-filter就用毛玻璃不支持就顯示半透明背景。這屬于進(jìn)階代碼但在老師那里非常加分。舉個(gè)實(shí)際寫法.nav-bar { background: rgba(255, 255, 255, 0.8); } supports (backdrop-filter: blur(10px)) { .nav-bar { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); } }4.4 期末答辯時(shí)老師最愛問的幾個(gè)問題答辯環(huán)節(jié)老師可能會(huì)盯著項(xiàng)目問幾個(gè)“追蹤式”問題提前準(zhǔn)備好答案效果比臨場發(fā)揮好得多?！澳氵@個(gè)網(wǎng)站的導(dǎo)航吸頂效果是怎么實(shí)現(xiàn)的” 回答核心是position: sticky; top: 0;加z-index: 99并解釋一下sticky和fixed的區(qū)別sticky不會(huì)脫離文檔流而fixed會(huì)?！澳愕妮啿D為什么能自動(dòng)播放” 回答用setInterval定時(shí)器每次讓索引加1再通過操作transform屬性來移動(dòng)滑軌容器。“你的CSS為什么要拆成這么多文件” 回答按公共樣式和頁面樣式拆分方便復(fù)用和維護(hù)同時(shí)減少單個(gè)文件的冗余。“你的表單驗(yàn)證是前端做還是后端做” 真實(shí)答案是前端驗(yàn)證只是用戶體驗(yàn)的一部分真正的安全保障必須靠后端。答完這句老師基本就不會(huì)再往深的問了因?yàn)槟阋呀?jīng)體現(xiàn)了現(xiàn)代Web開發(fā)的全局意識(shí)。5. 我踩過的坑與最后幾點(diǎn)建議這份廈門旅游網(wǎng)項(xiàng)目從最早只有五六個(gè)頁面的半成品到后來補(bǔ)全為14個(gè)頁面的完整作品中間踩過最深刻的坑是“圖片不壓縮”。那時(shí)候圖片全都是手機(jī)原相機(jī)拍出來的大體積照片直接往HTML里一放打開頁面要轉(zhuǎn)圈好幾秒整體體驗(yàn)非常糟糕。后來又花時(shí)間用工具把圖片壓縮了一遍分辨率控制在1920px以內(nèi)體積壓到200KB以下頁面打開速度才恢復(fù)正常。這個(gè)經(jīng)歷特別想分享給所有用圖片堆視覺的同學(xué)圖片能不能快速加載是老師點(diǎn)擊網(wǎng)站后的第一感受如果首頁在5秒內(nèi)都加載不完后面做得再好都很難彌補(bǔ)這個(gè)第一印象。還有一件事就是盡量讓本地開發(fā)環(huán)境和最終交付環(huán)境保持一致。有些同學(xué)平時(shí)用http://協(xié)議打開本地文件有些直接雙擊HTML文件導(dǎo)致某些JS功能特別是fetch調(diào)本地JSON在雙擊打開時(shí)直接報(bào)跨域錯(cuò)。我的建議是盡量在項(xiàng)目的根目錄直接打開HTML文件測試所有資源都通過相對路徑引用別寫以/開頭的絕對路徑避免發(fā)布后路徑全部失效。再一個(gè)就是把所有頁面的標(biāo)題寫清楚——每個(gè)HTML的title標(biāo)簽都要改成“廈門景點(diǎn)介紹 - 廈門旅游網(wǎng)”這種格式而不是14個(gè)頁面全都叫“無標(biāo)題文檔”這個(gè)細(xì)節(jié)雖然不是功能性問題但老師抽查時(shí)看到了就會(huì)覺得你做事認(rèn)真。最后再說一個(gè)不用花太多時(shí)間但很顯專業(yè)感的小點(diǎn)給詳情頁的正文圖片加一段CSS3的過渡動(dòng)畫鼠標(biāo)懸浮在圖片上時(shí)輕微放大用transition: transform 0.4s ease就能做到。這種小粒度交互在期末答辯演示時(shí)很討喜因?yàn)樗悄欠N“不看代碼就感覺很高級(jí)、看了代碼才發(fā)現(xiàn)其實(shí)很簡單”的體驗(yàn)?zāi)阏f它難不難不難但別人沒有這就是你的辨識(shí)度。整份作業(yè)的核心邏輯其實(shí)就是“把每個(gè)基礎(chǔ)技術(shù)點(diǎn)用到合適的場景里再把每個(gè)場景做到風(fēng)格統(tǒng)一”做到這兩點(diǎn)成績自然差不了。本文還有配套的精品資源點(diǎn)擊獲取