• 个人中心标签页导航


      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. 思考 如何实现点标签页导航到达不同的个人中心子页面。
  • 相关阅读:
    spark视频-Spark Streaming实时计算和流处理
    spark视频-Spark把云计算大数据速度提高100倍以上
    spark视频-Spark on Docker深入揭秘
    spark视频-Spark as a Service
    spark视频-Spark on Yarn
    MyEclipse Web 项目导入 Eclipse 中需要改的文件
    【解决】小米M1刷机教程(卡刷)
    【解决】笔记本发射WiFi
    【解决】U盘装系统(Win7/Win8)& 装双系统
    【解决】Internet访问看似正常(无叹号受限)却打不开网页
  • 原文地址:https://www.cnblogs.com/lhw1997/p/8044618.html
Copyright © 2020-2023  润新知