博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
个人中心标签页导航
阅读量:4587 次
发布时间:2019-06-09

本文共 3966 字,大约阅读时间需要 13 分钟。

  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 'test1.html' %}
    {
    % block title %} 个人中心 {
    % endblock %} {
    % block head %}
    {
    % endblock %}{
    % block body %}
    {
    % block user %} {
    % endblock %}{
    % endblock %}

     

  3. 让上次作业完成的个人中心页面,继承user.html,原个人中心就自动有了标签页导航。
        {
    % extends 'user.html' %}
    {<div></div> % block title %} 用户中心 {<div></div> % endblock %} {
    % block head %} {
    % endblock %}{
    % block user %}

    {
    { username }}>
    全部评论

    {
    % for foo in comments %}

    {
    { user }}
    个人信息

    • 用户:
    • 编号:
    • 昵称:
    {
    % endblock %}

     

  4. 重写user.html中定义的user块。
  5. 思考 如何实现点标签页导航到达不同的个人中心子页面。
  6.     {
    % extends 'user.html' %}
    {<div></div> % block title %} 用户中心 {<div></div> % endblock %} {
    % block head %} {
    % endblock %}{
    % block user %}

    {
    { username }}>
    全部评论

    {
    % for foo in comments %}

    {
    { user }}
    个人信息

    • 用户:
    • 编号:
    • 昵称:
    {
    % endblock %}
        {
    % extends 'user.html' %}
    {<div></div> % block title %} 用户中心 {<div></div> % endblock %} {
    % block head %} {
    % endblock %}{
    % block user %}

    {
    { user }}
    个人信息

    • 用户:
    • 编号:
    • 昵称:
    {
    % endblock %}

     

 

转载于:https://www.cnblogs.com/Carrie-chong/p/8033197.html

你可能感兴趣的文章
Country Road
查看>>
Java:基本语法
查看>>
HTTP头的Expires与Cache-control
查看>>
(8)盒子的定位
查看>>
ReactJS学习系列课程(React ref的使用)
查看>>
ASIHTTPRequest 详解 例子
查看>>
小L 的二叉树(洛谷 U4727)
查看>>
从Azure上构建Windows应用程序映像
查看>>
并发系统实践1
查看>>
【beta】Scrum站立会议第6次....11.8
查看>>
java XML解析-我们到底能走多远系列(12)
查看>>
leetcode 16. 3Sum Closest JAVA
查看>>
多线程并发库
查看>>
Props 和 IActorRef 3
查看>>
转载 页面加载完后执行js代码
查看>>
远程SSH连接服务与基本排错
查看>>
浏览器渲染页面原理
查看>>
VC dumpbin dll 导出 lib
查看>>
【Lua】Lua的几点优化原则
查看>>
兼容IE8以下,获取className节点的元素(document.getElementsByClassName()兼容写法)。
查看>>