div布局模版 有子页母页
时间: 2023-07-09 10:44:56 浏览: 47
当我们需要创建一个网站时,通常会有许多不同的页面。在这种情况下,我们可以使用一个母版页来定义网站的整体布局和样式,并在子页面中填充具体的内容。以下是一个包含母版页和子页面的 div 布局模板:
母版页 (master.html):
```html
<!DOCTYPE html>
<html>
<head>
<title>网站标题</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
min-height: 500px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>网站标题</h1>
</header>
<main>
<!-- 子页面内容将在这里填充 -->
{% block content %}
{% endblock %}
</main>
<footer>
<p>版权所有 © 2021 网站名称</p>
</footer>
</body>
</html>
```
子页面 (index.html):
```html
{% extends "master.html" %}
{% block content %}
<h2>欢迎来到网站!</h2>
<p>这是网站的首页。</p>
{% endblock %}
```
在子页面中,我们使用了模板继承来扩展母版页,然后在 `content` 块中填充了具体的内容。你可以创建多个子页面来扩展母版页,每个子页面都可以填充不同的内容。