个人中心标签页导航

 

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。

1. 1. {% extends "base.html"%}
      {% block title%}个人中心{% endblock%}
      
      {% block head%}
          <style>
              .nav_ul li{
              float:left;
              list-style:none;
              margin:20px;
              border-bottom:outset;
              }
          </style>
      {% endblock%}
      
      {% block main%}
      <ul class="nav_ul">
          <li role="presentation"><a href="#">全部问答</a></li>
          <li role="presentation"><a href="#">全部评论</a></li>
          <li role="presentation"><a href="#">个人信息</a></li>
      </ul>
      
      {%block user%}{% endblock%}
      {% endblock%}

 

3.让上次作业完成的个人中心页面，继承user.html，原个人中心就自动有了标签页导航。

{% extends 'user.html'%}

4.

制作个人中心的三个子页面，重写user.html中定义的user块。

                        上节课作业的usercenter.html的三个模块：eg：

{% extends 'usercenter.html'%}

{%block user%}
<div class="page-header">
    <h3> <span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{username}}<br><small>全部问答<span class="bagde"></span></small>
    </h3>
    <ul class="list-group" >
        {%for foo in questions%}
        <li class="list-group-item">
            <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
            <a href="{{url_for('usercenter',user_id=foo.author_id)}}">{{foo.author.username}}</a>
            <span class="badge">{{foo.create_time}}</span>
            <p>文章标题：{{ foo.title }}</p>
            <p>文章内容：{{foo.detail}}</p>
        </li>
        {% endfor %}
    </ul>
</div>
{% endblock%}