我的中心標籤頁導航

時間 2019-11-10

標籤我的中心標籤導航简体版

原文原文鏈接

一、新頁面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

<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>

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

html

<!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>

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

url

<!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>

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

五、思考如何實現點標籤頁導航到達不一樣的我的中心子頁面code

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。