纯 HTML 网站模板可以使用 HTML、CSS 和 JavaScript 创建,具体可以参考下述示例:
1. 基本的 HTML 模板结构:
```html

网站标题

主要内容

这里是主要内容的文字描述。

另一主要内容

这里是另一主要内容的文字描述。

```
2. 使用 CSS 样式进行布局和美化:
```css
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
color: white;
text-decoration: none;
display: inline-block;
padding: 8px 10px;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
section {
margin-bottom: 20px;
}
h2 {
font-size: 24px;
margin-bottom: 20px;
}
p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
}
footer {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
```
3. 使用 JavaScript 添加交互和动态效果:
```javascript
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
color: white;
text-decoration: none;
display: inline-block;
padding: 8px 10px;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
section {
margin-bottom: 20px;
}
h2 {
font-size: 24px;
margin-bottom: 20px;
}
p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
}
footer {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
// 定义点击事件
document.addEventListener('click', function(event) {
// 在这里添加你需要执行的操作
});
```