个人中心标签页导航

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>
   

    {% block main %}
        <ul class="nav nav-tabs">
        <li role="presentation"><a href="#">全部问答</a></li>
        <li role="presentation"><a href="#">全部评论</a></li>
        <li role="presentation"><a href="#">个人信息</a></li>
        </ul>
   

   {% endblock %}

2. user.html继承base.html。
   重写title,head,main块.
   将上述<ul>放在main块中.
   定义新的块user。
   

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

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

   {% extends'user.html' %}
   
   {#{% block title %}个人中心{% endblock %}#}
   {% block head %}
       <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/usercenter.css') }}">
   {% endblock %}
   
   {% block user %}
   
   {% endblock %}

4. 制作个人中心的三个子页面，重写user.html中定义的user块。
   
5. 思考 如何实现点标签页导航到达不同的个人中心子页面。

网页运行结果：