html頁面模板布局內容的繼承，block
阿新 • • 發佈：2018-08-01
ext 布局 height center title pre add 100% ndb
base.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .nav{ text-align: center; line-height: 40px; width: 100%; background-color: #2459a2; color: white; font-size: 20px; } .left{ width: 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{ width: 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 %}塊級結束標誌
html頁面模板布局內容的繼承，block