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>
    
  • 相关阅读:
    oracle函数查询数据字典
    股票市场不是年轻人应该去的地方
    惊蟄
    大学问
    教条示龙场诸生
    生成器表达式
    三次锁定(文件加强版)
    文件的增删改查
    Python试题(1)
    Python入门(1)
  • 原文地址:https://www.cnblogs.com/yangsun/p/11914986.html
Copyright © 2011-2022 走看看