zoukankan      html  css  js  c++  java
  • 个人中心标签页导航

      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。
        {% extends "base.html"%}
        {% block title%}个人中心{% endblock%}
        
        {% block head%}
            <style>
                .nav_ul li{
                float:left;
                list-style:none;
                margin:20px;
                border-bottom:outset;
                }
            </style>
        {% endblock%}
        
        {% block main%}
        <ul class="nav_ul">
            <li role="presentation"><a href="#">全部问答</a></li>
            <li role="presentation"><a href="#">全部评论</a></li>
            <li role="presentation"><a href="#">个人信息</a></li>
        </ul>
        
        {%block user%}{% endblock%}
        {% endblock%}
        

          



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

          

      4. 制作个人中心的三个子页面,重写userbase.html中定义的user块,分别用于显示问答、评论、个人信息。
        {% extends 'usercenter.html'%}
        
        {%block user%}
        <div class="page-header">
            <h3> <span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{username}}<br><small>全部问答<span class="bagde"></span></small>
            </h3>
            <ul class="list-group" >
                {%for foo in questions%}
                <li class="list-group-item">
                    <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                    <a href="{{url_for('usercenter',user_id=foo.author_id)}}">{{foo.author.username}}</a>
                    <span class="badge">{{foo.create_time}}</span>
                    <p>文章标题:{{ foo.title }}</p>
                    <p>文章内容:{{foo.detail}}</p>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endblock%}
        

          



      5. 思考 如何实现点标签页导航到达不同的个人中心子页面。
  • 相关阅读:
    Python元组、列表、字典
    测试通过Word直接发布博文
    Python环境搭建(windows)
    hdu 4003 Find Metal Mineral 树形DP
    poj 1986 Distance Queries LCA
    poj 1470 Closest Common Ancestors LCA
    poj 1330 Nearest Common Ancestors LCA
    hdu 3046 Pleasant sheep and big big wolf 最小割
    poj 3281 Dining 最大流
    zoj 2760 How Many Shortest Path 最大流
  • 原文地址:https://www.cnblogs.com/lhw1997/p/8044618.html
Copyright © 2011-2022 走看看