Rumah >hujung hadapan web >html tutorial >HTML静态模板的继承_html/css_WEB-ITnose
HTML静态模板的继承_html/css_WEB-ITnose
- WBOYasal
- 2016-06-21 09:06:091260semak imbas
网站模板的设计，一般的，我们做网站有一些通用的部分，比如 导航，底部，访问统计代码等。合理的规划模板往往会减少工作量，同时也使得罗乱、难以阅读的静态页面布局变得优雅。
假设，我们的网站主页面除了正文是由导航条，低栏，统计栏构成。也就是nav.html，bottom.html，tongji.html。
在构建页面的时候，可以写一个base.html来包含（include）这些通用文件，如下：
<!DOCTYPE html><html><head> <title>{% block title %}默认标题{% endblock %}</title></head><body> {% include 'nav.html' %}{% block content %} <div>这里是默认内容，所有继承自这个模板的，如果不覆盖就显示这里的默认内容。</div>{% endblock %}{% include 'bottom.html' %}{% include 'tongji.html' %}</body></html> 在这里，所有的include都是引入通用文件，而block都是定义默认模块，其他继承base.html的页面，都可以在自己的页面中重新定义这些模块，达到覆盖替换的作用。
比如我们设计一个主页面index.html，继承自base.html，同时替换base.html中的title和content两个模块。以下是index.html文件的内容：
{% extends 'base.html' %}{% block title %}欢迎光临首页{% endblock %}{% block content %}{% include 'ad.html' %}这里是首页，欢迎光临{% endblock %}
运行这个页面，你就会发现，原有的base.html中的模块被替换掉了。
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：纯 CSS 实现水平下拉菜单_html/css_WEB-ITnoseArtikel seterusnya：[iOS Animation]-CALayer 变换-固体对象_html/css_WEB-ITnose