今天給大家寫一個頁面布局的方式，幫助大家更清晰的認(rèn)識頁面布局，方式僅供參考。

首先給大家看一下我的文件夾及文件

文件

這里有一個base.css文件，這個css文件主要用來存放一些可以重復(fù)使用的樣式。

base.css內(nèi)容

從圖片中我們可以看到很多的樣式都是通過class定義的，在需要用到這些樣式的時(shí)候可以直接在html文件的class中添加class名。拿取很方便，這個文件也可以在以后不斷的添加內(nèi)容作為一個通用的庫來使用。

接著就是頁面布局，下面是html文件的內(nèi)容。

html

從這張圖就可以清晰的看到base.css文件的運(yùn)用。充分展現(xiàn)了樣式與結(jié)構(gòu)的分離，且提高了html文件的理解，保留了html文件的整潔。

再看看這個頁面的css文件內(nèi)容。

css

結(jié)合html和css，可以看到整個頁面的結(jié)構(gòu)逐漸清晰，并且以某種顏色的區(qū)域占據(jù)網(wǎng)頁，直觀的展現(xiàn)了網(wǎng)頁的初步輪廓。

這樣做的好處不言而喻，它整個結(jié)構(gòu)非常清晰，且環(huán)環(huán)相扣，每一個模塊都是獨(dú)立的，且緊密的拼構(gòu)成一個完整的頁面，避免了模塊之間的相互影響。對頁面的修改也很方便，利于后期的維護(hù)。對程序員編寫代碼也有一個清晰的思路。

最后就是這個頁面布局的效果圖。

效果圖