个人中心标签页导航

Posted 王卡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了个人中心标签页导航相关的知识,希望对你有一定的参考价值。

    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 %}
          <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/userbase.css‘)}}">
          <style>
              .nav_ul li{
                  list-style: none;
                  float: left;
                  margin: 10px;
              }
          </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 ‘userbase.html‘ %}
      {% block title %}个人中心{% endblock %}
      {% block head %}
       <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/usercenter.css‘)}}">
          <style>
              .nav_ul li{
                  list-style: none;
                  float: left;
                  margin: 10px;
              }
      
          </style>
      {% endblock %}
      {% block user %}
      <div class="list-container">
          <div class="wenda">
              <h3>{#<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>#}{{ username1 }}<br><small>全部问答:</small></h3>
              <ul class="news-list">
                      {% for foo in questions %}
                          <li style="padding-left: 0px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px 0px;">
                              <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                              <a href="#">{{ foo.author.username }}</a>
                              <span class="badgs">{{ foo.creat_time }}</span>
                              <br>
                              <a href=" #">{{ foo.title }}</a>
                              <p>{{ foo.detail}}</p>
                          </li>
                      {% endfor %}
                  </ul>
          </div>
          <div class="pinlun">
              <h3>{#<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>#}{{ username1 }}<br><small>全部评论:</small></h3>
              <ul class="news-list">
              {% for foo in comments %}
                  <li style="padding-left: 0px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px 0px;">
                      <span class="glyphicon glyphicon-leaf" aria-hidden="true" ></span>
                      <a href="#">{{ foo.author.username }}</a>
                      <br>
                      <span class="badgs">{{ foo.creat_time }}</span>
                      <p>{{ foo.detail}}</p>
                  </li>
              {% endfor %}
          </ul>
          </div>
      
          <div class="per">
              <h3><span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>{{ username1 }}<br><small>个人信息:</small></h3>
              <ul class="news-list">
                  {#<li style="padding-left: 0px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px 0px;">#}
                  <li class="list-group-item">用户:{{ username }}</li>
                  <li class="list-group-item">编号:{{ user_id }}</li>
                  <li class="list-group-item">昵称:</li>
                  <li class="list-group-item">文章篇数:</li>
      
              </ul>
          </div>
      </div>
      {% endblock %}
    4. 制作个人中心的三个子页面,重写userbase.html中定义的user块,分别用于显示问答、评论、个人信息。
      {% extends ‘userbase.html‘ %}
      {% block user %}
          <div class="wenda">
              <h3>{#<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>#}{{ username1 }}<br><small>全部问答:</small></h3>
              <ul class="news-list">
                      {% for foo in questions %}
                          <li style="padding-left: 0px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px 0px;">
                              <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                              <a href="#">{{ foo.author.username }}</a>
                              <span class="badgs">{{ foo.creat_time }}</span>
                              <br>
                              <a href=" #">{{ foo.title }}</a>
                              <p>{{ foo.detail}}</p>
                          </li>
                      {% endfor %}
                  </ul>
          </div>
      {%  endblock %}
      {% extends ‘userbase.html‘ %}
      {% block user %}
      <div class="pinlun">
              <h3>{#<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>#}{{ username1 }}<br><small>全部评论:</small></h3>
              <ul class="news-list">
              {% for foo in comments %}
                  <li style="padding-left: 0px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px 0px;">
                      <span class="glyphicon glyphicon-leaf" aria-hidden="true" ></span>
                      <a href="#">{{ foo.author.username }}</a>
                      <br>
                      <span class="badgs">{{ foo.creat_time }}</span>
                      <p>{{ foo.detail}}</p>
                  </li>
              {% endfor %}
          </ul>
          </div>
      {%  endblock %}
      {% extends ‘userbase.html‘ %}
      {% block user %}
      <div class="per">
              <h3><span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>{{ username1 }}<br><small>个人信息:</small></h3>
              <ul class="news-list">
                  {#<li style="padding-left: 0px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px 0px;">#}
                  <li class="list-group-item">用户:{{ username }}</li>
                  <li class="list-group-item">编号:{{ user_id }}</li>
                  <li class="list-group-item">昵称:</li>
                  <li class="list-group-item">文章篇数:</li>
      
              </ul>
          </div>
      {%  endblock %}
    5. 思考 如何实现点标签页导航到达不同的个人中心子页面。

以上是关于个人中心标签页导航的主要内容,如果未能解决你的问题,请参考以下文章

个人中心标签页导航

个人中心标签页导航

个人中心标签页导航

个人中心标签页导航

个人中心标签页导航

个人中心标签页导航