• 个人中心标签页导航


    ---恢复内容开始---

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

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

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

      4. 重写user.html中定义的user块。

    ---恢复内容结束---

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

      2. user.html继承base.html。
        重写title,head,main块.
        将上述<ul>放在main块中.
        定义新的块user。
        {% extends "myweb.html" %}
        {% block usertitle %}个人中心{% endblock %}
        {% block userhead %}
            <style>
                .nav_ul li{
                    list-style: none;
                    float: left;
                    margin: 10px;
                }
            </style>
        {% endblock %}
        
        {% block mywebbody %}
        <ul class="nav_ul">
            <li role="presentation"><a href="#">questions</a> </li>
            <li role="presentation"><a href="#">comments</a> </li>
            <li role="presentation"><a href="#">information</a> </li>
        </ul>
        
        {% block usercenterbody %}{% endblock %}
        
        {% endblock %}
        
        </html>
      3. 让上次作业完成的个人中心页面,继承user.html,原个人中心就自动有了标签页导航。
        {% extends "user.html" %}
        
        {% block usercenterbody %}
            <div class="page-header">
                <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}<br><small>全部问答<span class="badge>"></span> </small> </h3>
                <ul class="list-group"style="margin:10px">
                    {% for foo in comments %}
                        <li class="list-group-item">
                            <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                            <a href="#">{{ foo.author.username }}</a>
                            <span class="badge">{{ foo.creat_time }}</span>
                            <p style="align-content: center">{{ foo.detail }}</p>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        
            <div class="page-header">
                <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ user }}<br><small>全部评论<span class="badge>"></span> </small> </h3>
                <ul class="list-group"style="margin:10px">
                    {% for foo in comments %}
                        <li class="list-group-item">
                            <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                            <a href="#">{{ foo.author.username }}</a>
                            <span class="badge">{{ foo.creat_time }}</span>
                            <p style="align-content: center">{{ foo.detail }}</p>
                        </li>
                    {% endfor %}
                </ul>
        
            </div>
        
            <div class="page-header">
                <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ user }}<br><small>个人信息<span class="badge>"></span> </small> </h3>
                <ul class="list-group"style="margin:10px">
                    <li class="list-group-item">用户:{{ username }}</li>
                    <li class="list-group-item">编号:</li>
                    <li class="list-group-item">昵称:</li>
                </ul>
            </div>
        {% endblock %}
      4. 重写user.html中定义的user块。
        {% extends 'user.html' %}
        
        {% block user %}
        <div>
            全部问答
        </div>
        
        {% endblock %}
        {% extends 'user.html' %}
        
        {% block user %}
        <div>
            全部评论
        </div>
        
        {% endblock %}
        {% extends 'user.html' %}
        
        {% block user %}
        <div>
           个人信息
        </div>
        
        {% endblock %}
  • 相关阅读:
    JS数组及操作方法,堆和栈的概念
    JS变量作用域,浏览器预解析
    JS函数的基本概念
    JS循环语句
    JS程序三大结构及语法语句
    src与href
    JS概念及基本语法
    图片整合技术
    hdu6395 Sequence(分段矩阵快速幂)
    hdu6396 Swordsman(贪心)
  • 原文地址:https://www.cnblogs.com/YyYyYy11/p/8033196.html
Copyright © 2020-2023  润新知