- 新页面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>
- user.html继承base.html。
重写title,head,main块.
将上述<ul>放在main块中.
定义新的块user。
- 让上次作业完成的个人中心页面，继承user.html，原个人中心就自动有了标签页导航。
- 制作个人中心的三个子页面，重写user.html中定义的user块。
- 思考 如何实现点标签页导航到达不同的个人中心子页面
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 %}
