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. 思考 如何實現點標籤頁導航到達不一樣的我的中心子頁面。
相關文章
相關標籤/搜索