个人中心标签页导航
- 新页面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> - user.html继承base.html。
重写title,head,main块.
将上述<ul>放在main块中.
定义新的块user。{% extends "base.html"%} {% block title%}个人中心{% endblock%} {% block head%} <style> .nav_ul li{ float:left; list-style:none; margin:20px; border-bottom:outset; } </style> {% endblock%} {% block main%} <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> {%block user%}{% endblock%} {% endblock%}
- 让上次作业完成的个人中心页面,继承user.html,原个人中心就自动有了标签页导航。
{% extends 'user.html'%}
- 制作个人中心的三个子页面,重写user.html中定义的user块。
上节课作业的usercenter.html的三个模块:eg:
-
{% extends 'usercenter.html'%} {%block user%} <div class="page-header"> <h3> <span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{username}}<br><small>全部问答<span class="bagde"></span></small> </h3> <ul class="list-group" > {%for foo in questions%} <li class="list-group-item"> <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> <a href="{{url_for('usercenter',user_id=foo.author_id)}}">{{foo.author.username}}</a> <span class="badge">{{foo.create_time}}</span> <p>文章标题:{{ foo.title }}</p> <p>文章内容:{{foo.detail}}</p> </li> {% endfor %} </ul> </div> {% endblock%}
- 思考 如何实现点标签页导航到达不同的个人中心子页面。