个人中心标签页导航

  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="zx">
        <li role="presentation"><a href="#">question</a></li>
        <li role="presentation"><a href="#">comments</a></li>
        <li role="presentation"><a href="#">infomation</a></li>
    </ul>

     

  2. user.html继承base.html。
    重写title,head,main块.
    将上述<ul>放在main块中.
    定义新的块user。
    <!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'test1.html' %}
    <meta charset="UTF-8">

    {% block title %}
        个人中心
    {% endblock %}
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/user.css') }}" charset="utf-8"/>
    {% endblock %}
</head>
<body>
{% block body %}
    <ul class="zx">
        <li role="presentation"><a href="#">question</a></li>
        <li role="presentation"><a href="#">comments</a></li>
        <li role="presentation"><a href="#">infomation</a></li>
    </ul>
    {% block user %}

    {% endblock %}


{% endblock %}
</body>
</html>

     

  3. 让上次作业完成的个人中心页面，继承user.html，原个人中心就自动有了标签页导航。
    <!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'user.html' %}
    <meta charset="UTF-8">
    <title>
        {% block title %}
            用户中心
        {% endblock %}
    </title>

    {% block head %}

    {% endblock %}
</head>
<body>
{% block user %}
    <div class="container">

        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="page-header">
                    <h3>{{ username }}><br>
                        <small>全部问答
                            <span class="badge"></span></small>
                    </h3>
                    <ul>
                        {% for foo in question %}
                            <li>
                                <a href="#">{{ foo.username }}</a>
                                <span class="badge">{{ foo.creat_time }}</span>
                                <p>{{ foo.detail }}</p>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>

        <h3>{{ username }}><br>
            <small>全部评论
                <span class="badge"></span></small>
        </h3>
        {% for foo in comments %}
            <ul style="padding-left: 0px;margin-bottom: 0px;">
            <li style="width: 800px">
                <a href="">{{ foo.author.username }}</a>
                <span class="badge">{{ foo.creat_time }}</span>
                <p>{{ foo.detail }}</p>
            </li>
        {% endfor %}
        </ul>
    </div>
    <div>
        <h3>{{ user }}<br>
            <small>个人信息</small>
        </h3>
        <ul style="padding-left: 0px;margin-bottom: 0px;">
            <li>用户：</li>
            <li>编号：</li>
            <li>昵称：</li>
        </ul>
    </div>

{% endblock %}
</body>
</html>

     

  4. 重写user.html中定义的user块。
  5. 思考 如何实现点标签页导航到达不同的个人中心子页面。
  6. <!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'user.html' %}
    <meta charset="UTF-8">
    <title>
        {% block title %}
            用户中心
        {% endblock %}
    </title>

    {% block head %}

    {% endblock %}
</head>
<body>
{% block user %}
    <div class="container">

        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="page-header">
                    <h3>{{ username }}><br>
                        <small>全部问答
                            <span class="badge"></span></small>
                    </h3>
                    <ul>
                        {% for foo in question %}
                            <li>
                                <a href="#">{{ foo.username }}</a>
                                <span class="badge">{{ foo.creat_time }}</span>
                                <p>{{ foo.detail }}</p>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>

        <h3>{{ username }}><br>
            <small>全部评论
                <span class="badge"></span></small>
        </h3>
        {% for foo in comments %}
            <ul style="padding-left: 0px;margin-bottom: 0px;">
            <li style="width: 800px">
                <a href="">{{ foo.author.username }}</a>
                <span class="badge">{{ foo.creat_time }}</span>
                <p>{{ foo.detail }}</p>
            </li>
        {% endfor %}
        </ul>
    </div>
    <div>
        <h3>{{ user }}<br>
            <small>个人信息</small>
        </h3>
        <ul style="padding-left: 0px;margin-bottom: 0px;">
            <li>用户：</li>
            <li>编号：</li>
            <li>昵称：</li>
        </ul>
    </div>

{% endblock %}
</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'user.html' %}
    <meta charset="UTF-8">
    <title>
        {% block title %}
            用户中心
        {% endblock %}
    </title>

    {% block head %}

    {% endblock %}
</head>
<body>
{% block user %}

    <div>
        <h3>{{ user }}<br>
            <small>个人信息</small>
        </h3>
        <ul style="padding-left: 0px;margin-bottom: 0px;">
            <li>用户：</li>
            <li>编号：</li>
            <li>昵称：</li>
        </ul>
    </div>

{% endblock %}
</body>
</html>

     

 

posted on 2017-12-14 20:34  045钟嘉丽  阅读(115)  评论(0)  编辑  收藏  举报

导航