1、新頁(yè)面user.html,用<ul ><li role="presentation">?實(shí)現(xiàn)標(biāo)簽頁(yè)導(dǎo)航。
<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 'jianshu.html' %} {% block title %}個(gè)人中心{% 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="#">全部問(wèn)答</a></li><li role="presentation"><a href="#">全部評(píng)論</a></li><li role="presentation"><a href="#">個(gè)人信息</a></li> </ul>{% block user %}{% endblock %} {% endblock %}

?

3、讓上次作業(yè)完成的個(gè)人中心頁(yè)面，繼承user.html，原個(gè)人中心就自動(dòng)有了標(biāo)簽頁(yè)導(dǎo)航。

{% extends 'user.html' %} {% block title %}個(gè)人中心{% endblock %} {% block user %}<br><div class="page-header"><br><h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}<br><small>全部問(wèn)答<span class="badge"></span></small></h3><ul class="list-group" style="">{% for foo in post %}<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="">{{ foo.detail }}</p></li>{% endfor %}</ul></div><div class="page-header"><h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ user }}<br><small>全部評(píng)論<span class="badge"></span></small></h3><ul class="list-group" style="">{% 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="">{{ foo.detail }}</p></li>{% endfor %}</ul></div><div class="page-header"><h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ user }}<br><small>個(gè)人信息<span class="badge"></span></small></h3><ul class="list-group" style=""><li class="list-group-item">用戶：{{ username }}</li><li class="list-group-item">編號(hào)：{{ id }}</li><li class="list-group-item">昵稱：{{ username }}</li></ul></div> {% endblock %}

　　

4、制作個(gè)人中心的三個(gè)子頁(yè)面，重寫user.html中定義的user塊。

{% extends 'user.html' %} {% block user %}<div>全部問(wèn)答</div> {% endblock %} {% extends 'user.html' %} {% block user %}<div>全部評(píng)論</div> {% endblock %} {% extends 'user.html' %} {% block user %}<div>個(gè)人信息</div> {% endblock %}

?

5、思考 如何實(shí)現(xiàn)點(diǎn)標(biāo)簽頁(yè)導(dǎo)航到達(dá)不同的個(gè)人中心子頁(yè)面。

轉(zhuǎn)載于:https://www.cnblogs.com/lintingting/p/8033319.html

總結(jié)

以上是生活随笔為你收集整理的个人中心标签页导航的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。