CSS模板是一个预定义的样式框架,用于创建和设计网页的外观和布局。它包含了预先定义好的样式规则,例如颜色、字体、布局等,可以应用到HTML元素上。使用CSS模板可以快速构建具有一致外观和感觉的网站。
下面是一个简单的CSS模板示例,展示了如何使用CSS样式设计一个简单的页面布局:
```html
/* 样式规则 */
body {
font-family: Arial, sans-serif; /* 设置字体 */
background-color: #f1f1f1; /* 设置背景颜色 */
}
header {
background-color: #333; /* 设置头部背景颜色 */
color: #fff; /* 设置文本颜色 */
padding: 20px; /* 设置内边距 */
text-align: center; /* 设置文本居中对齐 */
}
nav {
background-color: #ddd; /* 设置导航栏背景颜色 */
padding: 10px; /* 设置内边距 */
}
main {
margin: 20px auto; /* 设置内容区域的边距和居中显示 */
padding: 20px; /* 设置内边距 */
}
footer {
background-color: #333; /* 设置页脚背景颜色 */
color: #fff; /* 设置文本颜色 */
text-align: center; /* 设置文本居中对齐 */
padding: 10px; /* 设置内边距 */
}
```
在这个示例中,我们使用了CSS样式来定义页面的布局和外观。通过为每个HTML元素应用样式规则,我们可以控制元素的颜色、字体、布局等属性。这个简单的模板包含了头部(header)、导航栏(nav)、主要内容区域(main)和页脚(footer)等常见元素。你可以根据自己的需求进行修改和扩展这个模板,以创建更具个性和功能的网站。