在現代網頁開發中，CSS布局模板是非常常用的一種工具。通過使用CSS布局模板，我們可以快速、高效地搭建網站的框架，從而減少重復的工作和時間成本。下面，我們將會介紹一些常見的CSS布局模板。

/* 1. 基本的網頁布局模板 */
.header {
height: 50px;
background-color: #f2f2f2;
}
.content {
width: 960px;
margin: 0 auto;
padding: 20px;
}
.footer {
height: 100px;
background-color: #f2f2f2;
}
/* 2. 兩欄式網頁布局模板 */
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
.main {
width: 70%;
background-color: #f2f2f2;
padding: 20px;
}
.sidebar {
width: 30%;
background-color: #d9d9d9;
padding: 20px;
}
/* 3. 三欄式網頁布局模板 */
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
.main {
width: 50%;
background-color: #f2f2f2;
padding: 20px;
}
.sidebar-1 {
width: 25%;
background-color: #d9d9d9;
padding: 20px;
}
.sidebar-2 {
width: 25%;
background-color: #d9d9d9;
padding: 20px;
}

以上是一些常見的CSS布局模板，其中包括基本的網頁布局、兩欄式網頁布局和三欄式網頁布局。通過使用這些布局模板，我們可以在開發網站時更加輕松地進行設計和排版，提高開發效率，降低開發成本。