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. :导航栏的折叠部分。
相关推荐
湫ccc2 分钟前
《Python基础》之pip换国内镜像源
开发语言·python·pip
hakesashou3 分钟前
Python中常用的函数介绍
java·网络·python
佚先森12 分钟前
2024ARM网络验证 支持一键云注入引流弹窗注册机 一键脱壳APP加固搭建程序源码及教程
java·html
菜鸟的人工智能之路13 分钟前
极坐标气泡图:医学数据分析的可视化新视角
python·数据分析·健康医疗
菜鸟学Python14 分钟前
Python 数据分析核心库大全!
开发语言·python·数据挖掘·数据分析
小白不太白95015 分钟前
设计模式之 责任链模式
python·设计模式·责任链模式
喜欢猪猪21 分钟前
Django:从入门到精通
后端·python·django
糖豆豆今天也要努力鸭27 分钟前
torch.__version__的torch版本和conda list的torch版本不一致
linux·pytorch·python·深度学习·conda·torch
何大春43 分钟前
【弱监督语义分割】Self-supervised Image-specific Prototype Exploration for WSSS 论文阅读
论文阅读·人工智能·python·深度学习·论文笔记·原型模式
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html