个人中心标签页导航

    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。
      {% 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. 让上次作业完成的个人中心页面,继承userbase.html,原个人中心就自动有了标签页导航。
      {% extends 'user.html'%}
      

        

    4. 制作个人中心的三个子页面,重写userbase.html中定义的user块,分别用于显示问答、评论、个人信息。
      {% 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%}
      

        



    5. 思考 如何实现点标签页导航到达不同的个人中心子页面。
原文地址:https://www.cnblogs.com/lhw1997/p/8044618.html