当前位置: 首页>编程语言>正文

flask template日期格式化 flask template文件夹位置

模板渲染:

在flask中,视图函数可以直接通过render_template进行模板渲染。在flask中,模板文件是存放在template文件夹中:在调用模板文件的时候,模板文件的路径从template文件夹之后开始写,必须写完整的路径,在渲染模板的时候,默认是从项目的templates文件夹查找模板。

from flask import Flask, render_template

app = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件


@app.route('/')
def hello_world():
    return 'Hell Wold!'


@app.route('/index/')
def index():
    return render_template("index/index.html")


if __name__ == '__main__':
    app.run(debug=True)     # 开启debug模式

flask template日期格式化 flask template文件夹位置,flask template日期格式化 flask template文件夹位置_flask template日期格式化,第1张

如果不想将模板文件放到template文件夹下,则可以修改Flask默认的模板文件路径,进入Flask的定义文件,可以看到Flask的初始化的默认参数,在初始化Flask的时候修改对应的路径即可:

flask template日期格式化 flask template文件夹位置,flask template日期格式化 flask template文件夹位置_html_02,第2张

模板传参及其技巧:

在模板渲染的时候,同时也需要将后台的数据渲染到前台。

后端的代码:

from flask import Flask, render_template

app = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件


@app.route('/')
def hello_world():
    return 'Hell Wold!'


@app.route('/index/')
def index():
    return render_template("index/index.html", username="Knight-boy", age=18, country="China")    # 传递参数


if __name__ == '__main__':
    app.run(debug=True)     # 开启debug模式

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问首页</title>
    <style>
        .container{
            width: 200px;
            height: 200px;
            border: 1px solid blanchedalmond;
            background: burlywood;
        }
    </style>
</head>
<body>
    <div class="container">
        <h4>用户名: {{ username }}</h4>
        <h4>年龄: {{ age }}</h4>
        <h4>国别: {{ country }}</h4>
    </div>
</body>
</html>

渲染的结果:

flask template日期格式化 flask template文件夹位置,flask template日期格式化 flask template文件夹位置_加载_03,第3张

如果需要传入的参数较多,可以将参数写入到字典中,在进行传参

后台代码:

from flask import Flask, render_template

app = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件


@app.route('/')
def hello_world():
    return 'Hell Wold!'


@app.route('/index/')
def index():
    info = {
        "username": "knight",
        "age": 33,
        "country": "China"
    }
    return render_template("index/index.html", info=info)  # 这里参数名字与变量名相同即可


if __name__ == '__main__':
    app.run(debug=True)     # 开启debug模式

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问首页</title>
    <style>
        .container{
            width: 200px;
            height: 200px;
            border: 1px solid blanchedalmond;
            background: burlywood;
        }
    </style>
</head>
<body>
    <div class="container">
        <h4>用户名: {{ info["username"] }}</h4>
        <h4>年龄: {{ info["age"] }}</h4>
        <h4>国别: {{ info["country"] }}</h4>
    </div>
</body>
</html>

还有一种写法,在前端代码中,如果不需要通过字典名获取变量,可以在后端渲染页面传入参数的时候,将字典转换成关键字参数即可,(这种方法使用较多)

from flask import Flask, render_template

app = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件


@app.route('/')
def hello_world():
    return 'Hell Wold!'


@app.route('/index/')
def index():
    info = {
        "username": "knight-b",
        "age": 20,
        "country": "China"
    }
    return render_template("index/index.html", **info)


if __name__ == '__main__':
    app.run(debug=True)     # 开启debug模式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问首页</title>
    <style>
        .container{
            width: 200px;
            height: 200px;
            border: 1px solid blanchedalmond;
            background: burlywood;
        }
    </style>
</head>
<body>
    <div class="container">
        <h4>用户名: {{ username }}</h4>
        <h4>年龄: {{ age }}</h4>
        <h4>国别: {{ country }}</h4>
    </div>
</body>
</html>

模板中使用URL_FOR

在模板中也会使用url_for,例如在首页中,一般会有一个跳转按钮,再点击跳转按钮之后,会跳转到登录界面

{{   适合存放变量   }}

{%  适合执行逻辑代码  %}

代码实现:在html代码中,可以使用url_for获取视图函数对应的url

后端代码:

from flask import Flask, render_template

app = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件


@app.route('/')
def index():
    return render_template("HTML/index.html")


@app.route('/login/')
def login():
    return render_template("HTML/login.html")


if __name__ == '__main__':
    app.run(debug=True)     # 开启debug模式

