CSS頁面布局是網頁設計中一個十分重要的部分，可以實現不同的頁面布局風格。本文我們將舉例說明幾個常見的CSS頁面布局實例代碼。

.header {
background-color: #FFFFFF;
height: 100px;
width: 100%;
}
.content {
background-color: #F8F8F8;
height: 500px;
width: 100%;
}
.sidebar {
background-color: #EFEFEF;
height: 500px;
width: 30%;
float: left;
}
.main {
background-color: #FFFFFF;
height: 500px;
width: 70%;
float: right;
}

如上所示，這是一個簡單的頁面布局。其中，頁面頭部的白色區域由.header實現。在.header樣式中，我們設定了背景顏色為白色，高度為100px，寬度為100%。這樣就可以將.header鋪滿整個頁面寬度，并且高度為100px。

接下來，我們可以繼續設置內容區域，即.content。在.content樣式中，我們將背景顏色設置為#F8F8F8，這樣可以與.header的白色背景形成對比。同樣地，我們也設定了高度和寬度，但是這里的高度應該比.header更高，因為.content中包含著其他兩個div元素，即.sidebar和.main。

在.sidebar和.main樣式中，我們分別設定了背景顏色，高度和寬度，并采用了float屬性對它們進行了定位。這樣，.sidebar會靠左浮動，.main會靠右浮動，同時他們會處在同一水平線上，因為他們具有相同的高度。這也是為什么.content的高度應該比.header更高的原因。

通過這樣的設置，我們就完成了一個簡單的頁面布局。在實際的網頁開發中，我們可以在這個基礎上進行各種具體的樣式調整，實現更多復雜的布局效果。