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. :导航栏的折叠部分。
相关推荐
bst@微胖子32 分钟前
Python高级语法之selenium
开发语言·python·selenium
查理零世2 小时前
【蓝桥杯集训·每日一题2025】 AcWing 6118. 蛋糕游戏 python
python·算法·蓝桥杯
魔尔助理顾问3 小时前
一个简洁高效的Flask用户管理示例
后端·python·flask
java1234_小锋3 小时前
一周学会Flask3 Python Web开发-request请求对象与url传参
开发语言·python·flask·flask3
诚信爱国敬业友善6 小时前
常见排序方法的总结归类
开发语言·python·算法
架构默片7 小时前
【JAVA工程师从0开始学AI】,第五步:Python类的“七十二变“——当Java的铠甲遇见Python的液态金属
java·开发语言·python
小哥山水之间8 小时前
在 Python 中操作 Excel 文件
开发语言·python·excel
wang_yb9 小时前
『Python底层原理』--CPython的变量实现机制
python·databook
databook9 小时前
『Python底层原理』--CPython的变量实现机制
后端·python
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站