CSS是前端開發必不可少的一部分，它可以幫助我們控制網頁的樣式和布局。關于頁面布局，我們可以使用CSS來實現多種不同的方式。下面是一個使用CSS寫的頁面布局的源碼：

/* 設置網頁主體部分的寬度和居中顯示 */
body {
width: 960px;
margin: 0 auto;
}
/* 設置網頁的頭部布局 */
#header {
background-color: #333;
height: 50px;
color: #fff;
text-align: center;
line-height: 50px;
}
/* 設置網頁的導航欄布局 */
#nav {
background-color: #ccc;
height: 40px;
line-height: 40px;
text-align: center;
}
/* 設置網頁的主體內容部分的布局 */
#main {
width: 640px;
float: left;
}
/* 設置網頁的側邊欄的布局 */
#sidebar {
width: 260px;
float: right;
}
/* 設置網頁的底部布局 */
#footer {
background-color: #333;
height: 50px;
color: #fff;
text-align: center;
line-height: 50px;
}
/* 清空浮動的樣式 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
clear: both;
}

以上CSS代碼實現了一個基礎的頁面布局，包括了頭部、導航欄、主體內容、側邊欄和底部五個部分。其中，主體內容部分使用了浮動布局的方法，側邊欄使用了“float”的屬性，以實現內容和側邊欄的并排顯示效果。同時，我們還為頁面添加了清空浮動的CSS樣式，以保證頁面的效果更加穩定和美觀。