網頁布局的常見8種類型：1、“國”字型布局；2、拐角型布局；3、標題正文型布局；4、封面型布局；5、“T”結構布局；6、“口”型布局；7、對稱對比布局；8、POP布局。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

網站的風格大部分是各不相同，但是布局都有一定的規律，常見的網站布局形式有八種，分別是“國”字型布局、拐角型布局、標題正文型布局、封面型布局、“T”結構布局、“口”型布局、對稱對比布局、POP布局。下來逐一給大家介紹這八種網頁布局的常見類型。

1、“國”字型布局

這種布局是普通也是常見的，一些大型網站經常使用這種類型。它的特點就是規范，內容主次由上到下，網頁上面是標題條幅、導航欄，下面就是網站相關內容信息等，例如chinaren、163、sina等網站。

2、拐角型布局

該布局特點就是把相關內容的鏈接放到網頁的左面或右面，另一面就是相關的文字信息，網站的上面是標題條幅或是主要內容導航欄，例如校園網站等。

3、標題正文型布局

它的特點就是利用文字來布局，除了標題，下面就是文章，像一些專門的文章、小說頁面或注冊頁面就屬于這種類型。

4、封面型布局

它的特點是網站的首頁是一些精美有創意的圖案結合一些小的動畫組成，在頁面當中，沒有什么導航欄指示，只是有簡單的“進人”等鏈接，這種布局一般設計性網站用的比較多，像設計論壇、設計公司、個人網站等，因為這種布局需要精心設計，給人的視覺感覺也很美妙。

5、“T”結構布局

所謂“T”結構布局，就是指網頁上邊和左邊相結合，頁面頂部為橫條網站標志和廣告條，左下方為主菜單，右面顯示內容，這是網頁設計中用得最廣泛的一種布局方式。在實際設計中還可以改變“T”結構布局的形式。

如左右兩欄式布局，一半是正文，另一半是形象的圖片、導航。或正文不等兩欄式布置，通過背景色區分，分別放置圖片和文字等。

這樣的布局有其固有的優點，因為人的注意力主要在右下角，所以企業想要發布給用戶的信，大都能被用戶以最大可能性獲取，而且很方便，其次是頁面結構清晰，主次分明、易于使用。缺點是規矩呆板，如果細節色彩上不注意，很容易讓人“看之無味”。

6、“口”型布局

這是一個形象的說法，指頁面上下各有一個廣告條，左邊是主菜單，右邊是友情鏈接等，中間是主要內容。

這種布局的優點是頁面充實、內容豐富、信息量大，是綜合性網站常用的版式，特別之處是頂部中央的一排小圖標起到了活躍氣氛的作用。

缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網易壁紙站使用多幀形式，只有頁面中央部分可以滾動，界面類似游戲界面。使用此類版式的有多維游戲娛樂性網站。

7、對稱對比布局

顧名思義，它指采取左右或者上下對稱的布局，一半深色，一半淺色，一般用于設計型網站。其優點是視覺沖擊力強，缺點是將兩部分有機地結合比較困難。

8、POP布局

POP源自廣告術語，指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。常用于時尚類網站，優點顯而易見：漂亮吸引人，缺點是速度慢。