就是将一些常用的HTML代码分离出来，使其可以重复利用，减少代码量
index.html
<!DOCTYPE html> <html lang="en"> <head> <Meta charset=UTF-8"> <title>{{title}}</title> <link rel=stylesheet" href={% static 'css/index.css' %}> </head> <body> {% include header.html'%} <div class=content"> <h1>这是主界面</h1> <!--{% block content %}--> <!--{% endblock %}--> </div>footer.html} </body> </html>
header.html
<div header"> <ul> <li>index</li> <li>html</li> <li>css</li> <li>python</li> <li>PHP</li> </ul> </div>
footer.html
<div footer"> <ul> <li>index</li> <li>html</li> <li>css</li> <li>python</li> <li>PHP</li> </ul> </div>
index.css
.header { height: 68px; background-color: fuchsia;; } .header li{ float:left; display: inline; margin-left:10px; line-height: 60px; list-style:none; color:#ffffff; font-size: 28px; } .content{ height:300px; } .footer{ height:50px; background-color: thistle; } .footer li{ float:left; display: inline; margin-size: 28px; }
具体效果：
