Flask 页面布局layout_main.html

Flask 页面布局layout_main.html 【源码来自编程浪子的flask点餐小程序】

web/templates/common/layout_main.html

python 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理后台</title>
    <link href="{{ buildStaticUrl('/bootstrap/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ buildStaticUrl('/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
    <link href="{{ buildStaticUrl('/css/style.css') }}" rel="stylesheet">
    {%block css %}{% endblock %}
<body>
<div id="wrapper">
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="profile-element text-center">
                        <img alt="image" class="img-circle" src="{{ buildStaticUrl('/images/common/logo.png') }}"/>
                        <p class="text-muted">编程浪子</p>
                    </div>
                    <div class="logo-element">
                        <img alt="image" class="img-circle" src="{{ buildStaticUrl('/images/common/logo.png') }}"/>
                    </div>
                </li>
                <li class="default">
                    <a href="{{ buildUrl('/') }}"><i class="fa fa-dashboard fa-lg"></i>
                        <span class="nav-label">仪表盘</span></a>
                </li>
                <li class="account">
                    <a href="{{ buildUrl('/account/index') }}"><i class="fa fa-user fa-lg"></i> <span
                            class="nav-label">账号管理</span></a>
                </li>
                <li class="food">
                    <a href="{{ buildUrl('/food/index') }}"><i class="fa fa-book fa-lg"></i> <span
                            class="nav-label">美餐管理</span></a>
                </li>
                <li class="member">
                    <a href="{{ buildUrl('/member/index') }}"><i class="fa fa-group fa-lg"></i> <span
                            class="nav-label">会员列表</span></a>
                </li>
                <li class="finance">
                    <a href="{{ buildUrl('/finance/index') }}"><i class="fa fa-rmb fa-lg"></i> <span
                            class="nav-label">财务管理</span></a>
                </li>
                <li class="stat">
                    <a href="{{ buildUrl('/stat/index') }}"><i class="fa fa-bar-chart fa-lg"></i> <span
                            class="nav-label">统计管理</span></a>
                </li>
            </ul>

        </div>
    </nav>

    <div id="page-wrapper" class="gray-bg" style="background-color: #ffffff;">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="javascript:void(0);"><i class="fa fa-bars"></i> </a>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li>
						<span class="m-r-sm text-muted welcome-message">
                            欢迎使用编程浪子订餐管理管理后台
                        </span>
                    </li>
                    <li class="dropdown user_info">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
                            <img alt="image" class="img-circle" src="{{ buildStaticUrl('/images/common/avatar.png') }}"/>
                        </a>
                        <ul class="dropdown-menu dropdown-messages">
                            <li>
                                <div class="dropdown-messages-box">
                                    姓名:{{ current_user.nickname }} <a href="{{ buildUrl('/user/edit') }}" class="pull-right">编辑</a>
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="dropdown-messages-box">
                                    手机号码: {{ current_user.mobile }}
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="link-block text-center">
                                    <a class="pull-left" href="{{ buildUrl('/user/reset-pwd') }}">
                                        <i class="fa fa-lock"></i> 修改密码
                                    </a>
                                    <a class="pull-right" href="{{ buildUrl('/user/logout') }}">
                                        <i class="fa fa-sign-out"></i> 退出
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </li>

                </ul>

            </nav>
        </div>
        {% block content %}{% endblock %}
    </div>
</div>

<script src="{{ buildStaticUrl('/plugins/jquery-2.1.1.js') }}"></script>
<script src="{{ buildStaticUrl('/bootstrap/bootstrap.min.js') }}"></script>
<script src="{{ buildStaticUrl('/plugins/layer/layer.js') }}"></script>
<script src="{{ buildStaticUrl('/js/common.js') }}"></script>
{%block js %}{% endblock %}
</body>
</html>

这段代码是一个HTML页面的代码,用于构建一个管理后台的界面。下面是对代码中各个部分的详细介绍:

  1. <!DOCTYPE html>:声明文档类型为HTML5。
  2. <html>:HTML文档的根元素。
  3. <head>:包含了一些关于文档的元数据,如字符编码、视口设置等。
  4. <meta charset="utf-8">:指定文档的字符编码为UTF-8。
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">:设置文档的视口,使其在移动设备上能够正确显示。
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">:指定IE浏览器使用最新的渲染模式。
  7. <title>`管理后台`</title>:设置文档的标题为"管理后台"。
  8. <link>:引入外部样式表文件,用于设置页面的样式。
  9. <body>:HTML文档的主体部分。
  10. :页面的主要内容区域。
  11. :导航栏的折叠部分。
相关推荐
应用市场23 分钟前
无人机编队飞行原理与Python仿真实现完整指南
python·无人机·cocos2d
蓝桉~MLGT1 小时前
Python学习历程——字符串相关操作及正则表达式
python·学习·正则表达式
一晌小贪欢1 小时前
Python爬虫第5课:正则表达式与数据清洗技术
爬虫·python·正则表达式·网络爬虫·python爬虫·python3·网页爬虫
Nina_7171 小时前
Google提示词白皮书总结(2)
人工智能·python
Lynnxiaowen1 小时前
今天我们继续学习python3编程之python基础
linux·运维·python·学习
hui函数2 小时前
Python全栈(基础篇)——Day10:后端内容(map+reduce+filter+sorted+实战演示+每日一题)
后端·python
hui函数2 小时前
Python全栈(基础篇)——Day13:后端内容(模块详解)
后端·python
西柚小萌新2 小时前
【深入浅出PyTorch】--7.2.PyTorch可视化2
人工智能·pytorch·python
java1234_小锋2 小时前
TensorFlow2 Python深度学习 - 使用TensorBoard可视化数据
python·深度学习·tensorflow·tensorflow2
源来是大数据的菜鸟2 小时前
基于Multi-Agent开发的SmartCare系统自动化运维管家
python·运维开发