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