个人中心标签页导航

    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。

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

    4. 制作个人中心的三个子页面,重写userbase.html中定义的user块,分别用于显示问答、评论、个人信息。

    5. 思考 如何实现点标签页导航到达不同的个人中心子页面。
    6. {% extends'base.html' %}
      {% block title %}{% endblock %}
      
      {% block head %}
           <link rel="stylesheet" href="{{ url_for('static',filename='css/question.css')}}">
      {% endblock %}
      
      {% block main %}
      
      <ul class="nav_ul">
          <h2>{{ user.username }}</h2>
          <li role="presentation"><a href="{{ url_for('self',user_id=user.id) }}">全部问答</a> </li>
          <li role="presentation"><a href="#">全部评论</a> </li>
          <li role="presentation"><a href="#">个人信息</a> </li>
          {% block user %}
          {% endblock %}
      </ul>
      {% endblock %}



    7. %}{% extends'self.html' %}
      
      {% block user %}
          <div class="detail_left">
              {% for foo in user.comments %}
                  <span class="icon2" aria-hidden="true"><img src="../static/images/56.jpg"></span>
                  <a href="#" class="name">{{ foo.author.username }}</a>
                  <span class="badge">{{ foo.creatTime }}</span>
                  <br>
                  <p class="wenzhang" >{{ foo.detail }}</p>
                  <div style="border-top:1px dashed black;height: 1px;overflow:hidden"></div>
                  {% endfor %}
          </div>
      {% endblock %}

       

      {% extends'self.html' %}
      
      {% block user %}
          <div class="detail_left">
              {% for foo in user.question %}
                  <span class="icon2" aria-hidden="true"><img src="../static/images/ay-thumb.jpg"></span>
                  <a href="#" class="name">{{ foo.author.username }}</a>
                  <span class="badge">{{ foo.creatTime }}</span>
                  <br>
                  <a href="#" class="title">{{ foo.title }}</a>
                  <br>
                  <p class="wenzhang" >{{ foo.detail }}</p>
                  <div style="border-top:1px dashed black;height: 1px;overflow:hidden"></div>
                  {% endfor %}
          </div>
      
      {% endblock %}

       

      {% extends'self.html' %}
      
      
      {% block user %}
          <div class="info">
              <p>用户名:{{ user.username }}</p>
              <div style="border-top:1px dashed black;height: 1px;overflow:hidden"></div>
              <p>编号:{{ user.id }}</p>
              <div style="border-top:1px dashed black;height: 1px;overflow:hidden"></div>
              <p>文章篇数:{{ user.question|length }}</p>
              <div style="border-top:1px dashed black;height: 1px;overflow:hidden"></div>
              <p>评论次数:{{ user.comments|length }}</p>
              <div style="border-top:1px dashed black;height: 1px;overflow:hidden"></div>
      
          </div>
      
      {% endblock %}

       

       

posted on 2017-12-15 17:52  122叶远超  阅读(84)  评论(0编辑  收藏  举报

导航