在網頁設計中，css模板是頁面框架中不可或缺的一部分。css模板可以讓我們非常方便地對頁面元素進行樣式控制，實現豐富的視覺效果和用戶交互體驗。

/* css模板實例 */
/* 頁面基礎元素樣式 */
body {
font-size: 16px;
line-height: 1.5;
background-color: #fff;
color: #333;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
}
a {
color: #0077cc;
text-decoration: none;
}
/* 布局樣式 */
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.row {
display: flex;
flex-wrap: wrap;
margin: -10px;
}
.col {
flex: 1;
margin: 10px;
}
/* 按鈕樣式 */
.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
background-color: #0077cc;
color: #fff;
text-align: center;
}
.btn:hover {
background-color: #0099ff;
}
/* 表單樣式 */
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-control {
display: block;
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form-control:focus {
outline: none;
border-color: #0077cc;
box-shadow: 0px 0px 5px rgba(0, 119, 204, 0.5);
}
.form-control.error {
border-color: #ff0000;
}
.form-control.error:focus {
box-shadow: 0px 0px 5px rgba(255, 0, 0, 0.5);
}

這是一個簡單的css模板實例，包含頁面基礎元素樣式、布局樣式、按鈕樣式和表單樣式等，可以根據需要進行修改和擴展。使用css模板可以大大提高開發效率和頁面質量，是網頁設計中的必備工具。