先定一個小目標，做他一個天貓官網

帶了挺多屆的學生，發現了一個現象，同學們在學習HTML，CSS，Javascript這些前端基礎技術的時候，不會有太大的問題，大概也能分開掌握里面的標簽，元素，選擇器，函數，對象等等知識點。 但是要綜合運用這些知識做一個好看的網站的時候，就犯暈了，不知道該如何布局，如何運用合適的樣式，一些稍復雜的效果也不知道怎么下手了。

這樣我認識到，單純學習這些分開的樣式等知識點，是無法有效的運用他們的。 那么就需要一個前端項目來進行整體的練手。

每個培訓學校呢，都會有一個WEB項目來練手，通常都會做一個電商的購物網站，雖然聽上去老套，但是確實很典型，各種知識點都會涉及到。

既然如此，就做一個購物網站來讓他們跟著做來練手吧，那么做一個什么樣的好呢？ 放眼望去，難道還有比天貓官網更有說服力的嗎？

能夠從頭到尾做一個天貓官網前端，是非常有價值的。 假如，能夠獨立的做出來，那么這就意味著，各種典型的場景，布局的思路，相關技術的運用都達到相當熟悉的程度，這個對于找工作，拿offer，更重要的是，技能的提升，是很有用的。

說干就干，我就照著天貓官網，做了一個模仿天貓官網:http://how2j.cn/tmall包括里面的取色，布局，javascript交互，尺寸，都統統盡我所能做到跟天貓官網近似。

好吧，同學們，就參考這個模仿天貓官網來練手，做一個一模一樣的吧！

然而，當我準備把這個項目一股腦打包給同學們的時候，我就懵逼了~

為什么呢？ 因為內容實在是太多了！ 為了實現前端效果，其中光是style.css文件就2200多行。

Html頁面也相當復雜，還有各種javascript的交互。 如果就這么一股腦打包給同學們，那么讓他們直接去天貓官網看又有什么分別呢？ 對于前端新手，一下子太多太大的信息量，不僅不能被有效地消化掉，還有可能產生副作用——面對大量代碼無從學起，強行閱讀復雜代碼，難以理解與消化，逐漸增加受挫感，最后失去興趣

為了能夠讓這些知識變得易于消化和吸收(也不枉我花了2個多月的時間，一點點取色，量取尺寸，翻來覆去規劃布局，反復嘗試精心制作一樣的javascript交互效果，最后做出來的這么20多種模仿天貓官網頁面)，我把頁面分為如下幾類頁面：

有的頁面比較復雜，就再拆分的小的頁面，比如首頁又分為導航和輪播，分類和推薦產品，產品列表以及javascript的交互部分。

光是拆分的小的頁面也不夠啊，在每個頁面知識點的講解里面，首先展示運行之后的效果

接著講解為了達到這個效果要進行如何的布局

結合布局，無CSS效果的HTML結構就好理解多了

然后就是樣式的講解，在這里我就犯難了， 樣式起作用是和不同的選擇器以及元素關聯起來的。 怎么樣才可以有效的讓同學們理解那么多的樣式以及他們效果呢？

為了更好的把樣式的作用闡述出來，做了一個大大提高學習效率的樣式詳解功能。

http://how2j.cn/frontshowFullStyle?step.id=3135&tid=43

這個功能。。。怎么用呢~

左邊是列出了所有的樣式

右邊一開始是無樣式的HTML的效果

通過點擊左邊的"點擊套用"，就可以挨個使用每種樣式，并且可以在右邊立馬看到使用這一種樣式之后的效果。

這樣就可以達到立竿見影呈現這個樣式的效果了

當然還提供了套用全部樣式，取消全部樣式這些功能。

值得一提的，還有這個動態套用樣式這個功能，hoho，點擊之后，每隔一秒鐘逐個自動套用左側的所有樣式，通過觀察從無樣式的HTML演變為有樣式的效果這么一個動態過程，可以更好的建立整體樣式效果觀念和理解，這是非常吼的~

好，通過這么一個流程，同學們就可以對整個樣式的理解達到比較好的程度。

但是！光看是沒有用的啊，最后還是要自己寫出來才行啊，

所以我又提供了一個練習模式。

http://how2j.cn/frontpractiseModel?step.id=3135&tid=43

在練習模式中，左側是已經準備好了選擇器的樣式，右側是實時顯示效果。 根據前面對各種樣式的理解和消化，自己動手做一遍。 做的時候，就會犯各種錯誤，跳各種坑。 而恰恰就是這些各種錯誤和各種坑，才是最有價值的經驗碎片和能力源泉。

最后，還提供了一個空白頁供以練習，在這個空白頁里準備好了jquery和bootstrap的導入(因為要用到bootstrap的圖標)，還準備了標簽標簽，以及一個空白的

倘若！ 倘若！ 能夠基于空白頁，獨立地把前面演示的天貓效果做出來，那么我可以說，這個頁面所運用到的前端的知識點，你就拿到手了！

倘若！ 倘若！ 能夠把所有的天貓前端頁面都學習并且掌握，而且能夠獨立的做出來。 那么閣下所掌握的前端技能，不敢說就達到王者，但起碼也是白銀！

試問，如果你正在找前端工作，又有多少公司對前端頁面的要求會超過天貓呢？

因為這套學習天貓官網前端的學習系統有一定的復雜性，為了保證學習的高效率性，錄制了如何使用這套系統的視頻。

連接：模仿天貓前端學習模塊http://how2j.cn/k/tmall-front/tmall-front-790/790.html?tid=43