好程序員web前端教程分享如何給網頁劃分結構

　　好程序員web前端教程分享如何給網頁劃分結構，學習前端第一步：劃分網頁結構，網頁的結構的劃分應該遵循哪些原則，如何去劃分網頁的結構呢？

　　對於一個前端初學者，第一步就是要學會如何劃分一個網頁的結構。當設計師給到你一張設計圖，你須要根據這張圖作出一個符合標準的頁面，這裏所說的標準，即w3c標準，參考w3school在線教程。那麼作出一個完整的符合標準的網頁第一步就是要劃分網頁的結構。通常來說，網頁結構的劃分須要遵循幾個原則：

　　1、自上而下原則

　　由於瀏覽器在渲染一個網頁的順序是自上而下的。這裏提到了渲染這一個詞，所謂的渲染就是瀏覽器將代碼轉換爲頁面顯示內容的過程。瀏覽器會自上而下讀取你寫的代碼並自上而下的顯示。

　　2、從左至右原則

　　在自上而下的同時，同一行的內容是從左至右渲染，因此在劃分結構的時候有從左至右的順序。

　　3、一像素原則

　　這個原則對於初學者來講必須堅持，但也並非說不管何時都得死認這個道理。前期咱們在劃分網頁的時候必定要劃分準確，尤爲是橫向。試想，若是外面的盒子寬度是1200像素，裏面兩個盒子一個600像素另外一個601像素，加起來超過了父級的寬度那麼必然第二個盒子會換到下一行進行顯示。

　　在說完上述三個原則事後有些人就會一味地追求遵循這些原則，好比在劃分結構的時候必定要分爲上下部分，可是好比下面我截取這個網頁的一部分，圖片和文字實際上是屬於一個總體，文字是對圖片的說明，因此就不該該分爲上下，而應該水平方向劃分，每個圖文做爲一部份內容，水平分爲四部分：

　　咱們說通常網頁有header（頭部區）、banner（廣告橫幅區）、main（主體內容區）、footer（底部區），單頁並不是全部網頁都是這樣，有些網頁沒有banner可是初學者容易將header下面那一部分硬劃分爲banner，有些網頁除了這幾部分還會有好比icon等區域由喜歡將他們劃分到main中去。

　　說到main區，這個結構劃分就多種多樣了。有些網頁是有一個從左到右通欄的背景色甚至背景圖片，這樣咱們結構的劃分也應該有外層一個通欄的盒子，將背景色或者背景圖給他，裏面再嵌套一個inner盒，給可視區域的固定寬度並居中。若是沒有通欄的背景那麼這個時候是不須要給通欄的盒子，直接main區給固定寬度居中就行了。

　　那麼在結構劃分的時候有些盒子區域之間的空隙怎麼去劃分這也是初學者最容易犯難的問題。其實嚴格意義來說這些空白在結構劃分的時候並不會形成影響，由於空白區域在均可以用代碼來實現。不過一些文字區域你不能貼着文字的上下來劃分，由於文字都是自帶行高的。

　　另外，有些地方可能會有一部分小圖片或者一部份內容覆蓋在外面大盒子上，這部分在劃分結構的時候能夠不用管，由於後期在代碼實現的時候咱們能夠利用定位技術實現。