12.14

    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>
      <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>

       

    2. user.html继承base.html。
      重写title,head,main块.
      将上述<ul>放在main块中.
      定义新的块user。
      {% extends 'base.html' %}
      {% block title %}我的中心{% endblock %}
      {% block head %}
          <style>
              .nav_ul li {
                  list-style: none;
                  float: left;
                  margin: 30px;
              }
          </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,原我的中心就自动有了标签页导航。

    4. 制做我的中心的三个子页面,重写user.html中定义的user块。
      {% extends 'user.html' %}
      {% block title %}我的中心 {% endblock%}
      {% block main%}
       
      <div class="page-header">
          <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
          {{username}} <br> <small>所有问答><span class="badge"></span> </small></h3>
          <ul class="list-group" style="">
              {% for foo in user.question %}
                  <li class="list-group-item">
                      <spanclass="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                      <a href="#">{{foo.author.username }}</a>
                      <spanclass="badge">{{foo.creat_time}}</span>
                      <p style="">{{foo.detail}}</p>
                  </li>
          {% endfor %}
          </ul>
      </div>
       
      <div class="page-header">
           <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
          {{user}} <br> <small>person information><span class="badge"></span> </small></h3>
          <ul class="list-group" style="">
                {% for foo in user.comments %}
                  <li class="list-group-item">
                      <spanclass="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                      <a href="#">{{foo.author.username }}</a>
                      <spanclass="badge">{{foo.creat_time}}</span>
                      <p style="">{{foo.detail}}</p>
                  </li>
          {% endfor %}
          </ul>
      </div>
       
      <div class="page-header">
           <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
          {{user}} <br> <small>person information><span class="badge"></span> </small></h3>
            <ul class="list-group" style="">
                <li class="list-group-item">username:{{username}}</li>
                <li class="list-group-item">number:</li>
                <li class="list-group-item">nicheng:</li>
                <li class="list-group-item">new page:</li>
            </ul>
      </div>
       
      {% endblock %}

       

    5. 思考 如何实现点标签页导航到达不一样的我的中心子页面。
相关文章
相关标签/搜索