首页代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问首页</title>
    <style>
        .container{
            width: 200px;
            height: 150px;
            border: 1px solid blanchedalmond;
            background: burlywood;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="{{ url_for("login") }}">登陆</a>
    </div>
</body>
</html>

登录页代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <style>
        .container{
            width: 250px;
            height: 170px;
            border: 1px solid black;
            background: aquamarine;
            margin: 20px auto;
        }
        
        .container .username
        {
            display: block;
            margin: 0 auto;
            margin-top: 15px;
        }
        
        .container .password{
            display: block;
            margin: 0 auto;
            margin-top: 15px;
        }
        
        .container .sub{
            display: block;
            margin: 0 auto;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" placeholder="用户名" class="username">
        <input type="password" placeholder="密码" class="password">
        <input type="submit" class="sub">
    </div>
</body>
</html>

过滤器基本使用:

过滤器是通过管道符号(|)进行使用的,例如{{  name|length  }},将返回name的长度。过滤器相当于一个函数,把当前的变量传入到过滤器中,过滤器根据自己的功能,再返回相应的值,之后再将结果渲染到页面。jingja2中内置了很多的过滤器,常用到的过滤器有:

1.  abs(value),       -1 | abs

2. first(value):    返回一个序列的第一个值    value | first

3. last(value):    返回最后一个值                  value | last

更多的可以参考jingja2的手册:

后端代码:

from flask import Flask, render_template

app = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件


@app.route('/')
def index():
    return render_template("HTML/index.html", position=-6)


if __name__ == '__main__':
    app.run(debug=True)     # 开启debug模式

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问首页</title>
    <style>
        .container{
            width: 200px;
            height: 150px;
            border: 1px solid blanchedalmond;
            background: burlywood;
        }
    </style>
</head>
<body>
    <div class="container">
        <span>The position is : {{ position|abs }}</span>
    </div>
</body>
</html>

default过滤器详解:

对于传入的变量,如果有值,就返回变量的值,否则就返回default值,再在过滤器中,设置boolean参数为真,才可以将空字符串,空列表,null,None当作false来处理,否则即使有这些值,也会当作有值来处理。

escape过滤器:

转义字符,会将<  >等符号转义成html中的符号。例如: content | escape, jingja2中的转义是默认开启的。

safe过滤器:

关闭字符串的自动转义 ,功能与{%autoescape off%} , {%endautoescape%}的类似

first / last过滤器:

获取序列的第一个或者最后一个元素

format过滤器:

用于格式化输出字符串  {{  “%s -- %s" }} | format(str1, str2)

length过滤器:
获取序列的长度

join过滤器:

将一个序列用特定的符号进行拼接

int, float, string过滤器:(用于模板的条件渲染)

对数值进行转换

lower, upper过滤器:

进行大小写转换

wordcount过滤器:

计算一个字符串中的单词数量

replace过滤器

实现字符串中的替换功能,replace(oldstr, newstr)

truncate过滤器:

截取一定长度的字符串,truncate(value, length, killwords=false), 后面的内容使用...表示,用于当显示内容较多时,显示缩略的内容。

stringtags过滤器:

删除字符串中所有的html标签,如果出现多个空格,将替换成一个空格。

后端代码:

from flask import Flask, render_template

app = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件


@app.route('/')
def index():
    info = {
        "position": -6,
        "signature": None,
        "content": '<script>alert("Hell")</script>',
        "persons": ["tom", "lily", "Cart"],
        "age": "14",
        "text": "This is aa cc aa"
    }
    return render_template("HTML/index.html", **info)


if __name__ == '__main__':
    app.run(debug=True)     # 开启debug模式

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问首页</title>
    <style>
        .container{
            width: 300px;
            height: 250px;
            border: 1px solid blanchedalmond;
            background: burlywood;
        }
        .container span{
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <span>The position is : {{ position|abs }}</span>
        <span>The signature is : {{ signature|default('no signature at all', boolean=True) }}</span>
        <span>The content is: {{ content|escape }}</span>
        <span>The content is: {{ content|safe }}</span>   <!--关闭了自动转义,会弹出模态对话框-->
        <span>First person is {{ persons|first }}</span>
        <span>Last person is {{ persons|last }}</span>
        <sapn>format use: {{ "%s -- %s" | format("hello", "cute")}}</sapn>
        <span>Persons number is: {{ persons|length }}</span>
        {% if age|int >= 18 %}    <!--模板的条件选择渲染-->
            <span>The age is ok</span>
        {% else %}
            <span>The age is not ok</span>
        {% endif %}
        <span>Replace result: {{ text|replace("aa", "***") }}</span>
        <span>Truncated text is: {{ text|truncate(length=5) }}</span>
    </div>
</body>
</html>

自定义过滤器:

在Jingja2内置的过滤器不能满足需求的时候,需要使用自定义的过滤器:

from flask import Flask, render_template

app = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件
app.config["TEMPLATES_AUTO_RELOAD"] = True          # 保证模板修改后能够自动加载


@app.route('/')
def index():
    info = {
        "text": "This is aa cc aa"
    }
    return render_template("HTML/index.html", **info)


@app.template_filter("cut_xx")     # 注册过滤器的名称
def cut_xx(string, newstr, oldstr):
    """
    自定义过滤器
    :param string:
    :param newstr:
    :param oldstr:
    :return:
    """
    value = string.replace(oldstr, newstr)
    return value


if __name__ == '__main__':
    app.run(debug=True)     # 开启debug模式

自定义时间处理过滤器:

from flask import Flask, render_template
from datetime import datetime


app = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件
app.config["TEMPLATES_AUTO_RELOAD"] = True          # 保证模板修改后能够自动加载


@app.route('/')
def index():
    info = {
        "text": "This is aa cc aa",
        "content": None,
        "create_time": datetime(2020, 4, 5, 2, 12, 22)
    }
    return render_template("HTML/index.html", **info)


@app.template_filter("cut_xx")     # 注册过滤器的名称
def cut_xx(string, newstr, oldstr):
    """
    自定义过滤器
    :param string:
    :param newstr:
    :param oldstr:
    :return:
    """
    value = string.replace(oldstr, newstr)
    return value


@app.template_filter("handle_time")
def handle_time(time):
    """
    发表时间距离现在时间
    1. 一分钟以内,显示刚刚
    2. 一小时以内,显示xx分钟
    3. 24小时以内,显示xx小时
    4. 大于二十四小时,显示xx天前
    :param time:
    :return:
    """
    if isinstance(time, datetime):
        time_span = datetime.now() - time
        seconds = time_span.total_seconds()
        if seconds < 60:
            return "刚刚"
        elif seconds < 60 * 60:
            return "%d分钟前" % (seconds/60)
        elif seconds < 24 * 60 * 60:
            return "%d小时以前" % (seconds/60/60)
        else:
            return "%d天以前" % (seconds/24/60/60)
    else:
        return time


if __name__ == '__main__':
    app.run(debug=True)     # 开启debug模式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问首页</title>
    <style>
        .container{
            width: 300px;
            height: 250px;
            border: 1px solid blanchedalmond;
            background: burlywood;
        }
        .container span{
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <span>The time is: {{ create_time|handle_time }}</span>
    </div>
</body>
</html>

实现效果:

flask template日期格式化 flask template文件夹位置,flask template日期格式化 flask template文件夹位置_flask template日期格式化_04,第4张

jingja2模板中条件判断,循环:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问首页</title>
    <style>
       .right{
           color: #7666c1;
       }
        .wrong{
            color: #19a71f;
        }
    </style>
</head>
<body>
    {% if username=="tom" %}
        <p class="right">hello, this is tom</p>
    {% else %}
        <p class="wrong">This is not tom</p>
    {% endif %}
</body>
</html>

for循环可以遍历任何一个序列,包括列表,字典,元组,并且可以进行反向遍历:

但是jingja模板中,不支持用continue和break来控制循环,且for循环中还提供了以下的变量,用来获取遍历的状态:

loop.index       当前迭代的索引(从1开始)

loop.index0        当前迭代的索引(从0开始)

loop.first       是否是第一次迭代,返回bool值

loop.last       是否是最后一次迭代,返回bool值

loop.length     序列的长度

jingja2中的for循环可以由else,如果序列为空的话,会进入else语句:

后端代码:

from flask import Flask, render_template


app = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件
app.config["TEMPLATES_AUTO_RELOAD"] = True          # 保证模板修改后能够自动加载


@app.route('/')
def index():
    info = {
        "username": "kit",
        "persons": ["kit", "hack", "tom", "nancy"],
        "books": [
            {"name": "gone with wind",
             "author": "unknown",
             "price": 120,
             "count": 35},
            {"name": "Pride and Prejudice",
             "author": "Jane Austing",
             "price": 30,
             "count": 120},
            {"name": "Become Jane",
             "author": "Jane Austing",
             "price": 670,
             "count": 40}
        ]
    }
    return render_template("HTML/index.html", **info)


if __name__ == '__main__':
    app.run(debug=True)     # 开启debug模式

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问首页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .person{
            width: 200px;
            border: 1px solid #fcffe8;
            margin-bottom: 20px;
            overflow: hidden;
        }

        .person p{
            font-size: 18px;
            color: #783476;
            font-weight: bold;
            display: block;
            background: aqua;
        }

        .person .info
        {
            width: 100%;
            line-height: 20px;
            font-size: 16px;
            color: #123;
            background: #917e46;
        }

        table
        {
            border: 1px solid black;
            text-align: center;
        }

        table td, th{
            border: 1px solid black;
        }

    </style>
</head>
<body>
    {% for person in persons %}
        <div class="person">
            <p>Hello, I am {{ person }}</p>
            <div class="info">
                coco
            </div>
        </div>
    {% else %}
        <div class="person">
            <p>Hello, no person</p>
            <div class="info">
                no one is here
            </div>
        </div>
    {% endfor %}

    <table>
        <thead>
            <tr>
                <th>index</th>
                <th>book name</th>
                <th>author</th>
                <th>price</th>
                <th>count</th>
            </tr>
        </thead>
        <tbody>
            {% for book in books %}
                {% if loop.first %}
                    <tr style="background: red">   <!--将第一行设置为背景颜色为红色-->
                {% elif loop.last %}
                    <tr style="background: orange">
                {% else %}
                    <tr>
                {% endif %}
                    <td>{{ loop.index }}</td>
                    <td>{{ book["name"] }}</td>
                    <td>{{ book["author"] }}</td>
                    <td>{{ book["price"] }}</td>
                    <td>{{ book["count"] }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

</body>
</html>

实际效果:

flask template日期格式化 flask template文件夹位置,flask template日期格式化 flask template文件夹位置_flask template日期格式化_05,第5张

jinja2中的宏,基本概念及使用:

宏类似于python中的函数,当一段代码需要反复使用的时候,可以将其封装为函数,这样在需要使用的时候就可以进行调用。模板中的宏可以传递参数,但是不能有返回值,可以将经常使用的代码片段放到宏中,然后把一些不固定的值抽取出来当成变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问首页</title>
    <style>

    </style>
</head>
<body>
    <!--定义宏-->
    {% macro input(name, type="text", value="") %}
        <input type="{{ type }}" name="{{ name }}" value="{{ value }}">
    {% endmacro %}
    
    <!--使用宏-->
    <div class="container">
        <label>
            <p>用户名</p>
            {{ input("username") }}
        </label>
        <label>
            <p>密码</p>
            {{ input("password", "password") }}
        </label>
        {{ input("submit", "submit", "提交") }}
    </div>
</body>
</html>

宏的导入和注意事项:
通常在开发中,会将宏进行分类,放到单独的文件中,所以在其他的文件中需要调用宏的时候,首先需要将宏导入到文件中,才能够调用。

导入宏的方式和python中导入包非常类似,import xxx, import xxx as yyy, from xxx import yyy

{% from "HTML/login_form.html" import input %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问首页</title>
    <style>

    </style>
</head>
<body>
    <!--使用宏-->
    <div class="container">
        <label>
            <p>用户名</p>
            {{ input("username") }}
        </label>
        <label>
            <p>密码</p>
            {{ input("password", "password") }}
        </label>
        {{ input("submit", "submit", "提交!") }}
    </div>
</body>
</html>

宏文件在其他文件夹中的时候,需要以templates文件夹为根目录,开始查找。不能通过相对路径查找。

如果需要在导入宏的时候,将当前一些模板的参数传给宏所在的模板,那么在导入的时候应该使用with context, 例如:
from  xxx import yyy with context

include 标签使用:

1. include表示将另一个文件中的代码,复制粘贴到include的当前位置。(有点c++中inline函数的意思)

2. include完全可以直接调用父模板中的变量:

3. 在include文件的路径时,只需要按照templates根目录进行加载,不能使用相对路径。跟import的路径形式一样

例如,分别定义header.html以及footer.html

flask template日期格式化 flask template文件夹位置,flask template日期格式化 flask template文件夹位置_html_06,第6张

header.html:(html +css代码)

<style>
    .nav{
            width: 100%;
            height: 40px;
            overflow: hidden;
            background: aquamarine;
    }

    .nav ul{
        font-size: 18px;
        color: black;
        line-height: 40px;
    }

    .nav ul li:hover{
        background: blue;
    }

    .nav ul li{
        float: left;
        margin-left: 15px;
    }
</style>

<div class="nav">
    <ul>
        <li>首页</li>
        <li>课程详情</li>
        <li>视屏教程</li>
        <li>关于我们~</li>
        <li>{{ username }}</li>
    </ul>
</div>

footer.html

<style>
    .footer{
            width: 100%;
            height: 200px;
            background: black;
            color: white;
        }
</style>

<div class="footer">
    这是底部footer
</div>

例如,需要在index.html中include文件header.html以及footer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问首页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }

        .middle{
            width: 100%;
            height: 300px;
            background: burlywood;
        }

    </style>
</head>
<body>
    {% include "common/header.html" %}

    <div class="middle">
        中间部分
    </div>

    {% include  "common/footer.html" %}
</body>
</html>

此时,如果需要在不同的页面中使用header.html和footer.html.只需要在页面中include这两个文件即可。
set,with语句以及模板中定义常量:

在模板中,应该如何定义常量:{%  set  username=" xxx"  %}

还可以使用with语句定义变量,with语句有起始和结束的地方,所以在with语句块内,可以使用该变量,但是在with语句块以外,不能使用这一变量。

{%  with username="hell"  %}

    可以使用变量username的语句块

{%  endwith  %}

<body>
    {% set username="Tom" %}     <!--定义常量-->
    <p>用户名:{{ username }}</p>

    {% with name="hell" %}
        <p>This is user {{ name }}</p>
    {% endwith %}
</body>

也可以定义一个空的with语句,在这个空的with语句中,可以使用set定义变量,定义的变量也只能在这个with语句块中使用:

{%  with  %}

    {%  set  name="xxx"  %}

    可以使用变量username的语句块

{%  endwith  %}

jingja2中加载静态文件:

静态文件: css文件,js文件,字体文件,图片文件,在flask中,静态文件存储在static文件夹下,在flask中加载静态文件,文件路径需要使用url_for("static", filename="路径")进行加载,其中路径需要以static文件夹为根目录。

flask template日期格式化 flask template文件夹位置,flask template日期格式化 flask template文件夹位置_html_07,第7张

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问首页</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
    <script rel="script" src="{{ url_for('static', filename='JS/index.js') }}"></script>

</head>
<body>
    <div class="container">
        加载静态文件
    </div>
    <div class="picture">
        <img src="{{ url_for('static', filename='images/sunset.png') }}" alt="">
    </div>
</body>
</html>

jingja2中模板继承:

1. 为什么需要模板继承:
模板继承可以把一些公用的代码单独抽取出来,放到父模板中,以后子模版直接继承就可以使用了,减少重复性的代码,修改起来也更加的简单。

2. 使用extends来指明继承的父模板,父模板的路径也是相对于templates文件夹下的绝对路径。

3. 在父模板中,只能实现一些公共的代码。这时候父模板应该有能力提供一个接口,让父模板来实现

实例:

父类的html代码:设计整个模板,header, footer是共用的部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}
        {% endblock %}
    </title>
    <style>
        .nav{
                width: 100%;
                height: 40px;
                overflow: hidden;
                background: aquamarine;
        }

        .nav ul{
            font-size: 18px;
            color: black;
            line-height: 40px;
        }

        .nav ul li:hover{
            background: blue;
        }

        .nav ul li{
            float: left;
            margin-left: 15px;
        }


        .footer{
            width: 100%;
            height: 200px;
            background: black;
            color: white;
        }

    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>首页</li>
            <li>课程详情</li>
            <li>视屏教程</li>
            <li>关于我们~</li>
        </ul>
    </div>

    {% block content %}
      <!--相当于占位的功能,具体的内容在子模板中实现-->
    {% endblock %}

    <div class="footer">
        这是底部footer
    </div>
</body>
</html>

定义自类的代码,继承父类:

<!--首页实现,继承自模板-->
{% extends "common/base_template.html" %}   <!--继承父类-->

{% block title %}
    CMS系统
{% endblock %}

{% block content %}
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .content-block{
            width: 100%;
            height: 200px;
            background: purple;
            margin-top: 20px;
        }
        .content-block span{
            font-size: 18px;
            color: #ab811e;
            display: block;
        }
        .content-block .item{
            width: 50%;
            height: 100px;
            margin-top: 20px;
            z-index: 2;
        }
    </style>

    <div class="content-block">
        <span>This is content</span>
        <div class="item"></div>
    </div>
{% endblock %}

----------------------------------------------------------------------------------------------------------------------------------------




https://www.xamrdz.com/lan/5n81923096.html

相关文章: