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

php中文网
发布: 2016-06-21 09:06:09
原创
1413人浏览过

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

假设,我们的网站主页面除了正文是由导航条,低栏,统计栏构成。也就是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中的模块被替换掉了。

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号