如何給網頁劃分結構

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

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

　　一、自上而下原則

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

　　二、從左至右原則

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

　　三、一像素原則

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

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

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

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

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

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