Python web flask框架快速搭建网站

目录结构：

app.py 主程序文件
static 静态资源文件夹
templates 模板文件夹

html 实例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <title>淘宝优惠购</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{{url_for('static', filename='layui.css')}}"  media="all">
    <script src="{{url_for('static', filename='layui.js')}}" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

    <style>
        a:hover{
            text-decoration: none;
            box-shadow: 0 2px 4px rgba(0,0,0,.1);

        }
        .shop-item image{
            height: 100px;
            width: 100px;
        }
        .site-demo-flow{
            height: 100%;
            /*width: 1000px;*/
            /*border: 2px solid red;*/
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .site-demo-flow:hover{
            box-shadow: 0 2px 4px #f5f6f7;

        }
         .shop-item{
            box-shadow: 0 4px 4px rgba(0,0,0,.1);
            /*border: 2px solid blue;*/
    /*         width: 0.76rem;*/
    /*height: 0.77rem;*/
            width: 20%;
            height: 600px;
             padding: 30px;

            margin: 65px;
            background: #fff;
        }
        .hui-price {
            vertical-align: middle;
            font-size: 30px;
            color: #FF0036;
            /*font-weight: bolder;*/
            font-family: Arial;
            -webkit-font-smoothing: antialiased;
        }
        .yuan-price {
            font-size: 18px;
            text-decoration: line-through;
            font-size: 14px;
        }
        .title{
            padding-bottom: .2em;
            line-height: 1;
            font-size: 16px;
            font-weight: 700;
            color: #000;
        }
        .img-responsive {
            display: block;
            height: auto;
            max-width: 100%;
        }
        .coupons {
            /*border: 2px solid red;*/
            text-align: center;
            margin: 10px auto;
        }
        .btn-danger{
            margin: 10px auto;
        }
    </style>
</head>


<body>

<div class="container-fluid">

    <div class="site-demo-flow  " id="LAY_demo3">
        {% for i in list %}
        <div class="shop-item">
            <a href="{{ i[3] }}" target="_blank">
                <img lay-src="{{ i[4] }}" class="img-responsive">

                <div class="coupons">
                    <div class="title">{{ i[0] }}</div>
                    <div class="yuan-price">原价：{{ i[1] }}</div>
                    <div class="hui-price">优惠价：{{ i[2] }}</div>
                    <div class="quan-btn">
                        <button type="button" class="btn btn-danger">立即领券</button>
                    </div>

                </div>

            </a>
        </div>
        {% endfor %}
    </div>
</div>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->


<script>
    layui.use('flow', function(){
        var flow = layui.flow;
        //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载（当然你也可以指定相关img）
        flow.lazyimg();
    });
</script>

</body>
</html>

最终效果图：

image.png

感谢阅读， 欢迎关注！