无JS的HTML+CSS3模板
时间: 2023-09-09 14:07:15 浏览: 54
以下是一个简单的HTML+CSS3模板,没有使用JavaScript:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无JS的HTML+CSS3模板</title>
<style>
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 页面布局 */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
main {
width: 80%;
margin: 2rem auto;
}
h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
p {
margin-bottom: 1rem;
}
/* 响应式设计 */
@media (max-width: 768px) {
main {
width: 90%;
}
}
</style>
</head>
<body>
<header>
<h1>无JS的HTML+CSS3模板</h1>
</header>
<main>
<p>这是一个简单的HTML+CSS3模板,没有使用JavaScript。</p>
<p>您可以在此基础上添加自己的内容和样式,进行二次开发。</p>
</main>
</body>
</html>
```
此模板包含一个简单的页面布局,一个响应式设计,以及一些基本的样式规则。可以根据需要进行修改和扩展。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)