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

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

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

1、“國”字型布局

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

2、拐角型布局

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

3、標題正文型布局

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

4、封面型布局

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

5、“T”結構布局

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

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

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

6、“口”型布局

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

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

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

7、對稱對比布局

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

8、POP布局

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