个人中心标签页导航

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

 {% block main %}
     <ul class="nav nav-tabs">
     <li role="presentation"><a href="#">全部问答</a></li>
     <li role="presentation"><a href="#">全部评论</a></li>
     <li role="presentation"><a href="#">个人信息</a></li>
     </ul>

{% endblock %}

user.html继承base.html。
重写title,head,main块.
将上述<ul>放在main块中.
定义新的块user。

 1 {% extends "base.html" %}
 2 {% block title %}个人中心{% endblock %}
 3 {% block head %}
 4     <style>
 5         .nav nav-tabs li{
 6             list-style: none;
 7             float: left;
 8             margin: 25px;
 9         }
10 
11     </style>
12 {% endblock %}
13 
14 {% block main %}
15     <ul class="nav nav-tabs">
16     <li role="presentation"><a href="#">全部问答</a></li>
17     <li role="presentation"><a href="#">全部评论</a></li>
18     <li role="presentation"><a href="#">个人信息</a></li>
19 20     </ul>
21 
22     {% block user %}{% endblock %}
23 
24 {% endblock %}

让上次作业完成的个人中心页面，继承user.html，原个人中心就自动有了标签页导航。

{% extends'user.html' %}

{#{% block title %}个人中心{% endblock %}#}
{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/usercenter.css') }}">
{% endblock %}

{% block user %}

{% endblock %}

制作个人中心的三个子页面，重写user.html中定义的user块。
思考如何实现点标签页导航到达不同的个人中心子页面。

网页运行结果：

posted @ 2017-12-13 16:03 031庄园阅读(196) 评论(0) 编辑收藏举报

iamzhuangyuan

个人中心标签页导航

公告