CSS頁面布局制作是網站開發中至關重要的一部分。網站的布局可以決定用戶對網站的第一印象，因此我們需要考慮如何有效地制作網站布局。

在使用CSS制作布局時，我們可以使用各種布局方式，比如流體布局、響應式布局、固定布局等。其中，流體布局可以根據瀏覽器的大小自動調整頁面布局，響應式布局則可以在不同設備上展現不同布局，固定布局則是在固定大小的屏幕上展現固定布局。

/* 流體布局實現 */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.header {
height: 80px;
}
.sidebar {
width: 25%;
float: left;
}
.content {
width: 70%;
float: left;
}
.footer {
clear: both;
height: 100px;
}
/* 響應式布局實現 */
@media screen and (max-width: 768px) {
.sidebar {
width: 100%;
float: none;
margin-bottom: 20px;
}
.content {
width: 100%;
float: none;
}
}
/* 固定布局實現 */
.container {
width: 1200px;
margin: 0 auto;
}
.header {
height: 80px;
}
.sidebar {
width: 250px;
float: left;
}
.content {
width: 950px;
float: left;
}
.footer {
clear: both;
height: 100px;
}

以上代碼是三種布局方式的實現代碼。我們可以根據實際情況選擇合適的布局方式來制作網站布局。需要注意的是，合理的布局應該充分考慮到用戶體驗，并適合不同的設備和瀏覽器。