- 新页面userbase.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> - 让userbase.html继承base.html。
重写title,head,main块.
将上述<ul>的样式放在head块，<ul>放在main块中.
定义新的块user。
{% extends ‘base.html‘ %} {% block title %} {% endblock %} {% block main %} <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <ul class="nav nav-pills" > <li><a href="{{ url_for(‘usercenter‘,user_id=user_id) }}">question</a></li> <li><a href="#">comment</a></li> <li><a href="#">information</a></li> </ul> {% block ab %}{% endblock %} {% endblock %}
- 让上次作业完成的个人中心页面，继承userbase.html，原个人中心就自动有了标签页导航。
- 制作个人中心的三个子页面，重写userbase.html中定义的user块，分别用于显示问答、评论、个人信息。
- 思考 如何实现点标签页导航到达不同的个人中心子页面。
{% extends ‘userbase.html‘ %} {% block title %} question {% endblock %} {% block ab %} <div class="col-md-8 column"> <ul class="list-unstyled"> {% for foo in comments %} <li class="list-group-item"> <span class="badge pull-right">{{ foo.create_time }}</span> <p>文章标题：{{ foo.question.title }}</p> <p>评论内容：{{ foo.detail }}</p> <img style="width: 30px" src="{{ url_for(‘static‘,filename=‘css/tx.jpg‘) }}" alt="64"> <small><a>{{ foo.author.username }}</a></small> <br> </li> {% endfor %} </ul> </div> <div class="col-md-2 column"> </div> </div> </div> {% endblock %}
{% extends ‘userbase.html‘ %} {% block title %} question {% endblock %} {% block ab %} <div class="container"> <div class="row clearfix"> <div class="col-md-2 column"> </div> <div class="col-md-8 column"><ul style="margin-left:-20%" class="list-group"> {% for foo in questions %} <li class="list-group-item" style="width: 800px"> <img style="width: 30px" src="{{ url_for(‘static‘,filename=‘css/tx.jpg‘) }}" alt="64"> <a href="#">{{ username }}</a><br> <a href="{{ url_for(‘detail‘,question_id=foo.id) }}">问题：{{ foo.title }}</a><br> <p style="align-content: center">{{ foo.detail }}</p> <span>评论数: ({{ foo.comments|length }})</span> <span class="badge" style="margin-left: 60%">{{ foo.create_time }}</span> <p style="margin-left: 25%"></p><br> </li> {% endfor %} </ul> </div> <div class="col-md-2 column"> </div> </div> </div>{% endblock %}
{% extends ‘userbase.html‘ %} {% block title %} question {% endblock %} {% block ab %} <div class="container"> <div class="row clearfix"> <div class="col-md-2 column"> </div> <div class="col-md-8 column"> <ul style="margin-left:-20%" class="list-group"> <li class="list-group-item" style="width: 800px"> <h3 align="center">个人信息</h3> <img style="width: 30px" src="{{ url_for(‘static‘,filename=‘css/tx.jpg‘) }}" alt="64"> <a href="#">用户名{{ username }}</a><br> <a>文章篇数:{{ questions|length }}</a> <p style="margin-left: 25%"></p><br> </li> </ul> </div> <div class="col-md-2 column"> </div> </div> </div>{% endblock %}
