-
新页面user.html,用<ul ><li role="presentation"> 实现标签页导航。
<ul class="zx"> <li role="presentation"><a href="#">question</a></li> <li role="presentation"><a href="#">comments</a></li> <li role="presentation"><a href="#">infomation</a></li> </ul>
<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> - user.html继承base.html。
重写title,head,main块.
将上述<ul>放在main块中.
定义新的块user。<!DOCTYPE html> <html lang="en"> <head> {% extends 'test1.html' %} <meta charset="UTF-8"> {% block title %} 个人中心 {% endblock %} {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/user.css') }}" charset="utf-8"/> {% endblock %} </head> <body> {% block body %} <ul class="zx"> <li role="presentation"><a href="#">question</a></li> <li role="presentation"><a href="#">comments</a></li> <li role="presentation"><a href="#">infomation</a></li> </ul> {% block user %} {% endblock %} {% endblock %} </body> </html>
- 让上次作业完成的个人中心页面，继承user.html，原个人中心就自动有了标签页导航。
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title> {% block title %} 用户中心 {% endblock %} </title> {% block head %} {% endblock %} </head> <body> {% block user %} <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="page-header"> <h3>{{ username }}><br> <small>全部问答 <span class="badge"></span></small> </h3> <ul> {% for foo in question %} <li> <a href="#">{{ foo.username }}</a> <span class="badge">{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> {% endfor %} </ul> </div> </div> </div> <h3>{{ username }}><br> <small>全部评论 <span class="badge"></span></small> </h3> {% for foo in comments %} <ul style="padding-left: 0px;margin-bottom: 0px;"> <li style=" 800px"> <a href="">{{ foo.author.username }}</a> <span class="badge">{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> {% endfor %} </ul> </div> <div> <h3>{{ user }}<br> <small>个人信息</small> </h3> <ul style="padding-left: 0px;margin-bottom: 0px;"> <li>用户：</li> <li>编号：</li> <li>昵称：</li> </ul> </div> {% endblock %} </body> </html>
- 制作个人中心的三个子页面，重写user.html中定义的user块。
- 思考 如何实现点标签页导航到达不同的个人中心子页面。
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title> {% block title %} 用户中心 {% endblock %} </title> {% block head %} {% endblock %} </head> <body> {% block user %} <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="page-header"> <h3>{{ username }}><br> <small>全部问答 <span class="badge"></span></small> </h3> <ul> {% for foo in question %} <li> <a href="#">{{ foo.username }}</a> <span class="badge">{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> {% endfor %} </ul> </div> </div> </div> <h3>{{ username }}><br> <small>全部评论 <span class="badge"></span></small> </h3> {% for foo in comments %} <ul style="padding-left: 0px;margin-bottom: 0px;"> <li style=" 800px"> <a href="">{{ foo.author.username }}</a> <span class="badge">{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> {% endfor %} </ul> </div> <div> <h3>{{ user }}<br> <small>个人信息</small> </h3> <ul style="padding-left: 0px;margin-bottom: 0px;"> <li>用户：</li> <li>编号：</li> <li>昵称：</li> </ul> </div> {% endblock %} </body> </html>
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title> {% block title %} 用户中心 {% endblock %} </title> {% block head %} {% endblock %} </head> <body> {% block user %} <div> <h3>{{ user }}<br> <small>个人信息</small> </h3> <ul style="padding-left: 0px;margin-bottom: 0px;"> <li>用户：</li> <li>编号：</li> <li>昵称：</li> </ul> </div> {% endblock %} </body> </html>