CSS母版頁布局是非常常見的網頁布局方式之一，它可以實現頁面整體風格的統一，也讓網頁的結構更加清晰。母版頁布局的實現需要用到CSS中的偽類和選擇器，下面我們來看一下示例代碼。

header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
nav {
position: fixed;
top: 60px;
left: 0;
width: 200px;
bottom: 0;
background-color: #ccc;
}
.main-content {
margin-top: 60px;
margin-left: 200px;
padding: 20px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #ccc;
}
@media screen and (max-width: 600px) {
nav {
display: none;
}
.main-content {
margin: 20px;
}
}

在這份代碼中，我們使用了position屬性來設置元素的定位方式，fixed表示固定定位，這樣可以讓元素相對于瀏覽器窗口的位置固定不變。通過top、left、bottom、right屬性的設置，我們可以實現元素在頁面中的位置。

母版頁布局的核心在于設置header、nav、main-content和footer等元素的位置和大小。其中，header元素設置為固定定位，占據整個瀏覽器窗口的頂部位置；nav元素同樣設置為固定定位，占據左側200px的寬度，且距離header元素60px的位置；main-content元素通過設置margin和padding來實現距離頂部60px、左側200px的位置；footer元素則設置在瀏覽器窗口底部，高度為60px。

最后，我們使用@media查詢來設置視口寬度小于600px時，隱藏nav元素并調整main-content元素的位置和大小。這樣就可以讓頁面在不同設備上實現適配了。