以下是一个简单的网站 CSS 模板,你可以根据自己的需要进行修改和定制:
```
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
nav {
background-color: #fff;
display: flex;
justify-content: space-between;
padding: 10px;
}
nav a {
color: #333;
text-decoration: none;
}
nav a:hover {
background-color: #007bff;
}
main {
background-color: #fff;
display: flex;
flex-wrap: wrap;
}
main section {
padding: 20px;
background-color: #f2f2f2;
border-radius: 5px;
}
main section h1 {
font-size: 36px;
margin-bottom: 20px;
}
main section p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 30px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
```
这个模板使用了 Flexbox 布局,让网站的各个部分都能自适应浏览器宽度,同时保持高度的一致性。页面的背景色、标题、导航栏、子页面的边框和背景色都是使用 CSS 的 Flexbox 布局实现的。
你可以根据自己的需要进行修改和添加样式,例如修改背景色、字体、段落间距等。