個人中心標簽頁導航
阿新 • • 發佈:2017-12-13
png nds html 新頁面 class blog contain rfi vco
- 新頁面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> - user.html繼承base.html。
重寫title,head,main塊.
將上述<ul>放在main塊中.
定義新的塊user。 - 讓上次作業完成的個人中心頁面,繼承user.html,原個人中心就自動有了標簽頁導航。
- 制作個人中心的三個子頁面,重寫user.html中定義的user塊。
- 思考 如何實現點標簽頁導航到達不同的個人中心子頁面。
authorbase:
{% extends "base.html" %} {% block head %}{% endblock %} {% block main %} <div class="container"> <div class="row clearfix divcolor"> <div class="col-md-8 column"> <h2>{{ user.username }}</h2> <p>投稿總數:{{ tougao|length }} 評論數量:{{ pinglun|length }}</p> <hr> <ul class="nav nav-pills" role="tablist"> <li class="active"><a href="#">全部投稿</a></li> <li><a href="#">全部評論</a></li> <li><a href="#">用戶信息</a></li> </ul> <br> {% block author %}{% endblock %} </div> <div class="col-md-4 column"> </div> </div> </div> {% endblock %}
author1:
{% extends "authorbase.html" %} {% block title %}個人中心{% endblock %} {% block head %}{% endblock %} {% block author %} <div> <ul> {% for tg in tougao %} <a href="{{ url_for(‘digital‘,tougao_id=tg.id) }}" class="list-group-item list-group-item-light"> <li> <div class="page-header"> <h3>{{ tg.title }}</h3> <p><span class="glyphicon glyphicon-user">{{ tg.author.username }}</span> <span class="glyphicon glyphicon-time">{{ tg.time }}</span></p> </div> </li> </a> {% endfor %} </ul> </div> {% endblock %}
author2:
{% extends "authorbase.html" %} {% block title %}個人中心{% endblock %} {% block head %}{% endblock %} {% block author %} <div> <ul> {% for pl in pinglun %} <li class="list-group-item"> <p><span class="glyphicon glyphicon-user"></span>{{ pl.author.username }}</p> <p class="text-right"><span class="label label-default">{{ pl.time }}</span></p> <h4><a href="{{ url_for(‘digital‘,tougao_id=pl.tougao.id) }}">{{ pl.content }}</a></h4> </li> {% endfor %} </ul> </div> {% endblock %}
author3:
{% extends "authorbase.html" %} {% block title %}個人中心{% endblock %} {% block head %}{% endblock %} {% block author %} <ul class="list-group"> <li class="list-group-item">用戶名</li> <li class="list-group-item">性別:</li> <li class="list-group-item">等級:</li> <li class="list-group-item">頭像:</li> </ul> {% endblock %}
效果:
個人中心標簽頁導航