就是将一些常用的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. Git初始化项目 和 Gitignore

    初始化init: git init git status git add . git commit -am "init projrct" 添加远程仓库: git remote ad ...

  2. asp.netcore 3.0 Docker Nginx(震惊,原来docker是这样的!)

    引言 Docker发布于2013年,Docker是dotCloud公司创始人在法国期间发起的一个公司内部项目,他是dotCloud多年云技术的一个革新.Docker在容器基础上进行了一步的封装,从网络 ...

  3. Spring MVC-从零开始-@RequestMapping结合@PathVariable (从URL路径中取值,作用于函数参数)

    1.可以直接在RequestMapping中value元素中使用{key}描述属性键 2.也可以在{key}中使用正则限定key的取值范围,从而限定url的变化范围 package com.jt; i ...

  4. freemarker模版引擎技术总结

    FreeMarker语言概述 FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写. FreeMarker被设计用来生成HTML Web页面,特别是基于MVC模式 ...

  5. Angular 元素拖拽

    拖动元素到指定区域 拖放的同时传递数据 1. 安装 ng2-drag-drop npm install ng2-drag-drop --save 2. 模板中配置可拖拽元素 // drag.compo ...

  6. 07-简单认识margin

    margin 外边距,表示边框到最近盒子的距离. 对于左右两边 <!DOCTYPE html> <html lang="en"> <head> ...

  7. 实验室工作站jupyterhub安装笔记

    本篇文章为实验室工作站的jupyterhub安装配置笔记,由于软硬件等各种区别,安装过程难免有所区别,仅供大家参考. 实验室新到一台深度学习工作站,原本想装一个juoyter notebook直接开干 ...

  8. B-线性代数-范数

    目录 范数 一.Lp范数 二.L0范数 三.L1范数 四.L2范数 五.L∞范数 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬虫.人工智能教学等着你:ht ...

  9. 【THE LAST TIME】this:call、apply、bind

    前言 The last time, I have learned [THE LAST TIME]一直是我想写的一个系列,旨在厚积薄发,重温前端. 也是给自己的查缺补漏和技术分享. 欢迎大家多多评论指点 ...

  10. Python flask 构建微电影视频网站☝☝☝

    Python flask 构建微电影视频网站☝☝☝ 1.安装数据库连接依赖包 pip install flask-sqlalchemy 2.创建movie数据库 在CentOS虚拟机,进入MaridD ...