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 %}块级结束标志
  • 相关阅读:
    pthread 的 api 分类
    移动端网页实现拨打电话功能的几种方法
    阿里云ECS服务器活动99元一年,最高可买三年
    jQuery 文档操作
    [Err] 1062
    中国标准城市区域码
    json和jsonp的使用区别
    xshell评估过期解决办法
    xshell评估期已过怎么办
    git之本地仓库关联远程仓库
  • 原文地址:https://www.cnblogs.com/wfl9310/p/9402451.html
Copyright © 2011-2022 走看看