壹、靜態布局
在傳統的網頁設計中，網頁上所有元素的大小都是px。
1.布局特征
無論瀏覽器的確切大小如何，頁面的布局始終與第壹次編寫代碼時相同。常規的PC站點是靜態布局的，具有最小寬度，因此，如果寬度小於此值，則顯示滾動條，如果寬度大於此值，則顯示內容居中和背景。這種設計在PC上很常見。
2.設計方法
PC:中心布局，所有樣式使用絕對寬度/高度(px)，設計壹個布局，在屏幕的寬度和高度已經調整，使用水平和垂直滾動條檢查覆蓋部分;移動設備:建立壹個單獨的移動網站，設計壹個單獨的布局，並使用壹個不同的域名，如wap。或者m。
優點:這種布局對設計師和CSS作者來說都是最簡單的，並且沒有兼容性問題。
缺點:很明顯妳不能改變用戶的屏幕尺寸。目前，大多數門戶網站、大多數企業PC廣告網站都采用了這種布局。固定像素大小的web頁面是匹配固定像素大小的顯示的最簡單方法。然而，這種方法不是壹種完全兼容的方式來創建未來的web頁面。我們需要壹些方法來適應未知的設備。
二、流式布局
液體版面(也稱為“流體”)的特點是頁面元素的寬度根據屏幕分辨率進行調整，但總體版面不變。代表性圍欄系統(網格系統)。例如，將主網頁正文的寬度設置為80最小寬度設置為960px。圖像也被類似地處理(寬度：100%，最大寬度通常設置為圖像本身的大小，以防止由於拉伸而失真)。