代码
# -*- codeing = utf-8 -*-
# @Time : 2021/8/23 14:09
# @Author : 二帆
# @File : app1.py
# @Software : PyCharm
from flask import Flask,render_template
import settings
app = Flask(__name__)
app.config.from_object(settings)
@app.route('/base')
def load_base():
return render_template('base.html')
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
#index.html
{% extends 'base.html' %}
{% block title %}
首页
{% endblock %}
{% block mycss %}
<style>
#middle {
background-color: cornflowerblue;
color: red;
font-weight: bold;
}
.div1{
width: 33%;
float: left;
border: 1px solid red;
height: 500px;
}
</style>
{# /static/<filename> 静态加载 样式#}
<link rel="stylesheet" href={{ url_for('static',filename='css/style.css') }}></link>
{% endblock %}
{% block myjs %}
<script>
btn = document.getElementById('btn')
btn.onclick=function(){
alert('别点我!')
}
</script>
{% endblock %}
{% block middle %}
<div class='div1' id="d1"> 我是d1</div>
<div class='div1'></div>
<div class='div1'></div>
<img src="{{ url_for('static',filename='images/e0c20f59-96f1-46dc-9527-e937c16a14e8.jpg') }}" alt="">
{% endblock %}
#style.css
#d1{
background-color: chartreuse;
}
#index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}父模板的title{% endblock %}</title>
<style>
#head{
height:50px;
background-color: bisque;
}
#head ul{
list-style: none;
}
#head ul li{
float: left;
width:100px;
text-align: center;
font-size:18px;
height:50px;
line-height: 50px;
}
#middle{
height: 600px;
}
#foot{
height: 50px;
line-height: 50px;
background-color: darkcyan;
}
</style>
{% block mycss %}{% endblock %}
</head>
<body>
<div id="head">
<ul>
<li>首页</li>
<li>秒杀</li>
<li>超市</li>
<li>会员</li>
<li>图书</li>
</ul>
</div>
<div id="middle">
{% block middle%}
<button id="btn">我是中间部分</button>
{% endblock %}
</div>
<div id="foot">
我是底部
</div>
{% block myjs %}
{% endblock %}
</body>
</html>
展示