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