个人中心标签页导航

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

{% extends "base.html" %}
{% block title %}个人中心{% endblock %}
{% block head %}
    <style>
        .nav_ul li{
            list-style: none;
            float: left;
            margin: 10px;
        }
    </style>
{% endblock %}

{% block main %}
<ul class="nav_ul">
    <li role="presentation"><a href="{{url_for'usercenter',user_id = user.id }}">questions</a> </li>
    <li role="presentation"><a href="#">comments</a> </li>
    <li role="presentation"><a href="#">information</a> </li>
</ul>

{% block user %}{% endblock %}

{% endblock %}

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

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

3.让上次作业完成的个人中心页面,继承userbase.html,原个人中心就自动有了标签页导航。
4.制作个人中心的三个子页面,重写userbase.html中定义的user块,分别用于显示问答、评论、个人信息。

5.思考 如何实现点标签页导航到达不同的个人中心子页面。

{% extends 'user.html' %}

{% block user %}
<div>
  
</div>

{% endblock %}

 

posted on 2017-12-15 11:43  020吴惠琳  阅读(162)  评论(0)    收藏  举报