學完只是全面的了解了，只能說明你基本具備了這方面的知識，而並非能力，把知識轉換成能力是需要具備更多的大局觀的，像JD首頁，你模仿之前先要分析清除其中用到的知識點，比如模仿一個電腦端的首頁還是手機端的，或是響應式的？布局採用哪種方式？flex、grid、div+定位，為什麼要採用這種方案？還有兼容性問題。初學，你對這些概念自然是很迷糊，但是怎麼辦呢？

我的觀點很簡單：」抄「，對於新手抄無疑是個事倍功半的方法。首先，我認為響應式，兼容性、布局等問題都是牽扯到項目大局觀的應用性知識，最簡單粗暴的辦法就是用現成的項目分析，分析幾個項目後，你的應用能力自然就提升了。比如JD首頁，假設你要做WEBapp,瀏覽器你去打開檢查元素，看看人家的HTML結構是怎麼寫的，結合自己的見解，如果你看了沒感覺，完全是不懂，不要緊，直接抄，但你要把你心裡的疑惑記錄下來，以我經驗：不管是HTML結構還是CSS樣式，後面的內容內會大量重複出現，你在照抄的過程就是你漸漸地深入理解整個結構的過程。

當然這個過程你會遇到很多問題，比如css樣式為什麼要這樣寫，感覺很啰嗦麻煩，不如你自己寫法簡單，其實不要緊，你按照你的寫法就可以了，因為你的眼界不足以支撐你理解當前的代碼，當你多寫幾個JD頁面，你會發些怎麼還多CSS樣式是重複的，於是你心中蕩漾，能不能寫一個樣式讓所有的頁面，甚至小到某個按鈕、表單通用，豈不是省了很多事，於是你可能會把公用的css寫到一起，恩恩，這樣果然騷。感覺自己很膩害了，於是嘗試自己寫個頁面試試，結果憋了好多天，終於憋出來了，為什麼要好多天呢？因為你對知識點掌握還不夠熟，你把class寫成了calss,用了半天時間硬是沒發現，好不容易解決了這個問題又出現了另一個問題，為什麼會這樣呢？因為不熟，不熟，就是不熟，知識點不熟，寫的手感不熟。如果你是一個用心的人，你會把你寫的和類似的線上項目比較，一看哇別人怎麼寫的這麼統一，思路這麼清晰，而我，東一榔頭西一棒槌，毫無章法可言，一番研究，你發現原來人家引入了bootstrap.css這麼個文件，你恍然大悟，人家用的是框架，於是你好奇心大膨，學習了一哈bootstrap，於是拿著練練手，果然省事，，，，，，一段時間以後，你終於熟練了，什麼布局、兼容的概念已經難不倒你了，於是你想嘗試寫一個簡單的框架，你構思了好久，終於決心寫了，一頓操作猛如虎，結果……落地成盒了。著實被打擊到了，但你依然像打不死的小強，於是決心閱讀Bootstrap源碼，第一遍，第二遍，第三遍……終於，你拍案而起，讚歎不絕，原來如此，此時此刻，你已經能熟練使用HTML+CSS布局，並於閑暇之餘常常陷入對一些知識的思考，水平日益增長。大概成長過程就是這樣的吧！

當然這個過程你要學習或了解的東西還很多，例如：CSS3的新增特性、less、scss等等，隨著視野拓寬，大局觀就越成熟，於是乎回頭看看，JD首頁不過 如此乎！

你沒學會拆分和彌補這2項工作。

什麼是拆分。

就是把你的工作任務進行拆分，你看到京東首頁，對於一個初學者來說，其實工作量是很大的，因為你的布局思維，屬性應用不熟練。把頁面拆分成幾個模塊，一般是從上到下，比如先做頭部的導航。導航還能不能再拆分？可以拆分到左右2塊，這個怎麼布局，之前都是 用浮動，現在都是用flex布局，導航大的布局搞定了，其他就是小的部分的設計了。一些基礎的屬性了。

什麼是彌補.

當你寫一個小的屬性，或者什麼地方不知道思路的時候，這個時候就需要去彌補了。怎麼彌補？可以看jd的源碼，前端的源碼任你看，或者你知道自己的問題是什麼就最好了，直接去網上搜。千萬不要有完美主義，我一定要都學會才做，都是邊學邊做的。

一般我的學員學了2-3周能搞定這樣一個頁面，按下面的線路來。

行者：零基礎帶你學前端?

zhuanlan.zhihu.com圖標

工欲善其事必先利其器。

複雜是因為需要做的太多，把瀏覽器兼容，布局等工作交給第三方框架或者庫來做，可能就沒想像的那麼麻煩啦。

眼睛說：嗯，我看懂了

腦子說：嗯，我記住了

雙手說：嗯？我不會呀

理論和實踐之間真的有道無形的鴻溝需要逾越~！

一個布局CSS可以用多種方法實現，但是布局一旦複雜，有些方法可能就不太適合當前情景。

所以代碼寫東西靠多實踐多總結，從複雜布局樣式出來之後，你就會明白。

前期像你這樣正常，都是過來人。

不斷實踐，不斷優化，這就是提升。

推薦閱讀：
相关文章