个人中心标签页导航


    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>
      <ul class="nav_ul"><li role="presentation"><a href="#">Question</a></li><li role="presentation"><a href="#">Comment</a></li><li role="presentation"><a href="#">Info</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{list-style: none;float:left;margin: 10px;}</style>
      {% endblock %}
      {% block main %}<ul class="nav_ul"><li role="presentation"><a href="#">Question</a></li><li role="presentation"><a href="#">Comment</a></li><li role="presentation"><a href="#">Info</a></li></ul>{% block user %}{% endblock %}
      {% endblock %}

       

    3. 让上次作业完成的个人中心页面,继承userbase.html,原个人中心就自动有了标签页导航。
      {% extends 'userbase.html' %}
    4. 制作个人中心的三个子页面,重写userbase.html中定义的user块,分别用于显示问答、评论、个人信息。
      {% extends 'userbase.html' %}
      {% block title %}question
      {% endblock %}{% block user %}<div class="col-md-8 column"><ul class="list-unstyled">{% for foo in comments %}<li class="list-group-item" style="list-style: none;"><span class="badge pull-right">{{ foo.creat_time }}</span><br><p>文章标题:<a href="{{ url_for('question_detail',question_id=foo.id)}}">{{ foo.question.question}}</a></p><p>主要内容:{{ foo.question.questionDetail }}</p><small><a>{{ foo.author.username }}</a></small><span class="badge">{{foo.creat_time}}</span><br></li>{% endfor %}</ul></div>
      {% endblock %}
      {% extends 'userbase.html' %}
      {% block title %}comment
      {% endblock %}{% block user %}<div class="page-header" style="margin:0 auto;width:1000px;height:auto;border-style:groove;"><h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{username}} <small>个人评论<span class="badge"></span> </small></h3><ul class="list-unstyled">{% for foo in comments %}<li class="list-group-item"style="list-style: none;"><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="">{{foo.detail}}</p></li>{% endfor %}</ul>
      </div>{% endblock %}
      {% extends 'userbase.html' %}
      {% block title %}comment
      {% endblock %}{% block user %}<div class="page-header"style="margin:0 auto;width:1000px;height:auto;border-style:groove;" ><h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{username}}<small>个人信息<span class="badge"></span> </small></h3><ul class="list-group" style="list-style: none;"><li class="list-group-item">用户:{{username}}</li><li class="list-group-item">编号:</li><li class="list-group-item">昵称:</li><li class="list-group-item">文章篇:</li></ul>
      </div>{% endblock %} 

       

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

转载于:https://www.cnblogs.com/lyx1997/p/8042272.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281616.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智慧城市免费WiFi覆盖怎么实施?武邑开启智慧生活模式

“真没想到武邑这个国家级贫困县也能够随地使用无线网络&#xff0c;我初次考察就喜欢上了这里。”准备前来武邑县投资的客商王先生说。日前&#xff0c;随着县城广场、商场等公共场所的免费WiFi覆盖&#xff0c;及移动电子商务借势O2O的快速发展&#xff0c;衡水市武邑县正在逐…

Uno开发的小游戏

大家好&#xff0c;我是沙漠尽头的狼。刚在微信群里逛&#xff0c;有网友发了Uno的在线小游戏&#xff0c;站长觉得不错&#xff0c;简单分享下&#xff1a;群聊涨见识Uno是什么&#xff1f;使用 C# 和 WinUI 实现像素完美的多平台应用程序&#xff0c;用于构建适用于 Windows、…

sqlplus命令行登录oracle数据库的N种方法盘点

欢迎访问我的个人博客IT废柴&#xff0c;本文永久链接移至&#xff1a;sqlplus命令行登录oracle数据库的N种方法盘点 sqlplus有几种登陆方式Oracle数据库&#xff0c; 比如&#xff1a; 1.以操作系统权限认证的oracle sys管理员登陆 C: > sqlplus "/as sysdba" 2…

拉美光伏新兴市场热潮将至

国际油价下滑对油气生产国的影响是不言而喻的&#xff0c;受此拖累&#xff0c;可再生能源产业发展也承受了一定压力。然而&#xff0c;在多国拥有油气资源的拉美地区&#xff0c;情况却恰恰相反&#xff0c;许多国家的可再生能源产业非但没有受低油价拖累&#xff0c;反而快速…

linux下常见生产脚本,不看后悔的Linux生产服务器Shell脚本分享(2)

一、MySQL的热备份脚本这是MySQL的备份方式之一&#xff0c;脚本如下&#xff1a;#!/bin/bashPATH/usr/local/sbin:/usr/bin:/bin# The Directory of BackupBACKDIR/usr/mysql_backup# The Password of MySQLROOTPASSpassword# Remake the Directory of Backuprm -rf $BACKDIRm…

兄弟连学python——MongoDB相关

1.常用的命令 show dbs 显示数据库列表use dbname 进入dbname数据库&#xff0c;大小写敏感&#xff0c;没有这个数据库也不要紧show collections 显示数据库中的集合&#xff0c;相当于表格2.创建&新增 db.users.save({"name":"lecaf"}) …

WPF-12 路由事件之二

WPF 为我们提供了许多不同的事件处理机制——它们是冒泡、隧道和直接的。这些都称为路由事件直接事件直接在事件源上处理&#xff0c;这个有点像WinForms中的按钮OnClick事件&#xff0c;直接在事件处理程序中处理业务冒泡事件当事件没有被元素&#xff08;比如一个文本框&…

