个人中心标签页导航

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.代码如下：

<ul class="nav nav-tabs">


    <li class="nav"  role="presentation"><a href="#"><h3>全部问答</h3></a></li>
    <li class="nav"  role="presentation"><a href="#"><h3>全部评论</h3></a></li>
    <li class="nav"  role="presentation"><a href="#"><h3>个人中心</h3></a></li>

</ul>

2.代码如下：

user.html

{% extends 'basic.html' %}
{% block title %} 个人中心{% endblock %}

{% block aa %}
{% block user %}{% endblock %}
 </div>
{% endblock %}

person.html

{% extends 'user.html' %}


{% block user %}
{% endblock %}

3.代码如下：

{% extends 'basic.html' %}
{% block title %} 个人中心{% endblock %}

{% block aa %}
 <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename="css/user.css") }}">


  <div style="background-color: lavenderblush;width:1100px;margin: 100px;">
<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 column">
        </div>

        <div class="col-md-6 column">
{#<h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ user.username }}</h3>#}
<ul class="nav nav-tabs">

{#    <li class="nav"><a href="{{url_for('person',user_id=user.id,tag=1)}}"><h3>全部问答</h3></a></li>#}
{#    <li class="nav"><a href="{{url_for('person',user_id=user.id,tag=2)}}"><h3>全部评论</h3></a></li>#}
{#    <li class="nav"><a href="{{url_for('person',user_id=user.id,tag=3)}}"><h3>个人中心</h3></a></li>#}

    <li class="nav"  role="presentation"><a href="#"><h3>全部问答</h3></a></li>
    <li class="nav"  role="presentation"><a href="#"><h3>全部评论</h3></a></li>
    <li class="nav"  role="presentation"><a href="#"><h3>个人中心</h3></a></li>

</ul>

        </div>
        <div class="col-md-4 column">
        </div>
        </div>
    </div>




{% block user %}{% endblock %}
 </div>
{% endblock %}

4.代码如下：

person1

{% extends 'user.html' %}


{% block user %}


<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 column">
        </div>
        <div class="col-md-6 column">


<h1><img src="{{ img }}" width="50px">{{usern }}</h1>

    <br>全部问答


<div class="basic_box" style="padding-bottom: 50px;">
    <ul class="list-group">

           {% for qu in ques %}

            <li class="list-group-item" style="width: 800px">

<a class="wrap-img" href="#" target="_blank">
                    <img src="{{ qu.author.image }}" width="50px">
                </a>
                <span class="glyphicon glyphicon-left" aria-hidden="true"></span>
                <a href="{{ url_for('person',user_id=qu.author.id) }}" target="_blank">{{ qu.author.username }}</a>
                <br>
                <a href="{{ url_for('detail',question_id=qu.id) }}">{{qu.title }}</a>

                <br>
                <span class="badge">发布时间:{{ qu.creat_time }}</span>
                <p style="">{{ qu.detail }}
                </p>



            </li>
     {% endfor %}
    </ul>
</div>

        <div class="col-md-4 column">
        </div>
    </div>
</div>

</div>

</div>

{% endblock %}

person2

{% extends 'user.html' %}


{% block user %}


<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 column">
        </div>
        <div class="col-md-6 column">



<h1><img src="{{ img }}" width="50px">{{usern }}</h1>
    <br>全部评论



<div class="basic_box" style="padding-bottom: 50px;">
    <ul class="list-group" style="margin-bottom: 10px">
      {% for qu in users %}


            <li class="list-group-item" style="width: 800px">


                <a class="wrap-img" href="#" target="_blank">
                    <img src="{{ qu.author.image }}" width="50px">
                </a>
                <span class="glyphicon glyphicon-left" aria-hidden="true"></span>

                <br>
                <a href="#">{{ qu.author.username }}</a>
                <span class="badge">评论时间:{{ qu.creat_time }}</span>
                <p style="">{{ qu.detail }}
                </p>


            </li>
     {% endfor %}
    </ul>


        </div>
        <div class="col-md-4 column">
        </div>
    </div>
</div>



</div>


</div>

{% endblock %}

person3

{% extends 'user.html' %}


{% block user %}


<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 column">
        </div>
        <div class="col-md-6 column">


<h1><img src="{{ img }}" width="50px">{{usern }}</h1>
    <br>个人信息

<div class="basic_box" style="padding-bottom: 50px;">
    <ul class="list-group" style="margin-bottom: 10px">



          <li class="list-group-item" style="width: 800px"> 用户：{{ usern }}</li>
          <li class="list-group-item" style="width: 800px"> 编号：{{ id }}</li>
          <li class="list-group-item" style="width: 800px"> 问答数：{{ ques|length }}</li>
          <li class="list-group-item" style="width: 800px"> 评论数：{{ comment|length }}</li>

    </ul>

        </div>
        <div class="col-md-4 column">
        </div>
    </div>
</div>

</div>


</div>

{% endblock %}

效果如下：