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

一、自上而下原則

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

二、從左至右原則

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

三、一像素原則

這個(gè)原則對(duì)于初學(xué)者來(lái)說(shuō)必須堅(jiān)持，但也并不是說(shuō)無(wú)論什么時(shí)候都得死認(rèn)這個(gè)道理。前期我們?cè)趧澐志W(wǎng)頁(yè)的時(shí)候一定要?jiǎng)澐譁?zhǔn)確，尤其是橫向。試想，如果外面的盒子寬度是1200像素，里面兩個(gè)盒子一個(gè)600像素另一個(gè)601像素，加起來(lái)超過(guò)了父級(jí)的寬度那么必然第二個(gè)盒子會(huì)換到下一行進(jìn)行顯示。

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

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

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

那么在結(jié)構(gòu)劃分的時(shí)候有些盒子區(qū)域之間的空隙怎么去劃分這也是初學(xué)者最容易犯難的問(wèn)題。其實(shí)嚴(yán)格意義來(lái)講這些空白在結(jié)構(gòu)劃分的時(shí)候并不會(huì)造成影響，因?yàn)榭瞻讌^(qū)域在都可以用代碼來(lái)實(shí)現(xiàn)。不過(guò)一些文字區(qū)域你不能貼著文字的上下來(lái)劃分，因?yàn)槲淖侄际亲詭懈叩摹?/p>

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