个人中心标签页导航

最新推荐文章于 2024-07-22 15:34:59 发布

weixin_30247781

最新推荐文章于 2024-07-22 15:34:59 发布

阅读量40

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/123hi/p/8038670.html

本文介绍了一种使用HTML和CSS实现用户中心页面的方法，并通过标签页导航来组织不同的子页面，如问题、评论和个人信息等。文章还讨论了如何在Django模板系统中通过继承和重写来构建这些页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新页面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>
```
<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>
```

user.html继承base.html。
重写title,head,main块.
将上述<ul>放在main块中.
定义新的块user。

{% extends "daohang.html"%}
{% block title%}你好{% endblock%}

{% block head%}
    <style>
        .nav_ul li{
        float:left;
        list-style:none;
        margin:20px;
        border-bottom:outset;
        }
    </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%}

让上次作业完成的个人中心页面，继承user.html，原个人中心就自动有了标签页导航。
```
{% extends 'user.html'%}
```

制作个人中心的三个子页面，重写user.html中定义的user块。

{% extends 'usercenter.html' %}

{% block user %}
    <div class="page-header">
    <span class="glyphicon glyphicon-info-sign" aria-hidden="true">问答</span>
    <ul class="list-group"></ul>
    </div>

{% endblock %}

{% extends 'usercenter.html' %}

{% block user %}
    <div class="page-header">
    <span class="glyphicon glyphicon-info-sign" aria-hidden="true">全部评论</span>
    <ul class="list-group"></ul>
    </div>

{% endblock %}

{% extends 'usercenter.html' %}

{% block user %}
    <div class="page-header">
    <span class="glyphicon glyphicon-info-sign" aria-hidden="true">个人信息</span>
    <ul class="list-group"></ul>
    </div>

{% endblock %}