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>
    
  • 相关阅读:
    c# winfrom 查看网络图片
    C# winfrom 读取txt文本内容
    c# winfrom 下载网页源代码
    c# winfrom 下载网络资源
    c# 换行符
    内存映射问题
    APUE 书中 toll 函数
    [P3387] 【模板】缩点
    [P5960] 【模板】差分约束算法
    [CF1442C] Graph Transpositions
  • 原文地址:https://www.cnblogs.com/yangsun/p/11914986.html
Copyright © 2011-2022 走看看