一、常見的頁面布局

在拿到設計稿時，作為一個前端人員，我們首先會做的應該是為設計圖大致地劃分區域，然后選擇一種最合理的，結構清晰的布局。下面我先根據一些典型的網站案例列舉一下幾種常見的頁面布局。

1、T型布局

這個是我們比較常見的布局，其頁面的頂部一般放置橫網站的標志或Banner廣告，下方左側是導航欄菜單，下方右側則用于放置網頁正文等主要內容。
Segmentfault的主頁就是T型布局的。由于網頁太長了，沒有截取底部。

2、國字型布局

國字型布局下最上面是網站的標題以及橫幅廣告條，接下來是網站的主要內寄，左右分列一些小條內容，中問是主要部分，與左右一起羅列到底，最下方是網站的一些基本信息、聯系方式、版權聲明等。
案例圖片來自騰訊11年的一道前段筆試題，有興趣的同學可以去看一下。2011騰訊前端面試稿

3、POP布局

POP布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。常用于時尚類站點。優點顯而易見：漂亮吸引人。缺點就是速度慢。
人大的主頁就類似這種布局。

4、左右布局型

顧名思義，就是網頁主體分為左右兩大塊，多見為后臺管理系統頁面。一般左右布局型的頁面需要做到兩列等高。

如：

5、上下布局型

參見蘋果的官網，類似于整屏顯示的網頁都為上下布局。

二、如何實現——常見的布局方法

關于布局的類型就先說這么多，下面來總結一下上述的布局怎么來實現。下面提一下大家應該都很熟悉的兩大布局方法。圣杯布局和雙飛燕布局。其實這兩種方法一般多用國字型布局上。就是針對三行三列布局的。進行相應的改造也可以用在T字型布局上。用這兩種方法可以很好地解決主體部分優先加載的問題。

1、圣杯布局

基礎布局：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表