个人中心标签页导航
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>
<ul class="zx"> <li role="presentation"><a href="#">question</a></li> <li role="presentation"><a href="#">comments</a></li> <li role="presentation"><a href="#">infomation</a></li> </ul>
2、user.html继承base.html。
重写title,head,main块.
将上述<ul>放在main块中.
定义新的块user。
<!DOCTYPE html>
<html lang="en">
<head>
{% extends 'test1.html' %}
<meta charset="UTF-8">
{% block title %}
个人中心
{% endblock %}
{% block head %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/user.css') }}" charset="utf-8"/>
{% endblock %}
</head>
<body>
{% block body %}
<ul class="zx">
<li role="presentation"><a href="#">question</a></li>
<li role="presentation"><a href="#">comments</a></li>
<li role="presentation"><a href="#">infomation</a></li>
</ul>
{% block user %}
{% endblock %}
{% endblock %}
</body>
</html>
3、让上次作业完成的个人中心页面，继承user.html，原个人中心就自动有了标签页导航。
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title> {% block title %} 用户中心 {% endblock %} </title> {% block head %} {% endblock %} </head> <body> {% block user %} <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="page-header"> <h3>{{ username }}><br> <small>全部问答 <span class="badge"></span></small> </h3> <ul> {% for foo in question %} <li> <a href="#">{{ foo.username }}</a> <span class="badge">{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> {% endfor %} </ul> </div> </div> </div> <h3>{{ username }}><br> <small>全部评论 <span class="badge"></span></small> </h3> {% for foo in comments %} <ul style="padding-left: 0px;margin-bottom: 0px;"> <li style="width: 800px"> <a href="">{{ foo.author.username }}</a> <span class="badge">{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> {% endfor %} </ul> </div> <div> <h3>{{ user }}<br> <small>个人信息</small> </h3> <ul style="padding-left: 0px;margin-bottom: 0px;"> <li>用户：</li> <li>编号：</li> <li>昵称：</li> </ul> </div> {% endblock %} </body> </html>
4、制作个人中心的三个子页面，重写user.html中定义的user块。
5、思考 如何实现点标签页导航到达不同的个人中心子页面
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title> {% block title %} 用户中心 {% endblock %} </title> {% block head %} {% endblock %} </head> <body> {% block user %} <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="page-header"> <h3>{{ username }}><br> <small>全部问答 <span class="badge"></span></small> </h3> <ul> {% for foo in question %} <li> <a href="#">{{ foo.username }}</a> <span class="badge">{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> {% endfor %} </ul> </div> </div> </div> <h3>{{ username }}><br> <small>全部评论 <span class="badge"></span></small> </h3> {% for foo in comments %} <ul style="padding-left: 0px;margin-bottom: 0px;"> <li style="width: 800px"> <a href="">{{ foo.author.username }}</a> <span class="badge">{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> {% endfor %} </ul> </div> <div> <h3>{{ user }}<br> <small>个人信息</small> </h3> <ul style="padding-left: 0px;margin-bottom: 0px;"> <li>用户：</li> <li>编号：</li> <li>昵称：</li> </ul> </div> {% endblock %} </body> </html>
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title> {% block title %} 用户中心 {% endblock %} </title> {% block head %} {% endblock %} </head> <body> {% block user %} <div> <h3>{{ user }}<br> <small>个人信息</small> </h3> <ul style="padding-left: 0px;margin-bottom: 0px;"> <li>用户：</li> <li>编号：</li> <li>昵称：</li> </ul> </div> {% endblock %} </body> </html>