对01背包的分析与理解(图文)

首先谢谢Christal_R的文章(点击转到链接)让我学会01背包 本文较长&#xff0c;但是长也意味着比较详细&#xff0c;希望您可以耐心读完。 题目: 现在有一个背包(容器),它的体积(容量)为V,现在有N种物品(每个物品只有一个),每个物品的价值W[i]和占用空间C[i]都会由输入给出,现在…

linux内核源码剖析 博客,【Linux内存源码分析】页面迁移

页面迁移其实是伙伴管理算法中的一部分&#xff0c;鉴于其特殊性&#xff0c;特地另行分析。它是2007年的时候&#xff0c;2.6.24内核版本开发时&#xff0c;新增碎片减少策略(the fragmentation reduction strategy)所引入的。该策略也称之为反碎片技术(anti-gragmentation)。…

360的下一代SOC是这个样子的

几乎所有大型企业或机构的IT系统中&#xff0c;都会有安全运营中心(SOC)&#xff0c;它是网络安全防护体系从设备部署到系统建设&#xff0c;再到统一管理&#xff0c;这一发展过程的自然产物。但在国内的实际应用中&#xff0c;SOC的问题多多。 首先是数据类型不全&#xff0c…

【转载】利用scipy.misc等库对jpg以及png等图像数据预处理(用于深度学习喂数据)...

http://blog.csdn.net/qq_16949707/article/details/56306720 转载于:https://www.cnblogs.com/tenderwx/p/8057599.html

2018年下半年网络公式考试案例分析真题

阅读以下说明&#xff0c;回答问题1至问题3&#xff0c;将解答填入答题纸对应的解答栏内。【说明】某公司网络划分为两个子网&#xff0c;其中设备A是DHCP服务器&#xff0c;如图3-1所示。 【问题1】(6分&#xff0c;每空2分)DHCP在分配IP地址时使用 (1) 的方式&#xff0c; 而…

哪一个不是linux常用的shell,Linux下查看使用的是哪种shell的方法汇总

查看当前发行版可以使用的shell复制代码代码如下:[rootlocalhost ~]$ cat /etc/shells/bin/sh/bin/bash/sbin/nologin查看当前使用的shell方法一、最常用的查看shell的命令&#xff0c;但不能实时反映当前shell复制代码代码如下:[rootlocalhost ~]$ echo $SHELL/bin/bash二、下…

企业建设呼叫中心需要考虑哪些因素

呼叫中心发展至今&#xff0c;它的意义早已不是90年代末,只是简单地解决客户客服系统的要求。现在的呼叫中心有了新的使命&#xff0c;比如拓展成为一个信息服务中心&#xff0c;或者成为一个营销中心。客户如何能通过这样的手段&#xff0c;使企业与其他的企业之间形成差异化的…

【单片机入门】(三)应用层软件开发的单片机学习之路-----UART串口通讯和c#交互...

本文由网友投稿。作者&#xff1a;陈显达原文标题&#xff1a;【单片机入门】(三)应用层软件开发的单片机学习之路-----UART串口通讯和c#交互原文链接&#xff1a;https://www.cnblogs.com/1996-Chinese-Chen/p/16826558.html引言在第一章博客中&#xff0c;我们讲了Arduino对E…

linux中使用yum的优点,linux – 自动“yum update”以保证服务器安全 – 优点和缺点?...

这取决于根据我使用CentOS的经验,它非常安全,因为您只使用CentOS基本存储库.您是否应该偶尔尝试更新失败…是…在您应该期望出现故障的硬盘驱动器或偶尔出现故障的CPU的同一级别上.您永远不会有太多备份. &#x1f642;关于自动更新的好处是,您可以比手动修补更快(因此更安全).…

高能力成熟度软件企业中软件质量工程师的职责

随着科学技术的不断发展进步&#xff0c;企业之间的竞争越来越激烈。软件企业要想在竞争中发展生存&#xff0c;提高软件产品质量已成为必要条件。在一些高能力成熟度软件企业中&#xff0c;专门成立了质量保证和控制职能部门&#xff0c;起着提高项目管理透明性和确保软件产品…

存储过程和函数的区别

存储过程和函数的区别存储过程和函数目的是为了 可重复地 执行操作数据库的sql语句的集合。区别是写法和调用上。写法上&#xff1a;存储过程的参数列表可以有输入参数、输出参数、可输入输出的参数&#xff1b;函数的参数列表只有输入参数&#xff0c;并且有return <返回值…

机器学习案例丨基于广泛和深入的推荐 - 餐厅评级预测

点击上方蓝字关注我们&#xff08;本文阅读时间&#xff1a;18分钟&#xff09;Microsoft Azure Machine Learning Studio 是微软强大的机器学习平台&#xff0c;在设计器中&#xff0c;微软内置了15个场景案例&#xff0c;但网上似乎没有对这15个案例深度刨析的分析资料&#…

css linux 等宽字体,比例字体等宽字体

我们都知道等宽字体和比例字体的区别&#xff0c;就在于比例字体(Monospaced Font)即每个字母宽度是按一定比例自动调整的&#xff0c;而等宽字体(Proportional font)则是固定宽度&#xff0c;固定间距&#xff0c;字体的每一个字母和字符所占的水平空间都是相同的。比例字体&a…