網頁布局在前端開發中占據著重要的地位，能夠直接影響用戶體驗和網站效果。為了方便開發人員更好地組織和管理網頁布局，CSS模板應運而生。下面是一個簡單的CSS布局模板示例：

.container {
width: 960px;
margin: 0 auto;
}
.header {
height: 80px;
background-color: #333;
}
.nav {
height: 50px;
background-color: #999;
display: flex;
justify-content: center;
align-items: center;
}
.main {
width: 700px;
height: 400px;
background-color: #fff;
float: left;
}
.sidebar {
width: 200px;
height: 400px;
background-color: #ccc;
float: left;
}
.footer {
height: 100px;
background-color: #333;
clear: both;
}

此模板包括主要的網頁布局，包括頭部、導航、主內容（包括主要內容和側邊欄）、底部。其中，.container類是包含整個頁面的容器，設置了960像素的寬度和居中的位置，使整個頁面在不同大小的設備上都可以呈現出較好的效果。.header類和.footer類分別對于頭部和底部進行樣式設置，包括高度和背景顏色。.nav類則對導航進行設置，使用了flex布局，并設置了水平和垂直居中。.main類和.sidebar類則分別設置了主要內容區和側邊欄的寬度、高度和背景顏色，并通過float屬性使它們在同一行上排列。同時，.footer類也設置了clear屬性以清除float的影響。