个人中心标签页导航

---

1. 新页面userbase.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. 让userbase.html继承base.html。
   重写title,head,main块.
   将上述<ul>的样式放在head块，<ul>放在main块中.
   定义新的块user。
   
   
3. 让上次作业完成的个人中心页面，继承userbase.html，原个人中心就自动有了标签页导航。
   
   
4. 制作个人中心的三个子页面，重写userbase.html中定义的user块，分别用于显示问答、评论、个人信息。
   
   
5. 思考 如何实现点标签页导航到达不同的个人中心子页面。

 py文件

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello_world():
    return 'Hello World!'

@app.route('/usercenter/<user_id>')
@login_re
def usercenter(user_id):
    user=User.query.filter(User.id==user_id).first()
    context={
        'user':user
    }
    return render_template('user1.html',**context)



if __name__ == '__main__':
    app.run()

index.html

{% extends 'detail.html' %}
{% block title %}首页{% endblock %}

{% block main %}
    <img sr="{{ url_for('staic',filename='images/qalogo.png') }}" alt="qa">
    <ul class="list-group" style="....">
    {% for foo in question %}
        <li class="list-group-items">
        <span class="glyphicon glyphicon-leaf" aria-hidden="="true></span>
        <a href="{{ url_for('detail',question_id =foo.id) }}">{{ foo.title }}</a>
        <p style="">{{ foo.detail }}</p>
        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
        <a href="{{ url_for('usercenter',user_id=foo.author_id) }}">{{ foo.author.username }}评论:({{ foo.comments|length }})</a>
        <span class="badge">{{ foo.creat_time }}</span>

        </li>
    {% endfor %}

    </ul>

{% endblock %}

userbase.html

{% extends"base.html" %}
{% block title %}个人中心{% endblock %}
{% block head %}
    <style>
        .nav_ul li{
            list-style: none;
            float: left;
            margin: 15px;

        }
    </style>
{% endblock %}
{% block main %}
<ul class="nav_ul">
     <li role="presentation"><a href="#">Question</a> </li>
     <li role="presentation"><a href="#">Comments</a> </li>
     <li role="presentation"><a href="#">Info</a> </li>
</ul>
    {% block user %}{% endblock %}
{% endblock %}