隨著時代的進步，各個學校都紛紛開設了自己的官方網站，為學生、老師、家長提供了豐富的校園信息和互聯網服務。其中，CSS模板作為網站樣式的一個重要組成部分，其優化和設計質量直接影響著用戶對于網站的體驗和評價。

/* CSS模板樣式 */
body {
font-family: Arial, sans-serif;
color: #333;
background-color: #f5f5f5;
}
.container {
max-width: 1080px;
margin: 0 auto;
padding: 10px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.logo {
font-size: 24px;
font-weight: bold;
color: #333;
}
.nav {
display: flex;
align-items: center;
}
.nav li {
margin-left: 10px;
list-style: none;
font-size: 14px;
}
.nav a {
text-decoration: none;
color: #333;
}
.main {
display: flex;
flex-wrap: wrap;
}
.article {
width: 65%;
margin-right: 5%;
background-color: #fff;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.aside {
width: 30%;
background-color: #fff;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.footer {
text-align: center;
background-color: #f5f5f5;
padding: 10px;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
.main {
flex-direction: column;
}
.article, .aside {
width: 100%;
margin-right: 0;
margin-bottom: 20px;
}
.nav li {
margin: 10px 0;
}
}

以上是一個簡單的學校網站CSS模板樣式代碼，其中主要包括以下幾個部分：

1.整體布局樣式，使用了flex布局，通過max-width和margin實現中心對齊，并設置了背景色、漸變色等；

2.頭部菜單欄的樣式，使用了flex布局、文本樣式、陰影等；

3.主體內容區的樣式，使用了flex布局、背景色、邊距、邊框陰影等；

4.媒體查詢，根據不同屏幕大小，調整布局樣式，使網站在移動設備上也能正常顯示。

在實際應用中，可以根據自己學校的需求進行定制和調整，以達到更好的效果和用戶體驗。