CSS（Cascading Style Sheets，層疊樣式表）是一種用于網(wǎng)頁(yè)樣式設(shè)計(jì)的語(yǔ)言，是對(duì) HTML 文檔的補(bǔ)充。使用 CSS 可以對(duì)網(wǎng)頁(yè)中的各個(gè)元素進(jìn)行樣式、布局、動(dòng)畫、交互等方面的設(shè)計(jì)。而母版頁(yè)（或稱為模板頁(yè)）則是用于統(tǒng)一網(wǎng)站頁(yè)面風(fēng)格的一種設(shè)計(jì)方式，通常會(huì)包含網(wǎng)站的公共元素，如頁(yè)眉、頁(yè)腳、導(dǎo)航等。

母版頁(yè)布局的設(shè)計(jì)通常需要用到 CSS，以下是幾種常用的布局方式：

/* 全屏布局 */
body {
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: #333;
}
.content {
height: calc(100vh - 200px);
/* 減去 header 和 footer 的高度 */
}
.footer {
height: 100px;
background-color: #333;
}
/* 兩欄布局 */
.container {
display: flex; /* flex 布局 */
}
.left {
flex-basis: 200px; /* 左側(cè)欄寬度，可固定或自適應(yīng) */
}
.right {
flex: 1; /* 右側(cè)欄占據(jù)剩余空間 */
}
/* 三欄布局 */
.container {
display: grid; /* grid 布局 */
grid-template-columns: 200px 1fr 200px; /* 分別為左、中、右欄寬度，1fr 表示占據(jù)剩余空間 */
}
/* 響應(yīng)式布局 */
@media (max-width: 768px) {
/* 在屏幕寬度小于 768px 時(shí)應(yīng)用以下樣式 */
.container {
flex-direction: column; /* 切換為縱向布局 */
}
.left {
order: 3; /* 將左側(cè)欄排在最后 */
}
}

以上是一些基本的母版頁(yè)布局方式，通過 CSS 屬性的組合和變化可以實(shí)現(xiàn)更多復(fù)雜的布局效果，如網(wǎng)格布局、多列排版、浮動(dòng)布局等。在使用 CSS 進(jìn)行母版頁(yè)布局時(shí)，需要注意統(tǒng)一網(wǎng)站風(fēng)格，保證各個(gè)頁(yè)面具有一致的樣式，同時(shí)盡量做到頁(yè)面簡(jiǎn)潔清晰并符合用戶習(xí)慣。