深圳Web前端學習：如何給網頁劃分合適的結構--【千鋒】

深圳Web前端學習：如何給網頁劃分合適的結構--【千鋒】

學習前端第一步：劃分網頁結構，網頁的結構的劃分應該遵循哪些原則，如何去劃分網頁的結構呢？

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

一、自上而下原則

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

二、從左至右原則

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

三、一畫素原則

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

在說完上述三個原則過後有些人就會一味地追求遵循這些原則，比如在劃分結構的時候一定要分為上下部分，但是比如下面我擷取這個網頁的一部分，圖片和文字其實是屬於一個整體，文字是對圖片的說明，所以就不應該分為上下，而應該水平方向劃分，每一個圖文作為一部分內容，水平分為四部分：

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

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

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

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

————————————————