码迷,mamicode.com
首页 > 其他好文 > 详细

个人中心标签页导航

时间:2017-12-15 13:35:50      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:ati   question   set   float   query   href   turn   span   context   

    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. 思考 如何实现点标签页导航到达不同的个人中心子页面
      @app.route(/user_detail<user_id>)
      @login_first
      def user_detail(user_id):
          user=User.query.filter(User.id == user_id).first()
          context={
              "user":user
          }
          return render_template("user.html",**context)
      {% extends "base.html" %}
      {% block title%}用户详情{% endblock %}
      
      {% block head %}
          <style>
              .u_ul li{
                  float: left;
                  margin: 20px;
                  list-style: none;
      
              }
          </style>
      {% endblock %}
      
      {% block main %}
          <ul class="u_ul">
              <li role="presentation"><a href="{{ url_for("user_detail",user_id = user.id)}}">全部问答</a></li>
              <li role="presentation"><a href="{{ url_for("user_detail",user_id = user.id)}}">全部评论</a></li>
              <li role="presentation"><a href="{{ url_for("user_detail",user_id = user.id)}}">个人信息</a></li>
          </ul>
      
          {% block user %}{% endblock %}
      
      {% endblock %}
      {% extends "user.html" %}
      
      {% block user %}
      
          <form class="basic">
              {% for foo in user.question %}
                  <h2>{{ foo.username }}<span>全部问答</span></h2>
                  <fieldset>
                      <span >{{ foo.create_time }}</span>
                      <h3>{{ foo.title }}</h3>
                      <h3>{{ foo.detail}}</h3>
                  </fieldset>
              {% endfor %}
          </form>
      
      {% endblock %}
      {% extends "user.html" %}
      
      {% block user %}
      
          <form class="basic">
              {% for foo in user.comment %}
                  <h2>{{ foo.username }}<span>全部评论</span></h2>
              <fieldset>
                  <span>{{ foo.create_time }}</span>
                  <h3>{{ foo.detail}}</h3>
              </fieldset>
              {% endfor %}
          </form>
      
      
      {% endblock %}
      {% extends "user.html" %}
      
      {% block user %}
      
          <form class="basic">
              <fieldset>
                  <span>个人信息</span>
                  <ul>
                      <li>用户:{{ user.username }}</li>
                      <li>编号:{{ user.id }}</li>
                      <li>文章篇数:{{ user.question|length }}</li>
                  </ul>
              </fieldset>
          </form>
      
      {% endblock %}

       

个人中心标签页导航

标签:ati   question   set   float   query   href   turn   span   context   

原文地址:http://www.cnblogs.com/yin-yeah/p/8042406.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!