第一天

　　第一天,該教點什麼呢,我是思索良久,以爲仍是從基礎幹起,先仿個css頁面熟悉下css的樣式怎麼寫吧.因而我讓他先照着淘寶的首頁仿一個,等作完了這個再仿手淘的首頁,這樣pc移動都有了 也算是佈局入門了.

　　果真,剛開始作就遇到了問題,淘寶的首頁佈局仍是比較常規的可是由於內容多,因此新手第一眼看上去就不知道如何下手,我看了他的html結構,就知道問題所在,這是缺乏對頁面進行劃分的思路,其實這個咱們平時工做中也是依照工做經驗,卻是沒有仔細考慮過什麼方法論,我想了想,就跟他說,網頁這個東西目前主要是基於div進行佈局的,每一塊div表明一個內容體,而div是一個語義無關的標籤,從字面上理解 div 就是劃分的含義,使用div將頁面進行劃分,雖然html5引入了一些常見的語義標籤用來劃分,可是基於內容的劃分依然是 div 爲主,那怎麼進行劃分呢?

　　咱們不妨思考下,div的表現方式,默認的div實際上是一個width 100%的block塊,block是什麼意思,阻塞,障礙,因此不管你的html中的div橫着放,豎着放,在頁面的中全部的div都是垂直排列的,這也符合 阻塞 塊 劃分 這三個含義.從這點出發,我認爲頁面的劃分應該是從左到右,從上到下的,why? 由於從上到下的劃分 實際上是不須要樣式修改的,div默認就是這種排版,而從左到右是須要依靠浮動,或者flex佈局等css樣式來調整的,因此咱們要先考慮變化的部分,再考慮不變的部分,按照這個思路,除去那些須要定位的元素,一個靜態頁面就能夠被輕鬆的劃分出來,這種方法是否靠譜,我馬上在我弟弟身上作了試驗.

　　我跟他說你就按照 從左到右 ,從上到下的劃分方式去創建div,因而他就開始了,可是我發現了另外一個問題,新手老是一上就是代碼,coding,其實這點很很差,代碼這東西太具體,腦子裏要是沒有個結構,很難經過代碼想象出頁面,因此得先設計,因而我止住他,先別寫,用本子把你的劃分畫出來,而後標出名字,這裏要注意 命名要規範,不要搞些看不懂的命名,大部分的內容塊命名,網上都有,百度,谷歌均可.

　　事實證實這種方式是可行的,他本來1天都搞不定的東西,經過這種劃分,很快就創建了頁面結構,而且實現了樣式.

　　本日我總結的幾點以下:

　　1.對於新手而言,不要急着寫代碼,先思考,最好是用圖和文字來描述你的代碼結構,不單單是html css js也是如此,後面的日子會講到.

　　2.對於一個靜態頁面的劃分,能夠採用從左到右,從上到下的劃分方式,而後再實現相關的樣式便可

　　3.有人指導很重要啊!