一、靜態布局

在傳統的網頁設計中，網頁上所有元素的大小都是px。

1. 布局特征

無論瀏覽器的確切大小如何，頁面的布局始終與第一次編寫代碼時相同。常規的PC站點是靜態布局的，具有最小寬度，因此，如果寬度小于此值，則顯示滾動條，如果寬度大于此值，則顯示內容居中和背景。這種設計在PC上很常見。

2. 設計方法

PC:中心布局，所有樣式使用絕對寬度/高度(px)，設計一個布局，在屏幕的寬度和高度已經調整，使用水平和垂直滾動條檢查覆蓋部分;移動設備:建立一個單獨的移動網站，設計一個單獨的布局，并使用一個不同的域名，如wap。或者m。

優點:這種布局對設計師和CSS作者來說都是最簡單的，并且沒有兼容性問題。

缺點:很明顯你不能改變用戶的屏幕尺寸。目前，大多數門戶網站、大多數企業PC廣告網站都采用了這種布局。固定像素大小的web頁面是匹配固定像素大小的顯示的最簡單方法。然而，這種方法不是一種完全兼容的方式來創建未來的web頁面。我們需要一些方法來適應未知的設備。

二、流式布局

液體版面(也稱為“流體”)的特點是頁面元素的寬度根據屏幕分辨率進行調整，但總體版面不變。代表性圍欄系統(網格系統)。例如，將主網頁正文的寬度設置為80最小寬度設置為960px。圖像也被類似地處理(寬度：100%，最大寬度通常設置為圖像本身的大小，以防止由于拉伸而失真)。