就是将一些常用的html代码分离出来，使其可以重复利用，减少代码量

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>{{title}}</title>

    <link rel="stylesheet" href={% static 'css/index.css' %}>

</head>

<body>

    {% include 'header.html'%}

    <div class="content">

        <h1>这是主界面</h1>

        <!--{% block content %}-->

        <!--{% endblock %}-->

    </div>

    {% include 'footer.html'%}

</body>

</html>

header.html

<div class="header">

    <ul>

        <li>index</li>

        <li>html</li>

        <li>css</li>

        <li>python</li>

        <li>php</li>

    </ul>

</div>

footer.html

<div class="footer">

    <ul>

        <li>index</li>

        <li>html</li>

        <li>css</li>

        <li>python</li>

        <li>php</li>

    </ul>

</div>

index.css

.header {

    height: 68px;

    background-color: fuchsia;;

}

.header li{

    float:left;

    display: inline;

    margin-left:10px;

    line-height: 60px;

    list-style:none;

    color:#ffffff;

    font-size: 28px;

}

.content{

    height:300px;

}

.footer{

    height:50px;

    background-color: thistle;

}

.footer li{

    float:left;

    display: inline;

    margin-left:10px;

    line-height: 60px;

    list-style:none;

    color:#ffffff;

    font-size: 28px;

}

具体效果：

django-模板之include标签（十五）的更多相关文章

  1. Django 模板中 include 标签使用小结

    include 标签允许在模板中包含其它的模板的内容. 标签的参数是所要包含的模板名称,可以是一个变量,也可以是用单/双引号硬编码的字符串. 每当在多个模板中出现相同的代码时,就应该考虑是否要使用 { ...

  2. django学习-7.html模板中include标签使用场景

    1.前言 假设一个公司A有一个网站B,且网站B有5个不同的页面分别为C1,C2,C3,C4,C5. 那么,我们在打开这5个不同页面后去查看页面的整体内容,会发现每个页面的顶部内容.底部内容都一模一样. ...

  3. 测试开发之Django——No6.Django模板中的标签语言

    模板中的标签语言 1.if/else {% if  %} 标签检查(evaluate)一个变量,如果这个变量为真(即:变量存在,非空,不是布尔值假),系统会显示在{% if  %} 和 {% endi ...

  4. Django模板语言，标签整理

    Django模板语言 标签 内置标签引用 1. autoescape 控制自动转义是否可用. 这种标签带有任何 on 或 off 作为参数的话,他将决定转义块内效果. 该标签会以一个endautoes ...

  5. django模板--条件控制标签

    条件控制标签 在django模板中可以通过条件控制标签进行逻辑控制,条件控制标签的语法如下: {% if condition1 %} ... {% elif condition2 %} ... {% ...

  6. c++11-17 模板核心知识（十五）—— 解析模板之依赖型类型名称与typename Dependent Names of Types

    模板名称的问题及解决 typename规则 C++20 typename 上篇文章c++11-17 模板核心知识(十四)-- 解析模板之依赖型模板名称 Dependent Names of Templ ...

  7. 【Flask模板】include标签

    # include标签:1. 这个标签相当于是直接将指定的模版中的代码复制粘贴到当前位置.2. `include`标签,如果想要使用父模版中的变量,直接用就可以了,不需要使用`with context ...

  8. Django模板中include的标签的使用

    在很多网站中,基本上的都会有一个开头和一个结尾,在每一个网页中都会显示.相对于这种的来说,在Django中,最好的方法就是使用include的标签,在每一个模板中都加入这个开头和结尾的标签. 官方文档 ...

  9. Django 模板继承extend 标签include block

    # block 站网页位置# includ 导入网页标签# extends 导入网页模板 # common_js.html <script src="/static/plugins/j ...

  10. django模板 内建标签

    autoescape 控制当前自动转义的行为,有on和off两个选项 {% autoescape on %} {{ body }} {% endautoescape %} block 定义一个子模板可 ...

随机推荐

  1. python库之turtle（图形绘制） 开启新的快乐源泉

    相信有不少人学习python 都是听了老前辈的推荐 “学python好,python有趣的代码多” 比如说画一只小狮子 这就是今天想要介绍的绘制图形库-turtle 如果也想这样画一只小狮子,或者其他 ...

  2. Spring boot 梳理 - @SpringBootConfiguration

    @SpringBootConfiguration继承自@Configuration,二者功能也一致,标注当前类是配置类, 并会将当前类内声明的一个或多个以@Bean注解标记的方法的实例纳入到sprin ...

  3. Hadoop点滴-Hadoop分布式文件系统

    Hadoop自带HDFS,即 Hadoop Distributed FileSystem(不是HaDoop  FileSystem 的简称) 适用范围 超大文件:最新的容量达到PB级 流式数据访问:H ...

  4. 1.html基础知识

    1.html定义: html是一种超文本标记语言,“超文本”是指页面可以包含图片.链接.音乐.程序等非文字元素. Html不是一种编程语言. 2.html5的新特性: 用于绘画的canvas元素: 用 ...

  5. mybatis-dynamic-query 3.0 更新

    项目地址: mybatis-dynamic-query 前言 在 2.0 完成对 tk.mapper 集成,为何 mybatis-dynamic-query 选择 tk.mapper 集成, 再 3. ...

  6. Stanford公开课《编译原理》学习笔记（2）递归下降法

    目录 一. Parse阶段 CFG Recursive Descent(递归下降遍历) 二. 递归下降遍历 2.1 预备知识 2.2 多行语句的处理思路 2.3 简易的文法定义 2.4 文法产生式的代 ...

  7. 如何增强VR的vection/self-motion？

    上一节讲到了vection是给玩家带来“移动感”的因素,它提供良好VR体验的关键之一.那么VR中我们一般用哪些方式来提供vection呢?1 首先来简单了解一下人体和空间相关的感知机制. 视觉线索 v ...

  8. 判断日期是否为法定节假日的API接口与示例函数

    需要判定某日期是否为法定节假日,由于国家的节假日每年都在变动,所以使用接口判定是必要的.可惜的是,这样的接口并不多,在此汇总三个: http://tool.bitefu.net/jiari/ http ...

  9. MySQL中日期和时间戳互相转换的函数和方法

     时间戳转换成日期 复制代码代码如下: FROM_UNIXTIME 例如: 数据表中 invest_time 存储的是时间戳,如 1429063399 使用 FROM_UNIXTIME 可以把时间戳转 ...

  10. 你应该知道的简单易用的CSS技巧

    作为前端,在工作中难免会遇到关于排版的问题,以下是我整理的一些关于CSS的技巧,希望对你能有帮助. 1.每个单词的首字母大写 一般我们会用JS实现,其实CSS就可以实现. JS代码: var str ...