zoukankan      html  css  js  c++  java
  • (二)Django模板的应用

    一、配置项目的基础模板,分三部分

    base.html 基础部分,需要包括基本的HTML标签

    • header部分
    • body部分
    • html闭合标签
    {% load staticfiles %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/example.css' %}">
        <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/normalize.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/style.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/theme.css' %}">
    </head>
    <body>
        {% include "header.html" %}
    <div>
        {% block content %}{% endblock %}
    </div>
        {% include "footer.html" %}
        <script src="{% static 'js/bootstrap.min.js' %}"></script>
        <script src="{% static 'js/jquery-3.3.1.slim.min.js' %}"></script>
        <script src="{% static 'js/popper.min.js' %}"></script>
    </body>
    </html>
    {% block style %}
    {% endblock %}
    

    header.html 头部部分,仅负责头部模板

    {% load staticfiles %}
    <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
      <!-- TO DO -->
    </header>
    

    footer.html 尾部部分,仅负责尾部模板

    {% load staticfiles %}
    <footer class="footer position">
      <div class="container">
        <div class="row footer-top">
          <div class="col-md-6 col-lg-6">
            <p>这是我的第一个博客</p>
          </div>
        </div>
        <hr/>
      </div>
    </footer>
    <style>
        .position {position:absolute;bottom:0; 100%/*footer的高度*/}
    </style>
    
  • 相关阅读:
    实习第一周小记------生活不易
    第一次实习面试感受----苦逼程序员生活初体验
    第一次实习面试感受----苦逼程序员生活初体验 分类: 程序人生 2013-07-28 14:13 2395人阅读 评论(0) 收藏
    Java-基于JDK的动态代理
    JS字符串去替换元素再转换成数组
    byte溢出栗子
    Java链式写法
    Scala笔记
    Java反射使用方法
    Java数组3种创建方式
  • 原文地址:https://www.cnblogs.com/yangsun/p/11914986.html
Copyright © 2011-2022 走看看