个人中心标签页导航

    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>

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

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

    4. 制作个人中心的三个子页面，重写userbase.html中定义的user块，分别用于显示问答、评论、个人信息。

    5. 思考 如何实现点标签页导航到达不同的个人中心子页面。 
      {% extends 'base.html' %}
{% block title %}首页{% endblock %}
{% block head %}{% endblock %}
{% block body %}
<div class="container">
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            {% for foo in questions %}

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a href="{{ url_for('detail',question_id=foo.id)}}">标题：{{foo.title }}</a>
                        作者：{{ foo.author.nickname }}
                    </h3>
                </div>
                <div class="panel-body">
                    内容：{{foo.detail }}
                </div>
                <div class="panel-footer">
　　　　　　　　    时间：{{ foo.create_time }}
                </div>

            {% endfor %}
        </div>

        <div class="col-md-4 column">
        </div>
    </div>
</div>
{% endblock %}
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> {% block title %}黑山牛肉火锅{% endblock %}</title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% block head %} {% endblock %}
</head>
 <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/style.css') }}">
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">欢迎来到黑山牛肉火锅</a>
            <a class="navbar-brand" href="{{ url_for('fabu')}}">发布问答</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            {% if username %}
             <li><a href="{{url_for('loginout') }}"><span class="glyphicon glyphicon-user"></span> 注销</a></li>
            <li><a href="{{ url_for('userbase') }}"><span class="glyphicon glyphicon-log-in"></span> {{username }}</a></li>
            {% else %}
            <li><a href="{{ url_for('register') }}"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
            <li><a href="{{ url_for('login') }}"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
            {% endif %}
        </ul>
    </div>
</nav>
{% block body %}{% endblock %}

</body>
</html>

       

posted @ 2017-12-16 20:28  201506050096谢阳  阅读(98)  评论(0)  编辑  收藏  举报