zoukankan      html  css  js  c++  java
  • 个人中心标签页导航


    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. 思考 如何实现点标签页导航到达不同的个人中心子页面。

     py文件

    from flask import Flask
    
    app = Flask(__name__)
    
    
    @app.route('/')
    def hello_world():
        return 'Hello World!'
    
    @app.route('/usercenter/<user_id>')
    @login_re
    def usercenter(user_id):
        user=User.query.filter(User.id==user_id).first()
        context={
            'user':user
        }
        return render_template('user1.html',**context)
    
    
    
    if __name__ == '__main__':
        app.run()

    index.html

    {% extends 'detail.html' %}
    {% block title %}首页{% endblock %}
    
    {% block main %}
        <img sr="{{ url_for('staic',filename='images/qalogo.png') }}" alt="qa">
        <ul class="list-group" style="....">
        {% for foo in question %}
            <li class="list-group-items">
            <span class="glyphicon glyphicon-leaf" aria-hidden="="true></span>
            <a href="{{ url_for('detail',question_id =foo.id) }}">{{ foo.title }}</a>
            <p style="">{{ foo.detail }}</p>
            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            <a href="{{ url_for('usercenter',user_id=foo.author_id) }}">{{ foo.author.username }}评论:({{ foo.comments|length }})</a>
            <span class="badge">{{ foo.creat_time }}</span>
    
            </li>
        {% endfor %}
    
        </ul>
    
    {% endblock %}

    userbase.html

    {% extends"base.html" %}
    {% block title %}个人中心{% endblock %}
    {% block head %}
        <style>
            .nav_ul li{
                list-style: none;
                float: left;
                margin: 15px;
    
            }
        </style>
    {% endblock %}
    {% block main %}
    <ul class="nav_ul">
         <li role="presentation"><a href="#">Question</a> </li>
         <li role="presentation"><a href="#">Comments</a> </li>
         <li role="presentation"><a href="#">Info</a> </li>
    </ul>
        {% block user %}{% endblock %}
    {% endblock %}
  • 相关阅读:
    软件体系架构复习要点
    Operating System on Raspberry Pi 3b
    2019-2020 ICPC North-Western Russia Regional Contest
    2019 ICPC ShenYang Regional Online Contest
    2019 ICPC XuZhou Regional Online Contest
    2019 ICPC NanChang Regional Online Contest
    2019 ICPC NanJing Regional Online Contest
    Codeforces Edu Round 72 (Rated for Div. 2)
    Codeforces Round #583 (Div.1+Div.2)
    AtCoder Beginning Contest 139
  • 原文地址:https://www.cnblogs.com/123hyf/p/8042124.html
Copyright © 2011-2022 走看看