Heim > Web-Frontend > HTML-Tutorial > HTML静态模板的继承_html/css_WEB-ITnose

HTML静态模板的继承_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:06:09
Original
1252 Leute haben es durchsucht

网站模板的设计,一般的,我们做网站有一些通用的部分,比如 导航,底部,访问统计代码等。合理的规划模板往往会减少工作量,同时也使得罗乱、难以阅读的静态页面布局变得优雅。

假设,我们的网站主页面除了正文是由导航条,低栏,统计栏构成。也就是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>
Nach dem Login kopieren

在这里,所有的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 %}
Nach dem Login kopieren


运行这个页面,你就会发现,原有的base.html中的模块被替换掉了。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage