把我的第五個網(wǎng)頁這個標題挖開來講其實挺有意思。一個人能從第一個網(wǎng)頁寫到第五個說明已經(jīng)度過了最初的摸索期開始真正把做網(wǎng)頁當成一件有章法的事來對待。我記得很清楚自己寫到第五個頁面的時候最大的感受不是我又學會了一個新標簽而是我終于知道一個頁面應該怎么被思考了——先有骨架再有血肉最后才是裝飾。這個轉變恰恰是很多前端入門者遲遲邁不過去的坎。這篇就借著第五個網(wǎng)頁這個話題把從構思、搭結構、寫樣式、做交互到調試的完整過程拆開聊把我自己踩過的坑、總結下來的經(jīng)驗一股腦倒出來希望能給正在這條路上爬坡的朋友一點參考。1. 從堆代碼到設計頁面第五個網(wǎng)頁帶來的心態(tài)轉變我最早寫的那幾個網(wǎng)頁說實話就是教科書式地往編輯器里填標簽。想到什么寫什么內(nèi)容多了就往下拖樣式丑了就加個顏色整個頁面看起來像一份排版混亂的文檔。這樣的頁面能打開能滑動但離好看好用差了十萬八千里。到了第五個網(wǎng)頁我開始意識到一個問題寫代碼之前腦子里得先有一張圖。1.1 前四個網(wǎng)頁教會我的事回頭看前四個頁面每個都有它存在的意義也各有各的遺憾。第一個網(wǎng)頁是純HTML寫的滿屏都是標題標簽和段落標簽沒有任何樣式。那個頁面讓我理解了標簽的基本語義但也讓我養(yǎng)成了什么都往頁面里堆的壞毛病。第二個網(wǎng)頁開始接觸CSS學會了改文字顏色和背景色但那會兒對設計完全沒有概念顏色怎么配全憑心情結果頁面紅一塊藍一塊慘不忍睹。第三個網(wǎng)頁嘗試了浮動布局終于把內(nèi)容分出左右兩欄但也因此經(jīng)歷了第一次布局翻車——因為沒清除浮動頁腳跑到中間去了。第四個網(wǎng)頁開始接觸Flex布局這才真正體會到讓元素按預期排列是一件多么省心的事可惜當時對小屏幕的適配完全沒考慮手機上一打開就露餡。這四個頁面給我的教訓可以總結成三條布局要有一個清晰的方案樣式要遵循統(tǒng)一的設計規(guī)則以及永遠不要等到最后一刻才去看移動端的顯示效果。1.2 這次動手前先想清楚三件事寫第五個網(wǎng)頁之前我給自己定了幾條規(guī)矩與其說是技術上的約束不如說是思維上的整理。第一明確這個頁面給誰看。給自己看的備忘錄、給別人看的小作品、還是模擬一個完整的產(chǎn)品頁面不同用途對應的設計重心完全不同。我自己選的定位是一個讀書筆記整理頁內(nèi)容是幾本書的摘錄和評價面向的是同好交流的圈子。第二明確頁面的核心動作。打開這個頁面的人第一眼應該看到什么他們是在找書評還是想快速掃一遍摘錄我把最近在讀的書籍卡片和最新摘錄放到了首屏區(qū)域確保打開頁面就能看到最有價值的內(nèi)容。第三明確技術邊界。這個階段不需要炫技不需要花哨的動畫庫甚至不需要一行JavaScript都能完成大部分功能。我把目標定在純HTMLCSS實現(xiàn)完整的頁面布局、良好的響應式適配以及少量純CSS的交互效果。這樣即使遇到問題排查范圍也小得多。這三點想明白之后后面整個開發(fā)過程就順了很多。好的開始不是立刻打開編輯器而是先坐下來把頁面想清楚。2. 設計與結構拆解先畫草稿再寫代碼很多初學者我自己也是這么過來的拿到需求之后直接就開始敲標簽邊敲邊想布局改著改著就亂了。第五個網(wǎng)頁我換了思路先在紙上把頁面畫出來確定了內(nèi)容模塊和排列順序之后再去寫HTML結構。2.1 用內(nèi)容清單給頁面排版我做的第一件事不是打開編輯器而是拿出一張紙把要展示的內(nèi)容全部列出來。比如我要放站點標題和個人說明、三本近期讀過的書封面、書名、一句話推薦語、一組讀書摘錄、一個關于最近在思考什么的小日記區(qū)。列出來之后我開始給這些內(nèi)容分配注意力權重。這里有個很實用的思路把頁面當成一張報紙。最重要的內(nèi)容放在上半部分首屏然后按重要性往下排。我的排序是個人說明 最近在讀的書 精選摘錄 隨筆日記。這也直接決定了頁面骨架的模塊順序。內(nèi)容清單還有一個額外的好處——寫HTML的時候不會漏掉內(nèi)容也不會寫一個刪一個。2.2 頁面骨架的幾種常用方案我這次考慮過三種布局方案各有適用的場景。第一種是經(jīng)典雙欄布局左邊固定寬度放導航和簡介右邊放主要內(nèi)容。這種結構信息密度高適合內(nèi)容較多的頁面但小屏上的適配要花不少心思。第二種是卡片瀑布流每本書、每段摘錄都做成獨立卡片用網(wǎng)格排列。這種方式視覺上很清爽適合內(nèi)容相對獨立、需要快速掃讀的頁面。第三種是圖文長頁整個頁面像一篇文章一樣從上往下滾動適合故事性強的頁面。我最終選了卡片流作為主布局配合頂部導航欄。頁面的結構從上到下依次是頂部導航含站點名和幾個錨點鏈接、個人介紹橫幅、書籍卡片區(qū)、摘錄區(qū)、隨筆區(qū)、頁腳。下一步就照著這個結構寫HTML思路會非常清晰。2.3 別忽略內(nèi)容優(yōu)先級的設計原則這一步看似和寫代碼無關卻直接影響用戶體驗。同一個頁面如果首屏放的是自我介紹訪客可能兩秒就劃走了如果首屏放的是精選摘錄他們就有了留下來的理由。在設計模塊順序的時候可以試著站在訪客的角度問自己一句如果我只花十秒鐘看這個頁面我最想看什么我把個人介紹做成一個極簡的橫幅占的空間不大把書籍卡片區(qū)做成左右滑動或兩列排列保證首屏就能看到前兩本書摘錄區(qū)做得簡潔但扎眼用引號圖標和大字號突出金句。這個內(nèi)容優(yōu)先級的設計原則讓我這個頁面在還沒有寫樣式之前就已經(jīng)有了合理的骨架。3. HTML結構細節(jié)讓標簽不只是標簽骨架確定之后就開始寫HTML了。這一步很多人覺得簡單無非是把標簽按順序寫出來。但標簽怎么寫、類名怎么起、結構怎么嵌套直接影響后續(xù)的樣式編寫和頁面維護甚至影響搜索引擎對頁面內(nèi)容的理解。3.1 語義化標簽不要當成加分項第五個網(wǎng)頁我特意把所有能用的語義化標簽都用上了頭部用header、導航用nav、主體內(nèi)容用main、獨立區(qū)塊用section、側邊欄用aside、底部用footer。這樣做的第一個好處是代碼結構一目了然——哪怕把所有樣式都去掉瀏覽器也能把頁面內(nèi)容按照頭部、導航、主體、區(qū)塊、底部的結構呈現(xiàn)出來屏幕閱讀器也能更好地區(qū)分內(nèi)容層次。第二個好處是便于樣式定位。比如我寫的書籍卡片區(qū)就是這種結構main section classbooks-section h2最近在讀/h2 div classbook-grid article classbook-card img classbook-cover srcimages/book-01.jpg alt《案例推理的迷宮》封面 div classbook-info h3《案例推理的迷宮》/h3 p一本讓你不斷懷疑等等真的是這樣嗎的小書。/p /div /article !-- 更多書卡片 -- /div /section /mainarticle標簽用于表示獨立、自包含的內(nèi)容非常適合書籍卡片這種單元每個卡片里有圖片和說明彼此互不依賴。如果以后要把卡片移到頁面的其他位置直接整體剪切即可代碼內(nèi)部的組織完全不受影響。3.2 類名怎么命才能讓后面的CSS不打架類名命名看似是小問題實際寫多了就會發(fā)現(xiàn)命名混亂是樣式調試的頭號殺手。我習慣給類名加上身份前綴來避免沖突。比如用于布局的類名用layout-或區(qū)域名做前綴用于組件的用組件名-做前綴用于狀態(tài)的用is-/has-做前綴。這個頁面里我用得最多的三個前綴是site-表示站點級元素book-表示書籍卡片相關panel-表示內(nèi)容區(qū)塊。寫CSS的時候我也盡量只通過類名來選擇元素不用標簽選擇器除非是重置默認樣式。比如我不會直接用section{}去設置顏色而是用.books-section{}。這樣以后在頁面里新增一個section就不會莫名其妙地被舊樣式影響。養(yǎng)成這個習慣之后瀏覽器開發(fā)者工具里排查樣式的成本會低很多。3.3 易被忽略的細節(jié)標題層級、替代文本、文字排版HTML里還有幾個容易被忽略但很重要的細節(jié)。標題層級h1-h6不能亂來一個頁面通常只有一個h1最核心的標題下面再按內(nèi)容層級依次使用h2、h3。我這次把站點名稱放在h1書籍區(qū)塊標題用h2每本書的標題用h3整個標題層級是連續(xù)的不會從h2直接跳到h4。這既有助于搜索引擎理解頁面也能讓屏幕閱讀器使用者順暢地瀏覽結構。圖片的alt屬性也不能空著。我之前經(jīng)常忽略它后來發(fā)現(xiàn)當圖片加載失敗時alt文本就是訪客能看到的所有內(nèi)容了。對于裝飾性圖片可以寫空屬性alt但內(nèi)容性圖片必須寫清楚描述比如《案例推理的迷宮》封面就比book-01.jpg強太多了。還有一個影響閱讀體驗的細節(jié)是段落文字。HTML里的連續(xù)空格和換行都會被瀏覽器折疊所以文字之間不要用空格撐間距排版的事交給CSS。段落文字用p標簽包裹不要一篇文章全塞進div否則后續(xù)調字體大小和行高會很別扭。4. 樣式與布局落地從能看到耐看HTML寫完頁面還只是素顏狀態(tài)。接下來就是我最期待的環(huán)節(jié)——用CSS把頁面從能看的文檔變成耐看的作品。這個部分我將從布局、間距、配色、質感和響應式五個維度分別展開。4.1 用Flex和Grid搭建可靠的雙層結構這次頁面的布局核心有兩個頂部導航用Flex書籍卡片區(qū)用Grid。這兩個布局工具基本能覆蓋日常90%的頁面需求而且寫法非常直觀。頂部導航的寫法是nav classsite-nav span classsite-logo書頁之間/span div classnav-links a href#reading在讀/a a href#notes摘錄/a a href#diary隨筆/a /div /nav對應的CSS用Flex一行搞定.site-nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; }Flex的默認主軸是水平方向justify-content: space-between把兩端元素分別推到左右兩側中間的nav-links自然居中不需要手動計算間距。這套邏輯比浮動布局省心太多了。書籍卡片區(qū)我用的是Grid的自動填充能力這是讓網(wǎng)絡在不通屏幕寬度下自適應伸展的關鍵.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }這句代碼的意思是每一行盡量布置240px寬的卡片空間有富余就多放一列富余不夠就把卡片拉伸補滿。相比手動媒體查詢?nèi)フ{整每一檔寬度這個寫法幾乎是一勞永逸寫一次就適配了絕大多數(shù)屏幕。4.2 間距與排版留白也是一種設計頁面上手之后常犯的一個毛病是什么都想放上去結果整個頁面密不透風。真正耐看的頁面往往贏在留白。我在這個頁面里統(tǒng)一了三個層級的間距區(qū)塊之間用大間距4rem左右卡片內(nèi)部用中間距1.5rem-2rem文字行與行之間用穩(wěn)定的行高1.7。行高這塊多說一句body的line-height建議直接設為1.7左右中文閱讀會很舒適。默認的1.2行高在純文字頁面里會顯得過分擁擠字貼著字讀起來眼睛累。而標題類的元素則可以用1.3的行高緊湊一點更利落。間距的終極目標是讓用戶不需要找內(nèi)容掃一眼就知道每個部分在哪里。4.3 配色克制比豐富更重要第五個網(wǎng)頁我在配色上給自己定了一條規(guī)則全頁不超過三個主色。一個是背景色我選的是暖灰偏白接近紙質的質感一個是正文色選了深灰近黑不刺眼還有一個強調色用在按鈕、鏈接和重要標題上選了偏暗的橙紅色。這三個顏色放在一起整個頁面不會顯得花哨但也不至于素到無聊。補充一點經(jīng)驗不要直接從視覺設計軟件里隨便選顏色很不穩(wěn)定?？梢詮木W(wǎng)上找一些設計良好的頁面用取色工具吸取它們的主色保存到自己的調色板里。我這次用的三個顏色就是從一些設計成熟的博客站里吸出來的搭配效果比我自己憑空想出來的顏色穩(wěn)定多了。4.4 圓角、邊框與陰影讓卡片有層次卡片沒有邊框和陰影就會像是漂浮在頁面上的文字缺少邊界感。我給每張書籍卡片加了細邊框、圓角和輕陰影代碼是這樣.book-card { border: 1px solid #e5e5e5; border-radius: 12px; padding: 1.2rem; transition: transform 0.25s ease, box-shadow 0.25s ease; } .book-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }陰影用的是很輕的透明度值不會產(chǎn)生臟臟的效果hover時的輕微上移增強了卡片是可交互的心理暗示。這個交互細節(jié)會在下一章詳細展開。這里想提醒的是圓角、邊框和陰影要搭配使用才自然圓角太大、邊框太重或陰影太濃都會讓頁面看起來很業(yè)余。最穩(wěn)妥的原則是少即是多。4.5 響應式適配手機上的頁面絕不能崩寫完桌面端的樣式后我翻出手機打開頁面果然又出現(xiàn)了預料中的問題頂部導航被文字撐得變形網(wǎng)格卡片擠成了一列。這次我把響應式做成了一套完整方案而不是臨時補救。核心做法是移動優(yōu)先先用無媒體查詢的基礎樣式保證單列布局再用min-width媒體查詢逐級增強。比如在桌面端設置雙列布局時代碼是media (min-width: 768px) { .site-content { grid-template-columns: 1fr 1fr; } }如果是從窄屏往寬屏寫CSS里只需要考慮在更寬的屏幕上多分幾列、放大點字號這類增量變化閱讀和維護都會更容易。另外別忘了給圖片加上自適應規(guī)則否則圖片在小屏上會擠破容器img { max-width: 100%; height: auto; display: block; }這一行代碼加上之后任何圖片都不會再爆框了。作為把頁面從電腦端帶到移動端的關鍵一步它值得被記進每個頁面的公共樣式里。5. 交互與微動效用輕觸感提升體驗第五個網(wǎng)頁我決定不引入JavaScript動效全部用CSS來完成。這不只是因為我圖省事——我確實想看看純CSS到底能做出多豐富的交互體驗。做完之后發(fā)現(xiàn)只要掌握幾個關鍵的屬性就足夠讓頁面充滿活氣了。5.1 Hover效果最簡單的回應Hover效果是頁面與用戶之間最直接的互動。用戶把鼠標懸停在某個可交互元素上頁面用視覺變化回應你可以點我。我在書籍卡片上用了上移陰影加深的效果代碼見4.4在鏈接上用了顏色漸變效果a { color: #c0632c; transition: color 0.2s ease; } a:hover { color: #94491e; }這里的關鍵是transition屬性它讓顏色變化不是瞬間生硬的而是在0.2秒內(nèi)平滑過渡觀感柔和很多。如果沒有transition鼠標懸停時顏色咔地一下變過去很突兀。0.2秒到0.3秒的過渡時長是人眼最舒服的范圍太短了看不到過程太長了又會覺得拖沓。5.2 平滑滾動從跳轉到滑行導航欄里的錨點鏈接默認行為是瞬間跳轉到對應區(qū)塊體驗很生硬。只用一行CSS就能改成平滑滾動html { scroll-behavior: smooth; }頁面里所有錨點的滾動都會變成順滑的滑動不需要寫任何JavaScript。這個改動不大但明顯提升了瀏覽的舒適度。如果再配合頁面頂部的sticky導航用戶從上到下瀏覽時會覺得整個頁面像一條連貫的河流而不是斷斷續(xù)續(xù)的模塊拼接。5.3 動效的度克制才是高級感做完了上面這些動效我反而想提醒一句動效一定要克制。做頁面時很容易陷入越多越好的誤區(qū)但大量動效會讓用戶視覺疲勞還會造成性能負擔尤其是手機上。我給自己定了幾條動效紀律所有動效時長不超過0.4秒只用transform、opacity這類不發(fā)生重排的屬性不輕易給整頁加來回晃動的動畫。transform的動畫非常省性能因為它在GPU上完成不觸發(fā)布局繪制。而像height、width、margin這類屬性做動畫會引起重排性能差得多在卡片上跑的時候掉幀明顯。記住這個原則以后做動效也不容易翻車。6. 調試與自檢為意外預留時間讓頁面真正可用寫完CSS和動效頁面看起來已經(jīng)像模像樣了。但這時候還不能算完成——真正讓頁面穩(wěn)定可用的是逐項調試和自檢的過程。這一步不是我多喜歡做而是因為第五個網(wǎng)頁之前的幾個頁面幾乎每一個都栽在寫完就覺得好了這件事上。6.1 先打開控制臺再打開頁面很多初學者修改樣式靠保存再刷新的原始辦法效率很低。我現(xiàn)在的習慣是在瀏覽器里調試時始終打開開發(fā)者工具利用元素面板直接改CSS屬性實時看效果。比如發(fā)現(xiàn)卡片的圓角不夠圓直接在工具里把border-radius從10px改成14px滿意之后再回去更新代碼文件。這個過程能把反復試錯的時間壓縮好幾倍。另外一個實用技巧是勾選開發(fā)者工具的移動端模擬視圖快速檢查頁面在不同寬度下的表現(xiàn)。注意手機模擬只能提供參考真正的測試還是得在真機上進行因為有些細節(jié)字體渲染、滾動條行為模擬器和真機是有差距的。6.2 樣式翻車問題排錯實錄這幾個問題是我在寫第五個網(wǎng)頁過程中排查次數(shù)最多的也是新手最容易踩的坑flex布局的子元素被壓縮變形這時優(yōu)先檢查子元素是否設置了flex-shrink屬性或者檢查是否有min-width限制。Flexbox的默認行為是空間不足時壓縮子元素如果要保持元素等寬可以用flex: 1 1 0%代替flex: 1。圖片變形或拉長多半是沒在img上設置height: auto導致設置了固定高度后比例失衡。加上max-width: 100%; height: auto;基本可以解決。頁腳上移或布局塌陷很可能是內(nèi)容區(qū)使用了浮動但沒有清除浮動。用flex或grid布局后這個坑較少出現(xiàn)但在老代碼里依然很常見。z-index失效檢查元素是否設置了positionrelative、absolute、fixed等任意一種。z-index只對定位元素生效如果沒設position它就是個空擺設。font-size不同瀏覽器顯示不一樣不用太糾結不同瀏覽器在字體渲染上本來就有細微差別。關鍵是設置統(tǒng)一的font-family和fallback字體如PingFang SC, Microsoft YaHei, sans-serif把差異控制到不影響觀感的程度。6.3 頁面收工前的自查清單在點擊結束或者把代碼交出去之前我會過一遍這份自查清單各級標題是否齊全、層級是否連續(xù)每個圖片是否都寫了alt文本頁面里有沒有漏掉的死鏈、跳轉錯誤的錨點不同寬度下手機、平板、桌面頁面是否有明顯錯位所有交互效果是否在鍵盤/觸屏下也能被觸發(fā)按鈕可以點、鏈接可以按控制臺有沒有報錯或者未捕獲的異常頁面大文件圖片、字體是否做了壓縮加載速度能否接受無樣式狀態(tài)CSS加載失敗時下內(nèi)容是否仍可讀取這份清單每一條都是我踩過坑之后加進去的。比如無樣式狀態(tài)這一條就是因為在一次CSS文件沒加載完成的情況下刷新頁面變成了純文本我才意識到HTML本身也要保證內(nèi)容完整、可讀。堅持走一遍清單幾乎能消滅80%以上的低級失誤。7. 一點額外的心得第五個網(wǎng)頁之后的下一步頁面收尾之后我會習慣性地再讀一遍自己寫的代碼。這個動作本來只是為了檢查bug但每次都能發(fā)現(xiàn)一些當時沒想到的問題某個類名起得太隨意某處樣式重復定義某段HTML嵌套層級過深。于是我會順手做一次小重構——不是推翻重寫而是把明顯冗余的部分理干凈?，F(xiàn)在回頭看我的第五個網(wǎng)頁最大的收獲其實不在代碼本身而在那份先思考、再動手、后打磨的流程感。前幾個頁面我都是想到哪兒寫到哪兒這個頁面我則是從內(nèi)容清單到布局草圖再到實現(xiàn)一路有條不紊。如果你也正好走到第五個網(wǎng)頁這一步我建議你把心態(tài)從我要寫一個頁面換成我要設計一個作品——先讓內(nèi)容想清楚再讓代碼跑起來最后讓細節(jié)經(jīng)得起看。在這個過程中你會發(fā)現(xiàn)做網(wǎng)頁最迷人的地方不是學了多少新特性而是把一個想法真正變成別人能打開、能瀏覽、能有感受的東西。這種完成的快樂比玩任何新框架都持久。