做業,

新頁面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>css

 

user.html繼承base.html。
重寫title,head,main塊.
將上述<ul>放在main塊中.
定義新的塊user。html

複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
{% extends 'index.html' %}
<meta charset="UTF-8">
<title>{% block title %}
我的
{% endblock %}</title>
{% block head %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/user.css') }}">
{% endblock %}
</head>
<body>
{% block body %}
<div class="all">
<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>
</div>
{% block user %}{% endblock %}
{% endblock %}

</body>
</html>
 
 
>                        <span class="badge">評論時間:{{ foo.creat_time }}</span>                        <p>{{ foo.detail }}</p>                    </li>                </ul>            {% endfor %}        </div>        <hr>                <div>                    <h4>{{ user }}                        <br>                        <small>用戶資料</small>                    </h4>                    <ul style="padding-left: 0px;margin-bottom: 0px;">                        <li class="list-group-item" style="width: 900px">用戶:{{ username }}</li>                        <li class="list-group-item" style="width: 900px">編號:</li>                        <li class="list-group-item" style="width: 900px">暱稱:</li>                    </ul>                </div>    </div>{% endblock %}</body></html
複製代碼

讓上次做業完成的我的中心頁面,繼承user.html,原我的中心就自動有了標籤頁導航。url

複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'user.html' %}
    <meta charset="UTF-8">
    <title>
        {% block title %}
            我的中心
        {% endblock %}
    </title>
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/geren.css') }}">
    {% endblock %}
    {#<link rel="stylesheet" href="../static/css/geren.css">#}
</head>
<body>
{% block user %}
    <div class="all have-img">

        <div>

            <h4>用戶名:{{ username }}
                <br>
                <small>所有問答</small>
            </h4>
            {% for foo in sent %}
                <ul style="padding-left: 0px;margin-bottom: 0px;">
                    <li class="list-group-item" style="width: 900px">
                        <a href="">{{ foo.author.username }}</a>
                        <span class="badge">評論時間:{{ foo.creat_time }}</span>
                        <p>{{ foo.detail }}</p>
                    </li>
                </ul>
            {% endfor %}
        </div>
        <hr>

        <div>

{#            <h4>用戶名:{{ sent_username }}#}
{#                <br>#}
                <small>所有評論</small>
{#            </h4>#}
            {% for foo in comments %}
                <ul style="padding-left: 0px;margin-bottom: 0px;">
                    <li class="list-group-item" style="width: 900px">
                        <a href="#">{{ foo.author.username }}</a>
                        <span class="badge">評論時間:{{ foo.creat_time }}</span>
                        <p>{{ foo.detail }}</p>
                    </li>
                </ul>
            {% endfor %}

        </div>
        <hr>

                <div>
                    <h4>{{ user }}
                        <br>
                        <small>用戶資料</small>
                    </h4>

                    <ul style="padding-left: 0px;margin-bottom: 0px;">
                        <li class="list-group-item" style="width: 900px">用戶:{{ username }}</li>
                        <li class="list-group-item" style="width: 900px">編號:</li>
                        <li class="list-group-item" style="width: 900px">暱稱:</li>
                    </ul>
                </div>

    </div>
{% endblock %}

</body>
</html>
複製代碼

製做我的中心的三個子頁面,重寫user.html中定義的user塊。spa

問答子頁面code

複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'user.html' %}
    <meta charset="UTF-8">
    <title>{% block title %}
    問答
    {% endblock %}</title>
</head>
<body>
{% block user %}
<div>

{#            <h4>用戶名:{{ username }}#}
{#                <br>#}
                <small>所有問答</small>
{#            </h4>#}
            {% for foo in sent %}
                <ul style="padding-left: 0px;margin-bottom: 0px;">
                    <li class="list-group-item" style="width: 900px">
                        <a href="">{{ foo.author.username }}</a>
                        <span class="badge">評論時間:{{ foo.creat_time }}</span>
                        <p>{{ foo.detail }}</p>
                    </li>
                </ul>
            {% endfor %}
        </div>
{% endblock %}
</body>
</html>
複製代碼

評論子頁面htm

複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'user.html' %}
    <meta charset="UTF-8">
    <title>{% block title %}
        評論
    {% endblock %}</title>
</head>
<body>
{% block user %}
    <div>

        {#            <h4>用戶名:{{ sent_username }}#}
        {#                <br>#}
        <small>所有評論</small>
        {#            </h4>#}
        {% for foo in comments %}
            <ul style="padding-left: 0px;margin-bottom: 0px;">
                <li class="list-group-item" style="width: 900px">
                    <a href="#">{{ foo.author.username }}</a>
                    <span class="badge">評論時間:{{ foo.creat_time }}</span>
                    <p>{{ foo.detail }}</p>
                </li>
            </ul>
        {% endfor %}

    </div>
{% endblock %}
</body>
</html>
複製代碼

我的中心子頁面blog

複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'user.html' %}
    <meta charset="UTF-8">
    <title>{% block title %}
        我的中心
    {% endblock %}</title>
</head>
<body>
{% block user %}
    <div>
        <h4>{{ user }}
            <br>
            <small>用戶資料</small>
        </h4>

        <ul style="padding-left: 0px;margin-bottom: 0px;">
            <li class="list-group-item" style="width: 900px">用戶:{{ username }}</li>
            <li class="list-group-item" style="width: 900px">編號:</li>
            <li class="list-group-item" style="width: 900px">暱稱:</li>
        </ul>
    </div>
{% endblock %}
</body>
</html>
複製代碼
相關文章
相關標籤/搜索