就是将一些常用的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> {% include 'footer.html'%} </body> </html>
header.html
<div class="header"> <ul> <li>index</li> <li>html</li> <li>css</li> <li>python</li> <li>php</li> </ul> </div>
footer.html
<div class="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-left:10px; line-height: 60px; list-style:none; color:#ffffff; font-size: 28px; }
具体效果：
