簡(jiǎn)介面向網(wǎng)頁設(shè)計(jì)初學(xué)者與前端開發(fā)入門者這份學(xué)成在線案例素材包源自黑馬程序員與pink老師課程將設(shè)計(jì)源文件與頁面代碼整合到一起適合用來完整走通“設(shè)計(jì)→切圖→前端實(shí)現(xiàn)”的流程。壓縮包共11個(gè)文件約17.71MB包含4個(gè)PSD源文件分別對(duì)應(yīng)首頁、課程列表頁、課程介紹頁和職業(yè)規(guī)劃頁可在Photoshop中分層查看配色、字體、間距等設(shè)計(jì)細(xì)節(jié)另配5張PNG切圖含 banner、用戶圖標(biāo)、搜索按鈕等常用元素以及 index.html 和 style.css能直接對(duì)照學(xué)習(xí)HTML語義化結(jié)構(gòu)與CSS浮動(dòng)、定位等經(jīng)典布局寫法。目前已有14059人學(xué)習(xí)下載。借助這套素材既能拆解專業(yè)設(shè)計(jì)稿的視覺規(guī)范也能從頭練習(xí)頁面還原理解設(shè)計(jì)如何落到代碼適合完成一個(gè)完整的企業(yè)級(jí)靜態(tài)頁面案例。1. 學(xué)成在線案例為什么切圖實(shí)戰(zhàn)還得靠手寫HTML和CSS很多人一拿到PSD設(shè)計(jì)稿第一反應(yīng)是找自動(dòng)切圖插件一鍵生成網(wǎng)頁幾秒鐘就能看到完整頁面?？蓪?shí)際上真正跟過完整落地項(xiàng)目的人都知道自動(dòng)生成的代碼結(jié)構(gòu)混亂、類名沒有語義想改一處布局會(huì)牽連整個(gè)頁面翻車概率極高。學(xué)成在線這套經(jīng)典切圖案例之所以常被選作前端課設(shè)就是因?yàn)閺腜SD到網(wǎng)頁的每一步都要親手完成HTML結(jié)構(gòu)、CSS布局、切圖導(dǎo)出、像素級(jí)對(duì)齊這些基本功全部覆蓋。這篇文章就圍繞這個(gè)需求給你一套能直接落地、能自檢驗(yàn)收的完整方案從技術(shù)選型講到模塊實(shí)現(xiàn)再到最后怎么答辯。2. 總體設(shè)計(jì)與技術(shù)選型先拆布局再寫代碼避免“邊寫邊亂”2.1 為什么選HTML5 CSS3而不是Vue、React學(xué)成在線頁面本身是靜態(tài)頁面核心內(nèi)容是導(dǎo)航欄、搜索區(qū)、課程卡片列表和底部信息不涉及數(shù)據(jù)交互也不需要組件復(fù)用。用Vue或React做不是不行而是對(duì)“訓(xùn)練還原PSD”這個(gè)目標(biāo)沒有幫助。這個(gè)案例的核心目的是把盒模型、浮動(dòng)、定位、背景、偽類這些CSS基礎(chǔ)吃透而這些恰恰是框架默認(rèn)幫你掩蓋掉的東西。很多同學(xué)寫完幾個(gè)框架項(xiàng)目再回頭補(bǔ)基礎(chǔ)就是因?yàn)楫?dāng)初直接用腳手架樣式全靠組件庫布局交給柵格系統(tǒng)最后連一個(gè)clearfix都寫不利索。做學(xué)成在線這類項(xiàng)目時(shí)我一般會(huì)堅(jiān)持用純HTMLCSS完成JavaScript只用在極少數(shù)輔助場(chǎng)景其余全部由CSS承擔(dān)。等你能夠完整還原一整頁P(yáng)SD再上手框架視角會(huì)完全不一樣。這個(gè)選型邏輯很簡(jiǎn)單先基本功后工具鏈。對(duì)比維度自動(dòng)切圖生成手寫HTML CSS代碼可讀性類名無意義、嵌套深結(jié)構(gòu)清晰、語義明確布局理解黑盒生成不懂原理親手計(jì)算盒模型后期修改改一處牽連多處模塊化局部調(diào)整答辯價(jià)值講不出設(shè)計(jì)依據(jù)每個(gè)數(shù)值都有來歷2.2 頁面結(jié)構(gòu)固定版心加五大分區(qū)學(xué)成在線PSD的典型布局是上下結(jié)構(gòu)加中間內(nèi)容區(qū)整體版心寬度在1200像素左右內(nèi)容居中左右留白。拿到設(shè)計(jì)稿的第一步不是打開編輯器而是先把頁面拆成幾個(gè)大塊頂部導(dǎo)航、Banner搜索區(qū)、熱門課程推薦區(qū)、精品課程列表區(qū)、頁腳信息區(qū)。拆完大塊后再拆內(nèi)部小模塊。頂部導(dǎo)航里左邊是Logo、中間是菜單、右邊是用戶入口課程列表區(qū)是四列網(wǎng)格每列包含課程封面、課程標(biāo)題、講師信息和價(jià)格。這種分層拆解的意義在于寫CSS時(shí)每一層都是獨(dú)立的盒子間距、邊框、背景都控制在局部不會(huì)出現(xiàn)改一個(gè)樣式影響全站的情況。頁面寬度為什么固定1200px而不是做成響應(yīng)式這里要說明一下切圖案例的訓(xùn)練目標(biāo)是把設(shè)計(jì)稿還原成網(wǎng)頁關(guān)注的是布局基本功。響應(yīng)式屬于進(jìn)階話題過早引入媒體查詢和彈性布局反而會(huì)分散精力。所以這個(gè)案例采用固定版心用wrapper類做居中容器所有模塊共用這個(gè)寬度基準(zhǔn)。2.3 目錄結(jié)構(gòu)與素材命名拿到學(xué)成在線的素材包里面一般包含PSD源文件、切好的圖片素材和參考代碼。我建議動(dòng)手前先把目錄整理成統(tǒng)一規(guī)范避免寫著寫著找不到文件。learn-online/ ├── index.html ├── css/ │ ├── base.css # 樣式重置與公共類 │ └── index.css # 首頁模塊樣式 ├── images/ │ ├── logo.png │ ├── banner.png │ ├── course-01.jpg │ └── icon-arrow.png └── psd/ └── learn-online.psd這個(gè)目錄結(jié)構(gòu)看起來很簡(jiǎn)單作用卻很大。css集中管理images統(tǒng)一放圖psd單獨(dú)存放源文件。很多同學(xué)喜歡把素材跟頁面混放圖片命名用1.jpg、2.jpg等到驗(yàn)收時(shí)找不到圖、改不了樣式只能從頭翻。命名規(guī)范上我一般用“模塊-用途”的格式比如課程封面圖就叫course-01.jpg不會(huì)寫cover1.jpg這種沒有辨識(shí)度的名字。一個(gè)文件對(duì)應(yīng)一個(gè)模塊后面做像素級(jí)驗(yàn)收會(huì)非常方便。注意PSD源文件在整個(gè)項(xiàng)目交付前不要?jiǎng)h除。中期要改字號(hào)、調(diào)間距都得回到源文件里去測(cè)量這是切圖實(shí)戰(zhàn)中最后悔藥也買不回來的操作。3. 核心模塊實(shí)現(xiàn)從PSD到網(wǎng)頁的還原細(xì)節(jié)3.1 導(dǎo)航欄Logo與菜單的結(jié)構(gòu)化寫法頂部導(dǎo)航欄是最容易被忽視卻又最體現(xiàn)CSS基礎(chǔ)的模塊。學(xué)成在線導(dǎo)航欄的PSD設(shè)計(jì)要求內(nèi)容垂直居中左側(cè)Logo、中間菜單項(xiàng)、右側(cè)登錄注冊(cè)入口整體高度一般在70到80像素之間。HTML結(jié)構(gòu)我推薦直接用語義化標(biāo)簽來寫header classheader div classwrapper div classlogo a href#img srcimages/logo.png alt學(xué)成在線/a /div nav classnav ul lia href# classactive首頁/a/li lia href#課程/a/li lia href#職業(yè)規(guī)劃/a/li /ul /nav div classuser a href#登錄/a a href# classbtn-register注冊(cè)/a /div /div /header這里有幾個(gè)設(shè)計(jì)點(diǎn)需要注意。ul默認(rèn)自帶margin和padding列表項(xiàng)默認(rèn)豎排所以必須先重置再浮動(dòng)。我常用的做法是給ul設(shè)置margin: 0和padding: 0li使用float: left實(shí)現(xiàn)橫向排列如果不用浮動(dòng)直接在ul上設(shè)置flex布局效果一樣但浮動(dòng)方案對(duì)理解文檔流更有幫助課設(shè)答辯時(shí)也更容易講清原理。CSS部分最容易翻車的細(xì)節(jié)是Logo圖片的對(duì)齊。很多同學(xué)寫完導(dǎo)航發(fā)現(xiàn)圖片下方多出3到5像素的空隙這是img標(biāo)簽?zāi)J(rèn)按文字基線對(duì)齊導(dǎo)致的解決辦法是給img設(shè)置vertical-align: top或者直接display: block。這個(gè)細(xì)節(jié)在導(dǎo)航里不明顯放到課程封面圖上就非常顯眼后面會(huì)展開說明。3.2 Banner搜索區(qū)背景圖與表單控件的對(duì)齊Banner區(qū)是整個(gè)頁面的視覺重心PSD上通常是一張寬幅背景圖中間放一個(gè)搜索框搜索框內(nèi)有占位文字和搜索按鈕。實(shí)現(xiàn)時(shí)用div容器承載背景圖搜索表單放在背景圖內(nèi)居中位置。section classbanner div classwrapper search-wrap input typetext classsearch-input placeholder請(qǐng)輸入想搜索的內(nèi)容 button classsearch-btn搜索/button /div /section.banner { height: 420px; background: url(../images/banner.png) no-repeat center top; } .search-wrap { padding-top: 120px; text-align: center; } .search-input { width: 450px; height: 50px; border: 0; border-radius: 4px 0 0 4px; padding: 0 15px; vertical-align: middle; } .search-btn { height: 50px; padding: 0 30px; border: 0; background-color: #00a4ff; color: #fff; border-radius: 0 4px 4px 0; vertical-align: middle; }這段實(shí)現(xiàn)里有幾個(gè)參數(shù)值得說明。搜索框?qū)挾?50px、高度50px是根據(jù)PSD設(shè)計(jì)稿里控件的實(shí)際尺寸換算出來的水平方向通過父級(jí)text-align: center實(shí)現(xiàn)居中垂直方向用padding-top: 120px把搜索框推到背景圖合適的位置。這里有兩個(gè)高頻踩坑點(diǎn)。第一input和button并排時(shí)明明高度都設(shè)成50px卻總是對(duì)不齊這是默認(rèn)line-height和字體基線差異導(dǎo)致的給兩者都加vertical-align: middle即可解決。第二搜索框placeholder的文字顏色在不同瀏覽器里默認(rèn)值不一樣需要單獨(dú)設(shè)置input::placeholder選擇器來統(tǒng)一樣式否則驗(yàn)收時(shí)會(huì)在某個(gè)瀏覽器里露出默認(rèn)灰色。再提一點(diǎn)background簡(jiǎn)寫url后面跟的no-repeat center top表示背景圖不平鋪、水平居中、垂直靠上。這個(gè)垂直對(duì)齊方式要和PSD中背景圖的構(gòu)圖對(duì)齊如果設(shè)計(jì)稿的背景主體偏下就要把top改成bottom不能盲目套模板。3.3 課程卡片網(wǎng)格浮動(dòng)布局與盒子尺寸核算課程列表是學(xué)成在線頁面里信息量最大的模塊PSD設(shè)計(jì)稿里一般是四列排列每張卡片包含封面圖、課程名稱、講師信息、價(jià)格。這里最考察布局基本功因?yàn)槊繌埧ㄆ膶挾刃枰_計(jì)算不能隨手寫一個(gè)數(shù)。以版心1200px、四列卡片、列間距30px為例核算邏輯是這樣的總間距是30乘3等于90px剩下用于卡片的寬度是1200減90等于1110px每張卡片理論寬度是1110除以4等于277.5px。實(shí)際寫代碼時(shí)我不會(huì)寫277.5px這種帶小數(shù)的值而是把每張卡片寬度設(shè)為270px右邊距30px四張卡片總寬270乘4加30乘3等于1170px在1200px版心里左右各留15px視覺上反而更均衡?？ㄆ瑓^(qū)域的CSS寫法.course-list { margin: 0; padding: 0; list-style: none; } .course-list li { float: left; width: 270px; margin-right: 30px; margin-bottom: 30px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .course-list li:nth-child(4n) { margin-right: 0; } .course-list .course-cover { width: 270px; height: 150px; display: block; } .course-list .course-title { font-size: 16px; color: #333; padding: 15px; line-height: 1.5; } .course-list .course-price { color: #ff7c2d; font-weight: 700; padding: 0 15px 15px; }寬度為什么設(shè)270而不是277.5因?yàn)闉g覽器對(duì)小數(shù)像素的處理存在差異四舍五入后可能讓最后一排卡片錯(cuò)位。我把卡片寬度定為270px右邊距30px正好四張一行這是一個(gè)在切圖實(shí)戰(zhàn)中反復(fù)驗(yàn)證過的穩(wěn)妥做法。還有一個(gè)關(guān)鍵坑點(diǎn)li浮動(dòng)之后父級(jí)ul的高度會(huì)塌陷后面緊跟著的底部分區(qū)會(huì)往上擠蓋住課程列表。解決這個(gè)問題最常用的是clearfix方法這個(gè)在避坑章會(huì)專門展開細(xì)講。先記住結(jié)論凡是父級(jí)里面只有浮動(dòng)子元素的情況都要給父級(jí)加清除浮動(dòng)的處理。3.4 底部信息區(qū)語義化標(biāo)簽與居中排版頁面底部是最容易被隨手糊弄的部分但學(xué)成在線PSD對(duì)底部信息有具體設(shè)計(jì)上方是Logo、簡(jiǎn)介和友情鏈接下方是版權(quán)和備案信息。這類區(qū)塊在實(shí)現(xiàn)時(shí)用footer標(biāo)簽內(nèi)部子區(qū)塊用div或section都可以文本用p包裹。footer classfooter div classwrapper footer-main div classfooter-logo img srcimages/logo-footer.png alt學(xué)成在線 p學(xué)成在線致力于提供優(yōu)質(zhì)IT職業(yè)教育課程/p /div div classfooter-links h4合作伙伴/h4 ul lia href#合作機(jī)構(gòu)一/a/li lia href#合作機(jī)構(gòu)二/a/li /ul /div /div div classfooter-copyright pCopyright ? 2024 學(xué)成在線 版權(quán)所有/p /div /footer這里有一個(gè)排版要點(diǎn)版權(quán)區(qū)域和上方主內(nèi)容區(qū)通常背景色不同主內(nèi)容區(qū)顏色深、文字淺版權(quán)區(qū)顏色淺、文字深兩者之間可能還有一條分割線。CSS實(shí)現(xiàn)時(shí)footer-main負(fù)責(zé)上部的兩欄布局用float: left讓Logo區(qū)和鏈接區(qū)并排copyright區(qū)域直接text-align: center居中不需要額外限制寬度。寫底部時(shí)有一個(gè)很實(shí)用的檢查習(xí)慣底部文字在深色背景上很容易出現(xiàn)對(duì)比度不足。比如鏈接文字顏色被設(shè)置成#333結(jié)果放到深色背景上完全看不清驗(yàn)收時(shí)翻了車。這里建議底部主區(qū)域的文字顏色統(tǒng)一用淺色系版權(quán)區(qū)再用深色文字兩個(gè)區(qū)塊分開控制。4. 常見問題排查切圖實(shí)戰(zhàn)中五個(gè)最容易翻車的場(chǎng)景切圖案例做起來不難但翻車點(diǎn)非常集中多數(shù)問題不是不會(huì)寫而是對(duì)CSS渲染機(jī)制理解不透。下面按“現(xiàn)象、原因、解決”的順序整理五個(gè)在學(xué)成在線這類項(xiàng)目里反復(fù)出現(xiàn)的場(chǎng)景。4.1 圖片路徑錯(cuò)誤導(dǎo)致背景圖不顯示現(xiàn)象頁面打開后圖片位置一片空白背景圖不出來瀏覽器控制臺(tái)報(bào)404。原因大多是路徑層級(jí)寫錯(cuò)。比如CSS文件在css目錄里background寫成url(images/banner.png)瀏覽器會(huì)以CSS文件所在目錄為基準(zhǔn)去拼接路徑正確寫法應(yīng)該是url(../images/banner.png)。另一種情況是圖片文件名帶中文或空格本地測(cè)試能打開部署到服務(wù)器就404。解決統(tǒng)一路徑規(guī)則CSS中引用圖片一律寫相對(duì)CSS文件的路徑文件命名使用英文小寫和連字符避免中文和空格。排查時(shí)先打開瀏覽器控制臺(tái)的網(wǎng)絡(luò)面板確認(rèn)是哪個(gè)資源請(qǐng)求失敗再逐層檢查路徑。不要憑感覺改也不要同一份代碼里混用相對(duì)路徑和絕對(duì)路徑。4.2 浮動(dòng)父級(jí)高度塌陷底部?jī)?nèi)容往上擠現(xiàn)象課程列表下方的內(nèi)容頂?shù)娇ㄆ厦娓讣?jí)背景色沒有包住卡片區(qū)域。原因課程卡片全部設(shè)置float: left后li脫離普通文檔流父級(jí)ul計(jì)算高度時(shí)發(fā)現(xiàn)子元素高度為0于是高度塌陷。如果父級(jí)沒有顯式設(shè)置高度后面的footer就會(huì)往上擠占位置。解決給父級(jí)使用clearfix閉合浮動(dòng)這是切圖項(xiàng)目里最穩(wěn)妥的方案。.clearfix::after { content: ; display: table; clear: both; }這段代碼的原理是::after偽元素在容器末尾生成一個(gè)空白塊clear: both強(qiáng)制它換行到所有浮動(dòng)元素下方父級(jí)因此被撐開。注意這里用display: table而不是display: block因?yàn)閠able在某些瀏覽器中不會(huì)產(chǎn)生額外空白這是實(shí)際項(xiàng)目中踩過坑之后得出的寫法。4.3 寫了一大堆樣式就是不動(dòng)選擇器優(yōu)先級(jí)沒搞清楚現(xiàn)象明明改了字體顏色頁面紋絲不動(dòng)控制臺(tái)里看到自己的樣式被劃掉但又找不到是哪條規(guī)則覆蓋的。原因選擇了過低優(yōu)先級(jí)的選擇器被更高權(quán)重的規(guī)則覆蓋。比如頁面里已有.container .course-title { color: red; }你新增一條.course-title { color: blue; }前者優(yōu)先級(jí)更高后者不是沒生效而是被蓋掉了。解決養(yǎng)成從瀏覽器開發(fā)者工具Elements面板查看Computed樣式的習(xí)慣看最終計(jì)算值再定位問題。寫CSS時(shí)控制選擇器嵌套層數(shù)一般不超過三層三層以上就需要重構(gòu)。如果確實(shí)要覆蓋用更具體的選擇器而不是!important。!important是后悔藥偶爾用一次可以用多了后面維護(hù)的人會(huì)非常崩潰。4.4 課程封面圖底部出現(xiàn)縫隙圖片和標(biāo)題對(duì)不齊現(xiàn)象課程封面圖和下面的標(biāo)題容器之間有明顯空隙怎么調(diào)margin都消不掉。原因img元素默認(rèn)是內(nèi)聯(lián)顯示行內(nèi)元素會(huì)在底部預(yù)留文字基線的空間所以圖片下方多出一段空白。前面導(dǎo)航欄的Logo也有這個(gè)問題只是封面圖尺寸大看起來更明顯。解決給img設(shè)置display: block把圖片變成塊級(jí)元素縫隙立刻消失。更一勞永逸的做法是在重置樣式文件里統(tǒng)一加img { display: block; }省得每張圖片單獨(dú)處理。另外封面圖固定高度150px但實(shí)際導(dǎo)出的圖片可能存在寬高比不一致的情況需要object-fit: cover防止圖片變形這個(gè)屬性在還原設(shè)計(jì)稿時(shí)幾乎必用。4.5 頁面字體和設(shè)計(jì)稿對(duì)不上像素感偏胖現(xiàn)象PSD設(shè)計(jì)稿里字體看起來正常瀏覽器里字偏大或偏小行距也不對(duì)頁面整體比設(shè)計(jì)稿胖一圈。原因PSD設(shè)計(jì)稿的字號(hào)單位是像素瀏覽器默認(rèn)字體大小是16px。如果設(shè)計(jì)稿里的說明文字是12px代碼里沒有顯式聲明font-size瀏覽器就會(huì)顯示默認(rèn)字號(hào)。另一個(gè)原因是設(shè)計(jì)稿使用的字體在瀏覽器里沒有加載自動(dòng)回退成系統(tǒng)默認(rèn)字體。解決在樣式重置文件里設(shè)置完整的字體棧body聲明font-family: Microsoft YaHei, PingFang SC, Arial, sans-serif所有字號(hào)按照PSD標(biāo)注的像素值逐個(gè)聲明行高用line-height精確控制。驗(yàn)收時(shí)可以用下一章講到的疊加對(duì)比法如果字號(hào)還是偏大偏小優(yōu)先檢查是不是被瀏覽器默認(rèn)樣式影響了。5. 進(jìn)階調(diào)整從“還原頁面”到“寫出規(guī)范工程”5.1 語義化標(biāo)簽重構(gòu)讓結(jié)構(gòu)更清晰初學(xué)前端時(shí)寫HTML容易全部用div頁面層級(jí)像一鍋粥。學(xué)成在線頁面做進(jìn)階優(yōu)化時(shí)我會(huì)把無意義的div替換成語義化標(biāo)簽。這樣做的直接好處是代碼可讀性提升答辯時(shí)能主動(dòng)說出“這里用nav而不是div因?yàn)樗菍?dǎo)航區(qū)域”這就是加分項(xiàng)。前面導(dǎo)航欄已經(jīng)用了語義化標(biāo)簽課程區(qū)域同樣替換成sectionsection classcourse-hot h2熱門推薦/h2 p classcourse-desc精選熱門課程助力快速成長(zhǎng)/p /section section classcourse-list-wrap h2精品課程/h2 ul classcourse-list li img srcimages/course-01.jpg alt前端開發(fā)課程 h3前端開發(fā)零基礎(chǔ)入門/h3 p講師張老師/p p classcourse-price￥299.00/p /li /ul /section這里有一個(gè)容易被忽略的細(xì)節(jié)section是分塊元素語義上要求內(nèi)部有標(biāo)題所以對(duì)應(yīng)的h2不能省略。如果某個(gè)區(qū)域確實(shí)不需要標(biāo)題更應(yīng)該用div而不是section。很多人以為語義化就是換標(biāo)簽其實(shí)語義化是讓標(biāo)簽含義與內(nèi)容匹配這個(gè)認(rèn)知在答辯時(shí)特別重要。課程卡片內(nèi)部用h3做課程標(biāo)題也是語義化的一部分h1到h6有明確的層級(jí)關(guān)系頁面上的標(biāo)題層級(jí)應(yīng)該從h2往下逐級(jí)使用不要跳級(jí)。這一點(diǎn)雖然在視覺上沒差別但在頁面結(jié)構(gòu)和可訪問性層面是有分的。5.2 樣式重置與全局公共類不同瀏覽器自帶不同的默認(rèn)樣式比如body默認(rèn)margin是8pxul默認(rèn)有paddingh1到h6字號(hào)各不相同這些默認(rèn)值會(huì)讓頁面在不同瀏覽器里顯示不一致。做切圖類項(xiàng)目我習(xí)慣第一件事就是寫一個(gè)base.css做樣式重置。* { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; border: 0; } body { font-family: Microsoft YaHei, PingFang SC, Arial, sans-serif; font-size: 14px; color: #333; background: #f5f5f5; } .wrapper { width: 1200px; margin: 0 auto; }這個(gè)重置文件里有幾個(gè)關(guān)鍵點(diǎn)值得說明。box-sizing: border-box讓width直接包含padding和border計(jì)算卡片尺寸時(shí)不會(huì)出現(xiàn)“寬度定好了又加了內(nèi)邊距導(dǎo)致?lián)纹啤钡那闆r這是切圖時(shí)避免布局錯(cuò)亂的核心設(shè)置。img設(shè)置max-width: 100%防止大圖撐破容器border: 0是清除圖片在舊瀏覽器里的藍(lán)色邊框。最后一個(gè).wrapper就是版心公共類全站所有需要居中的容器都用它避免每個(gè)模塊重復(fù)寫margin: 0 auto。字體方面body統(tǒng)一設(shè)置14px作為基準(zhǔn)字號(hào)這是頁面正文的常用尺寸。設(shè)計(jì)稿里如果某段文字明顯更小再單獨(dú)給對(duì)應(yīng)標(biāo)簽設(shè)置font-size。這樣做的意義是全站文字有了統(tǒng)一基準(zhǔn)不會(huì)被瀏覽器默認(rèn)的16px干擾實(shí)現(xiàn)了像素級(jí)還原的第一步。5.3 切圖導(dǎo)出尺寸、格式與命名怎么選從PSD導(dǎo)出素材也有講究很多同學(xué)直接截圖另存為JPG導(dǎo)出的圖片模糊或者尺寸不對(duì)。這里我一般按以下幾個(gè)原則處理。第一Logo、圖標(biāo)這類需要透明背景的圖導(dǎo)出PNG格式不要導(dǎo)出JPG。JPG不支持透明背景放進(jìn)頁面會(huì)出現(xiàn)白色方塊整個(gè)導(dǎo)航欄的精致感瞬間就沒了。第二Banner這種大面積背景圖導(dǎo)出JPG并壓縮到合適的質(zhì)量頁面加載速度會(huì)快很多。第三課程封面圖如果PSD里是圓角設(shè)計(jì)導(dǎo)出時(shí)保留圓角效果不要在CSS里額外寫border-radius兩邊的圓角參數(shù)不一定一致疊出來邊緣會(huì)有明顯差異。還有一個(gè)重要細(xì)節(jié)導(dǎo)出圖片的尺寸嚴(yán)格按PSD里圖層實(shí)際像素大小不要為了省空間縮小圖片。CSS最終顯示尺寸和圖片文件尺寸不一致沒關(guān)系瀏覽器會(huì)自動(dòng)縮放但文件原始尺寸大于顯示尺寸時(shí)高分屏下顯示會(huì)更清晰。這個(gè)細(xì)節(jié)在驗(yàn)收時(shí)用放大鏡對(duì)比就能看出來差異。命名沿用前面說的“模塊-用途”規(guī)范banner.png表示首頁Banner背景course-cover-01.jpg表示課程封面圖。后期想替換素材只需要覆蓋同名文件代碼一行都不用改這是工程化意識(shí)也是驗(yàn)收時(shí)節(jié)省時(shí)間的關(guān)鍵操作。6. 驗(yàn)收與答辯像素級(jí)核對(duì)與高頻提問應(yīng)對(duì)最后一環(huán)決定課設(shè)的最終分?jǐn)?shù)。代碼寫完不等于交付完成要從“能跑”提升到“能證明自己拿得出手”。我一般會(huì)整理三張核對(duì)表作為驗(yàn)收清單按順序走一遍。第一張表對(duì)照PSD檢查頁面逐模塊比對(duì)間距、字號(hào)、顏色、圖片是否一致第二張表檢查瀏覽器兼容性Chrome、Edge、Firefox各打開一遍重點(diǎn)看布局有沒有位移、字體有沒有異常回退第三張表整理技術(shù)點(diǎn)清單把每個(gè)模塊用到的布局手段和選擇理由寫出來答辯現(xiàn)場(chǎng)直接照著說。具體到像素級(jí)對(duì)比有一個(gè)非常實(shí)用的調(diào)試技巧把PSD導(dǎo)出的設(shè)計(jì)稿截圖作為背景圖疊在頁面下方做透明度對(duì)比。操作方法是給body設(shè)置設(shè)計(jì)稿截圖作為背景同時(shí)加opacity: 0.5透明度再把頁面內(nèi)容正常鋪在上面拖動(dòng)滾動(dòng)條就能直觀看到每個(gè)模塊與設(shè)計(jì)稿的偏差。調(diào)整完成后記得把調(diào)試樣式刪掉這個(gè)辦法能幫你在十分鐘內(nèi)找完所有間距問題。答辯時(shí)最容易出現(xiàn)的提問和應(yīng)對(duì)方式如下直接列成表格方便你對(duì)照準(zhǔn)備高頻提問推薦回答思路為什么用浮動(dòng)不用flex教學(xué)場(chǎng)景需要展示文檔流理解且兼容性更穩(wěn)為什么版心寬度1200px設(shè)計(jì)稿按此寬度繪制也是當(dāng)時(shí)主流屏幕設(shè)計(jì)習(xí)慣為什么卡片寬度270px按四列、間距30px計(jì)算總寬不超出版心字體大小怎么定的對(duì)照PSD標(biāo)注的像素值配合重置后的基準(zhǔn)字號(hào)應(yīng)對(duì)這些問題的關(guān)鍵不是背答案而是把設(shè)計(jì)依據(jù)講清楚?；卮鹄飵С觥坝?jì)算”和“依據(jù)”這兩個(gè)詞分?jǐn)?shù)一般不會(huì)低。即使某個(gè)答案不準(zhǔn)確只要展示出“我是算過、驗(yàn)證過才這么寫的”態(tài)度導(dǎo)師就能相信你有獨(dú)立的工程判斷力。最后分享一個(gè)我的習(xí)慣從那以后我每次做完一個(gè)靜態(tài)頁面都強(qiáng)制自己走一遍驗(yàn)收清單先查路徑再查布局先對(duì)間距再對(duì)字號(hào)先在Chrome里過一遍再去其他瀏覽器看一遍全部走完才敢說交付。學(xué)成在線這個(gè)案例做完你收獲的不只是幾張網(wǎng)頁還有這一套以后每個(gè)項(xiàng)目都用得上的驗(yàn)收方法。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取