zoukankan      html  css  js  c++  java
  • 12.14

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

    {% extends 'base.html' %}
    {% block title %}个人中心{% endblock %}
    {% block head %}
        <style>
        .nav-ul li{
            float: left;
            list-style: none;
            margin: 10px;
            border-bottom: outset;}
        </style>
    {% endblock %}
    {% block main %}
    <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="#">informations</a></li>
    </ul>
    {% block test %}{% endblock %}
    {% endblock %}

    让上次作业完成的个人中心页面,继承user.html,原个人中心就自动有了标签页导航。

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

    {% extends 'test.html' %}
    {% block title %}个人中心{% endblock %}
    {% block head %}
        <!-- 引入 Bootstrap -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/usercenter') }}">
        <style>
        .nav-ul li{
            float: left;
            list-style: none;
            margin: 10px;
            border-bottom: outset;}
        </style>
    {% endblock %}
    {% block test %}
        <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="padding-left: 0px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 0px 0px;">
                {% for foo in questions %}
                    <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>
    {% extends 'test.html' %}
    {% block title %}个人中心{% endblock %}
    {% block head %}
        <!-- 引入 Bootstrap -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/usercenter.css') }}">
        <style>
        .nav-ul li{
            float: left;
            list-style: none;
            margin: 10px;
            border-bottom: outset;}
        </style>
    {% endblock %}
    {% block test %}
    
    
        <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="padding-left: 0px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 0px 0px;">
                {% 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>
    
    
    {% endblock %}
    {% extends 'test.html' %}
    {% block title %}个人中心{% endblock %}
    {% block head %}
        <!-- 引入 Bootstrap -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/usercenter.css') }}">
        <style>
        .nav-ul li{
            float: left;
            list-style: none;
            margin: 10px;
            border-bottom: outset;}
        </style>
    {% endblock %}
    {% block test %}
    
        <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">
                <li class="list-group-item">用户:{{ username }}</li>
                <li class="list-group-item">编号:</li>
                <li class="list-group-item">昵称:</li>
            </ul>
        </div>
    {% endblock %}
  • 相关阅读:
    s3c2440 移值u-boot-2016.03 第6篇 支持mtd yaffs 烧写
    s3c2440 移值u-boot-2016.03 第5篇 支持dm9000 识别
    s3c2440 移值u-boot-2016.03 第4篇 支持NAND flash 识别
    [转]MySQL数据库引擎
    [转]史上最全的MSSQL复习笔记
    [转]解析json:与array,list,map,bean,xml相互转化
    [转]Web程序员必须知道的 Console 对象里的九个方法
    大数据Spark超经典视频链接全集
    王家林 大数据Spark超经典视频链接全集[转]
    [转]WEB开发者必备的7个JavaScript函数
  • 原文地址:https://www.cnblogs.com/chenyanxi123/p/8039781.html
Copyright © 2011-2022 走看看