base.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset=UTF-8"> <title>{{title}}</title> <style> .header { height: 50px; background-color: fuchsia;; } .content{ height:300px; } .footer{ height:50px; background-color: thistle; } </style> </head> <body> <div class=header">Nav Area</div> <div content"> {% block content %} {% endblock %} </div> <div footer">Foot Area</div> </body> </html>
index.html
{% extends 'base.html'%} {% block content %} <div> <h1>我正在努力学习</h1> </div> {% endblock %}