zoukankan      html  css  js  c++  java
  • html页面模板布局内容的继承,block

    base.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .nav{
                text-align: center;
                line-height: 40px;
                 100%;
                background-color: #2459a2;
                color: white;
                font-size: 20px;
            }
            .left{
                 20%;
                min-height: 600px;
                overflow: auto;
                background-color: lightgray;
            }
            .manage{
                text-align: center;
                padding: 20px 0px;<!-- 上下20,左右 -->
                margin: 20px 0;
                font-size: 20px;
            }
            a{
                text-decoration: none;
            }
            .content{
                 70px;
                min-height: 600px;
            }
            .left,.content{
                float: left;
            }
            h1{
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div class="outer">
        <div class="nav">标题</div>
    
        <div class="left">
            <div class="student manage"><a href="student.html">学生管理</a></div>
            <div class="teacher manage"><a href="">教师管理</a></div>
            <div class="course manage"><a href="">课程管理</a></div>
            <div class="classes manage"><a href="">班级管理</a></div>
        </div>
        <div class="content">

    {% block content %}加了一个快,和结束标志 <h1>welcome</h1> {% endblock %}
    </div> </div> </body> </html>

    student.html

    {% extends "base.html" %}引用
    {% block content %}块级
    
        {% for student in student_list %}
                <h2>学生:{{ student }}</h2>
                {% endfor %}
    
    {% endblock %}块级结束标志
  • 相关阅读:
    zabbix-agent报错记录
    远程执行命令恢复
    触发器例子
    自定义监控项
    监控项更新间隔
    python paramiko登陆设备
    python爬取某站磁力链
    python网络编程
    并发爬取网站图片
    Pandas Series和DataFrame的基本概念
  • 原文地址:https://www.cnblogs.com/wfl9310/p/9402451.html
Copyright © 2011-2022 走看看