个人中心标签页导航
- 新页面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。
- 让上次作业完成的个人中心页面,继承user.html,原个人中心就自动有了标签页导航。
- 制作个人中心的三个子页面,重写user.html中定义的user块。
- 思考 如何实现点标签页导航到达不同的个人中心子页面。
- 新页面user.html,用<ul ><li role="presentation"> 实现标签页导航。
{% extends'danghangye.html' %} {% block title %}个人中心{% endblock %} {% block head %} <style> .nav_ul li { list-style:none; float:left; margin:10px; border-bottom:outset; } </style> {% endblock %} {% block main %} <ul class="nav_ul"> <li role="presentation" ><a href="{{url_for('usercenter1',user_id = usern)}}">fankui</a></li> <li role="presentation"><a href="{{url_for('usercenter2',user_id = usern)}}">comment</a></li> <li role="presentation"><a href="{{url_for('usercenter3',user_id = usern)}}">person</a></li> </ul> {% block usercenter %}{% endblock %} {% endblock %}
{% extends'usercenter.html' %} {% block usercenter %} <div> <div> <P align="center" style="background-color:rgba(255,255,0,0.25)"></P> <ur class="sss" style="background-color:rgba(255,255,0,0.25)"> <p>发布({{fankui|length}})</p> {% for foo in fankui %} <li class="list"> <span class="glyphicon" aria-hidden="true"></span> <a href="#">{{foo.author.username}}</a> <br> <a href="{{url_for('详情页',fankui_id = foo.id )}}">{{foo.biaoti}}</a> <span class="badge">{{foo.creat_time}} </span> <p>{{foo.questionDetail}}</p> </li> {% endfor %} </ur> </div> </div> {% endblock %}
@app.route('/usercenter1/<user_id>') @loginFirst def usercenter1(user_id): user = User.query.filter(User.id == user_id).first() context = { 'usern': user.id, 'username': user.username, 'fankui':user.fankui, 'comment':user.comment }