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 'jianshu.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="#">全部問答</a></li><li role="presentation"><a href="#">全部評論</a></li><li role="presentation"><a href="#">個人信息</a></li> </ul>{% block user %}{% endblock %} {% endblock %}

?

3、讓上次作業完成的個人中心頁面，繼承user.html，原個人中心就自動有了標簽頁導航。

{% extends 'user.html' %} {% block title %}個人中心{% endblock %} {% block user %}<br><div class="page-header"><br><h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}<br><small>全部問答<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>全部評論<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>個人信息<span class="badge"></span></small></h3><ul class="list-group" style=""><li class="list-group-item">用戶：{{ username }}</li><li class="list-group-item">編號：{{ id }}</li><li class="list-group-item">昵稱：{{ username }}</li></ul></div> {% endblock %}

　　

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

{% extends 'user.html' %} {% block user %}<div>全部問答</div> {% endblock %} {% extends 'user.html' %} {% block user %}<div>全部評論</div> {% endblock %} {% extends 'user.html' %} {% block user %}<div>個人信息</div> {% endblock %}

?

5、思考 如何實現點標簽頁導航到達不同的個人中心子頁面。

轉載于:https://www.cnblogs.com/lintingting/p/8033319.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。