在網頁設計中，頁面布局是至關重要的一部分。合理的頁面布局可以讓用戶更易于理解頁面內容，優化用戶體驗。而CSS作為前端開發的重要語言之一，能夠實現頁面布局模版的制作。

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.header {
height: 80px;
background-color: #eee;
}
.nav {
height: 50px;
background-color: #ccc;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.card {
width: calc(100% / 3 - 30px);
height: 300px;
margin-bottom: 30px;
background-color: #f0f0f0;
}
.footer {
height: 100px;
background-color: #ddd;
}
@media (max-width: 768px) {
.card {
width: 100%;
}
}

以上CSS代碼實現了一個簡單的頁面布局模版。首先，給頂層容器一個最大寬度，并將其水平居中對齊。然后分別設置頁頭、導航、內容、頁腳四個部分的CSS樣式。

對于其中的內容部分，通過設置display屬性為flex，使其內部的元素能夠自動適應頁面寬度，而flex-wrap和justify-content屬性可以控制元素在多行顯示和控制元素之間的間距。同時，我們利用@media查詢，讓頁面在小屏幕設備上也能夠顯示正確的布局。

通過CSS實現頁面布局模版，為我們的開發工作節省了不少時間和精力。我們可以根據實際需求調整CSS樣式，創造出更加適合用戶習慣的網頁布局。