對于一個前端初學(xué)者，第一步就是要學(xué)會如何劃分一個網(wǎng)頁的結(jié)構(gòu)。當(dāng)設(shè)計師給到你一張設(shè)計圖，你需要根據(jù)這張圖做出一個符合標(biāo)準(zhǔn)的頁面，這里所說的標(biāo)準(zhǔn)，即w3c標(biāo)準(zhǔn)，參考w3school在線教程。那么做出一個完整的符合標(biāo)準(zhǔn)的網(wǎng)頁第一步就是要劃分網(wǎng)頁的結(jié)構(gòu)。一般來講，網(wǎng)頁結(jié)構(gòu)的劃分需要遵循幾個原則：

一、自上而下原則

因為瀏覽器在渲染一個網(wǎng)頁的順序是自上而下的。這里提到了渲染這一個詞，所謂的渲染就是瀏覽器將代碼轉(zhuǎn)換為頁面顯示內(nèi)容的過程。瀏覽器會自上而下讀取你寫的代碼并自上而下的顯示。

二、從左至右原則

在自上而下的同時，同一行的內(nèi)容是從左至右渲染，所以在劃分結(jié)構(gòu)的時候有從左至右的順序。

三、一像素原則

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

在說完上述三個原則過后有些人就會一味地追求遵循這些原則，比如在劃分結(jié)構(gòu)的時候一定要分為上下部分，但是比如下面我截取這個網(wǎng)頁的一部分，圖片和文字其實是屬于一個整體，文字是對圖片的說明，所以就不應(yīng)該分為上下，而應(yīng)該水平方向劃分，每一個圖文作為一部分內(nèi)容，水平分為四部分：

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

說到main區(qū)，這個結(jié)構(gòu)劃分就多種多樣了。有些網(wǎng)頁是有一個從左到右通欄的背景色甚至背景圖片，這樣我們結(jié)構(gòu)的劃分也應(yīng)該有外層一個通欄的盒子，將背景色或者背景圖給他，里面再嵌套一個inner盒，給可視區(qū)域的固定寬度并居中。如果沒有通欄的背景那么這個時候是不需要給通欄的盒子，直接main區(qū)給固定寬度居中就好了。

那么在結(jié)構(gòu)劃分的時候有些盒子區(qū)域之間的空隙怎么去劃分這也是初學(xué)者最容易犯難的問題。其實嚴(yán)格意義來講這些空白在結(jié)構(gòu)劃分的時候并不會造成影響，因為空白區(qū)域在都可以用代碼來實現(xiàn)。不過一些文字區(qū)域你不能貼著文字的上下來劃分，因為文字都是自帶行高的。

另外，有些地方可能會有一部分小圖片或者一部分內(nèi)容覆蓋在外面大盒子上，這部分在劃分結(jié)構(gòu)的時候可以不用管，因為后期在代碼實現(xiàn)的時候我們可以利用定位技術(shù)實現(xiàn)。返回搜狐，查看更多