1.“通”字型的結構布局
所謂字體壹樣就夠了，是指頁面頂部是“網站logo+廣告欄+主菜單”或主菜單，左下方是二級欄，右側是鏈接欄，具體內容的布局顯示在屏幕中間。
這種布局的優點是充分利用版面，頁面結構清晰，左右堆疊，主次分明，信息量大；缺點是頁面擁擠，過於死板。如果在細節和色彩上缺乏變化和調整，很容易感覺單調。
2.“國”字型布局
“國”字型的布局是從“通”字型的布局演變而來的。在保留“通”字體的同時，在頁面底部增加壹個橫向菜單或廣告，這是壹些大型網站比較喜歡的類型。壹般最上面是網站標題和橫幅廣告，其次是網站主要內容。左右兩個小塊的內容，中間是主體部分，和左右並列，最下面是網站的壹些基本信息，聯系方式，版權聲明。這種結構是互聯網上看到的最常見的結構類型。
這種布局的好處是充分利用布局，信息量大，方便與其他頁面切換鏈接。缺點是頁面擁擠，四面封閉，讓人有窒息感。
3.t形布局
這是壹個很形象的說法，意思是頁面頂部是“網站logo+廣告欄”，左側是主菜單，右側是主要內容。這種布局的好處是頁面結構清晰，優先級明確，對於初學者來說是最簡單的布局方式。缺點是頁面沈悶。如果不註意細節中的色彩，很容易讓人“看起來很無趣”。
4.“三”字型布局
這種布局在國外站點多采用，國內不多。特點是頁面上有兩個橫向色塊，把整個頁面分成幾個部分，色塊大部分放廣告欄、更新和版權提示。
對比布局
顧名思義，這種布局采用的是左右或上下對比的方式:半暗半明。壹般用於面向設計的網站。優點是視覺沖擊力強；缺點是很難將兩部分有機結合起來。
6.流行布局
POP引用自廣告語，意思是頁面布局就像壹張海報，壹張壹張美麗的圖片就是頁面的設計中心。這種類型基本上出現在壹些網站的首頁，大部分都是精致的平面設計結合壹些小動畫，放幾個簡單的鏈接或者只是壹個“進入”鏈接，甚至直接在首頁的圖片上做鏈接，沒有任何提示。這種布局大多出現在企業網站和個人主頁上，如果處理得好，會給人帶來賞心悅目的感覺。
7.Flash布局
這種布局意味著整個或者大部分網頁本身就是Flash動畫，本身就是動態的。畫面壹般不會華麗有趣，是比較新潮的布局方式。其實這和封面結構差不多，只是這種類型采用了目前非常流行的閃光燈。與封面結構不同的是，由於Flash的強大功能，頁面所表達的信息更加豐富，如果處理得當，其視覺和聽覺效果並不比傳統多媒體差。不同的網站有不同的頁面內容安排。壹般網頁的基本內容包括標題、LOGO、頁眉、頁腳、主要內容、廣告欄等。下面簡單解釋壹下:a、頁面標題在站點的每個頁面中都有壹個標題，用來提示頁面的主要內容，在瀏覽器的標題欄會出現壹條消息，而不是在頁面的布局中。它的重要作用是引導訪問者清晰地瀏覽網站內容，不迷失方向。在HTML語言中添加標題相對簡單。
標題名稱B、網站LOGO作為對外交流的重要窗口，創始人會用它來宣傳自己的形象。如果企業(協會)已經導入了CIS(CorporateIdentitySystem)形象識別系統，那麽在網站建設過程中，網站設計就應該基於這個系統，其中的標誌性圖案就是網站的LOGO。壹個成功的網站，就像方正實體壹樣，有獨特的形象識別，在網站推廣的過程中會事半功倍。如果還沒有引入CIS，那麽壹個網站的LOGO應該是在網站建設之前，根據網站的整體定位來設計制作的，它就像是壹個產品的商標，體現了網站的特色、內容和內在的文化內涵和理念。LOGO壹般設置在主頁面的顯著位置和二級頁面的頁眉位置。c .頁眉頁眉是指頁面的上半部分。有的頁面分的很清楚，有的頁面沒有明顯區分或者沒有頁眉。頭部的關註值高。大多數網站制作者設置網站目的、宣傳口號、廣告語言等。在這裏，而其他人把它設計成出租的廣告位。d .頁腳頁腳是頁面的底部，通常用於顯示網站所屬公司(社區)的名稱、地址、版權信息、電子郵件地址的超鏈接。導航是網頁設計的重要組成部分，也是整個網站設計的獨立部分。壹般來說，壹個網站年的導航位置是固定在每個頁面中的。指南的位置在網站的結構和整體布局中起著重要的作用。導航位置通常有四個標準顯示位置:左、右、上和下。壹些網站使用各種導航來增加頁面的可訪問性。f .主要內容主要內容是頁面設計的主要元素。壹般是二級鏈接內容的標題，或者是內容的摘要，或者是內容的部分摘錄。表現手法壹般是文字和圖像的結合。它的布局通常根據內容的分類按列排列。頁面的關註值壹般是從上到下、從左到右排列的，所以重要內容壹般排列在頁面的上方位置，次要內容排列在右下方。原發布者:menwai2018電子商務網站首頁內容布局教學:華孝琴常見的網頁布局結構——中文字體布局由同壹字體布局演變而來，因布局結構與漢字國家相似而得名。網站的logo和導航欄或Banner廣告壹般放在頁面的頂部，網站的主要內容主要放在頁面的中間，網站的版權信息和聯系方式壹般放在底部。t形布局，壹種常見的網頁布局結構，因與英文大寫字母t相似而得名，壹般橫向網站的logo或Banner廣告放在頁面頂部，導航欄菜單在左下方，網頁正文等主要內容在右下方。網頁常見的布局結構是標題文字型——標題文字型布局的布局結構壹般用於顯示文章頁面、新聞頁面和壹些註冊頁面。常見的網頁布局結構——左右框架布局結構是壹些大型論壇和企業經常使用的壹種布局結構。其版面結構主要分為左右兩頁。左邊壹般主要是壹個導航欄鏈接，右邊是網站的主要內容。常見的頁面布局結構是上下框架——上下框架布局類似於之前的左右框架布局。唯壹不同的是，它是壹個分為兩頁的框架。常見的網頁布局結構綜合框架——綜合框架布局是壹種常見的網頁布局結構POP布局，結合了左右框架布局和上下框架布局的頁面布局技術。Pop布局是壹種藝術化、時尚化的網頁布局方式。頁面設計通常以壹幅精美的海報圖片作為版面的主體。常見的網頁布局結構Flash布局——FLASH布局是指以壹個或多個FLASH頁面為主體學習網頁前端的第壹步:劃分網頁結構，網頁結構的劃分應該遵循哪些原則，網頁結構如何劃分？
對於壹個前端初學者來說，第壹步就是要學會如何劃分壹個網頁的結構。當設計師給妳壹張設計圖，妳需要根據這張圖做壹個標準頁面。這裏說的標準，即w3c標準，指的是w3school在線教程。那麽制作壹個完整的標準網頁的第壹步就是劃分網頁的結構。壹般來說，網頁結構的劃分需要遵循幾個原則:
首先，自上而下的原則
因為瀏覽器以自上而下的順序呈現網頁。這裏提到了渲染這個詞。所謂渲染，就是瀏覽器將代碼轉化為頁面顯示內容的過程。瀏覽器會從上到下讀取妳的代碼，從上到下顯示。
第二，從左到右的原則
同時同壹行的內容是從左到右呈現的，所以劃分結構時有從左到右的順序。
第三，壹個像素的原理
這個原則對於初學者來說是必須要堅持的，但並不意味著妳要壹直堅持下去。前期壹定要對網頁進行準確的劃分，尤其是橫向劃分。想象壹下，如果外方框的寬度是1200像素，而裏面兩個方框之和是600像素，另壹個是601像素，超過了父方框的寬度，那麽下壹行必然會顯示第二個方框。
講了以上三個原則，有些人就會盲目的去遵循這些原則。比如在劃分結構的時候，壹定要把它們分成上下兩部分。但是舉個例子，我在下面截取了這個網頁的壹部分。圖片和文字其實是屬於壹個整體的，文字是對圖片的描述，所以不應該分為上下兩部分，而應該橫向劃分。作為內容的壹部分，每張圖片和文字橫向分為四個部分:
我們說壹般的網頁包括頁眉(頁眉區)、橫幅區(廣告橫幅區)、main(主要內容區)和footer(底部區)。不是壹個頁面上的所有網頁都是這樣的。有些網頁沒有橫幅，但初學者可以很容易地將頁眉下面的部分劃分成橫幅。除了這些部分，壹些網頁還會有圖標等區域將它們劃分成主。
說到主要領域，這種結構劃分是多種多樣的。有些網頁從左到右都有壹個背景色甚至背景圖，那麽我們的結構師也要有壹個帶欄的外盒，給他背景色或者背景圖，裏面嵌套壹個內盒，給可視區域固定寬度，居中。如果沒有banner的背景，那麽這個時候就不需要給banner的框了，把主體區域居中固定寬度就可以了。
那麽在劃分結構的時候如何劃分壹些盒子區域之間的空隙也是初學者最頭疼的問題。其實嚴格來說，這些空白是不會影響結構劃分的，因為空白區域現在已經可以用代碼實現了。但是有些文字區域是不能按照文字的上下來劃分的，因為文字有自己的行高。
另外，有些地方可能會有壹些小圖片或者壹些內容覆蓋在外面的大盒子上，在劃分結構的時候可以忽略，因為我們可以在代碼實現的時候用定位技術在後面實現。