个人中心标签页导航

1. 新页面user.html,用<ul ><li role="presentation"> 实现标签页导航。
   <ul class="nav nav-tabs">
     <li role="presentation"><a href="#">Home</a></li>
     <li role="presentation"><a href="#">Profile</a></li>
     <li role="presentation"><a href="#">Messages</a></li>
   </ul>
   
   
2. user.html继承base.html。
   重写title,head,main块.
   将上述<ul>放在main块中.
   定义新的块user。
   
   
3. 让上次作业完成的个人中心页面，继承user.html，原个人中心就自动有了标签页导航。
   
   
4. 制作个人中心的三个子页面，重写user.html中定义的user块。
   
   
5. 思考 如何实现点标签页导航到达不同的个人中心子页面

 1 {% extends 'user.html' %}
 2 
 3 {% block user %}
 4 
 5     <div class="page-header">
 6         <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}<br>
 7             <small>全部问答 <span class="badge"></span></small>
 8         </h3>
 9         <ul class="list-group" style="...">
10             {% for foo in questions %}
11                 <li class="list-group-item">
12                     <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
13                     <a href="#">{{ foo.author.username }}</a>
14                     <span class="badge">{{ foo.creat_time }}</span>
15                     <p style="...">{{ foo.detail }}</p>
16                 </li>
17             {% endfor %}
18         </ul>
19     </div>
20 
21     <div class="page-header">
22         <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ user }}<br>
23             <small>全部评论 <span class="badge"></span></small>
24         </h3>
25         <ul class="list-group" style="...">
26             {% for foo in user.comments %}
27                 <li class="list-group-item">
28                     <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
29                     <a href="#">{{ foo.author.username }}</a>
30                     <span class="badge">{{ foo.creat_time }}</span>
31                     <p style="...">{{ foo.detail }}</p>
32                 </li>
33             {% endfor %}
34         </ul>
35     </div>
36 
37     <div class="page-header">
38         <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ user }}<br>
39             <small>个人信息 <span class="badge"></span></small>
40         </h3>
41         <ul class="list-group" style="...">
42             <li class="list-group-item">用户：{{ username }}</li>
43             <li class="list-group-item">编号：</li>
44             <li class="list-group-item">昵称：</li>
45         </ul>
46     </div>
47 
48 {% endblock %}

 1 {% extends "daohang.html" %}
 2 {% block title %}个人中心{% endblock %}
 3 {% block head %}
 4     <meta charset="UTF-8">
 5     <style>
 6         .nav_ul li {
 7             list-style: none;
 8             float: left;
 9             margin: 10px;
10         }
11     </style>
12 {% endblock %}
13 
14 {% block main %}
15     <ul class="nav_ul">
16     <li role="presentation"><a href="#">全部问答</a></li>
17     <li role="presentation"><a href="#">全部评论</a></li>
18     <li role="presentation"><a href="#">个人资料</a></li>
19 </ul>
20 
21     {% block user %}{% endblock %}
22 
23 {% endblock %}