網(wǎng)頁結(jié)構(gòu)的劃分需要遵循幾個(gè)原則？

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

一、自上而下原則

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

二、從左至右原則

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

三、一像素原則

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

在說完上述三個(gè)原則過后有些人就會一味地追求遵循這些原則，比如在劃分結(jié)構(gòu)的時(shí)候一定要分為上下部分，但是比如下面我截取這個(gè)網(wǎng)頁的一部分，圖片和文字其實(shí)是屬于一個(gè)整體，文字是對圖片的說明，所以就不應(yīng)該分為上下，而應(yīng)該水平方向劃分，每一個(gè)圖文作為一部分內(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ū)，這個(gè)結(jié)構(gòu)劃分就多種多樣了。有些網(wǎng)頁是有一個(gè)從左到右通欄的背景色甚至背景圖片，這樣我們結(jié)構(gòu)的劃分也應(yīng)該有外層一個(gè)通欄的盒子，將背景色或者背景圖給他，里面再嵌套一個(gè)inner盒，給可視區(qū)域的固定寬度并居中。如果沒有通欄的背景那么這個(gè)時(shí)候是不需要給通欄的盒子，直接main區(qū)給固定寬度居中就好了。

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

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