个人中心标签页导航
- 新页面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>
12345<
ul
class="nav_ul">
<
li
role="presentation"><
a
href="#">questions</
a
> </
li
>
<
li
role="presentation"><
a
href="#">comments</
a
> </
li
>
<
li
role="presentation"><
a
href="#">information</
a
> </
li
>
</
ul
>
- user.html继承base.html。
重写title,head,main块.
将上述<ul>放在main块中.
定义新的块user。123456789101112131415161718192021222324{% extends "myweb.html" %}
{% block usertitle %}个人中心{% endblock %}
{% block userhead %}
<
style
>
.nav_ul li{
list-style: none;
float: left;
margin: 10px;
}
</
style
>
{% endblock %}
{% block mywebbody %}
<
ul
class="nav_ul">
<
li
role="presentation"><
a
href="#">questions</
a
> </
li
>
<
li
role="presentation"><
a
href="#">comments</
a
> </
li
>
<
li
role="presentation"><
a
href="#">information</
a
> </
li
>
</
ul
>
{% block usercenterbody %}{% endblock %}
{% endblock %}
</
html
>
- 让上次作业完成的个人中心页面,继承user.html,原个人中心就自动有了标签页导航。
1234567891011121314151617181920212223242526272829303132333435363738394041{% extends "user.html" %}
{% block usercenterbody %}
<
div
class="page-header">
<
h3
><
span
class="glyphicon glyphicon-user" aria-hidden="true"></
span
>{{ username }}<
br
><
small
>全部问答<
span
class="badge>"></
span
> </
small
> </
h3
>
<
ul
class="list-group"style="margin:10px">
{% for foo in comments %}
<
li
class="list-group-item">
<
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="align-content: center">{{ foo.detail }}</
p
>
</
li
>
{% endfor %}
</
ul
>
</
div
>
<
div
class="page-header">
<
h3
><
span
class="glyphicon glyphicon-user" aria-hidden="true"></
span
>{{ user }}<
br
><
small
>全部评论<
span
class="badge>"></
span
> </
small
> </
h3
>
<
ul
class="list-group"style="margin:10px">
{% for foo in comments %}
<
li
class="list-group-item">
<
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="align-content: center">{{ foo.detail }}</
p
>
</
li
>
{% endfor %}
</
ul
>
</
div
>
<
div
class="page-header">
<
h3
><
span
class="glyphicon glyphicon-user" aria-hidden="true"></
span
>{{ user }}<
br
><
small
>个人信息<
span
class="badge>"></
span
> </
small
> </
h3
>
<
ul
class="list-group"style="margin:10px">
<
li
class="list-group-item">用户:{{ username }}</
li
>
<
li
class="list-group-item">编号:</
li
>
<
li
class="list-group-item">昵称:</
li
>
</
ul
>
</
div
>
{% endblock %}
- 制作个人中心的三个子页面,重写user.html中定义的user块。
- 思考 如何实现点标签页导航到达不同的个人中心子页面。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步