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页面的代码，用于构建一个管理后台的界面。下面是对代码中各个部分的详细介绍：
- <!DOCTYPE html>：声明文档类型为HTML5。
- <html>：HTML文档的根元素。
- <head>：包含了一些关于文档的元数据，如字符编码、视口设置等。
- <meta charset="utf-8">：指定文档的字符编码为UTF-8。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置文档的视口，使其在移动设备上能够正确显示。
- <meta http-equiv="X-UA-Compatible" content="IE=edge">：指定IE浏览器使用最新的渲染模式。
- <title>`管理后台`</title>：设置文档的标题为"管理后台"。
- <link>：引入外部样式表文件，用于设置页面的样式。
- <body>：HTML文档的主体部分。
-
：页面的主要内容区域。：导航栏的折叠部分。
- ：导航栏的菜单列表。
- ：菜单项。
- ：菜单项的链接地址。
- ：菜单项的图标。
- 仪表盘：菜单项的文本标签。
- {% block css %}{% endblock %}：用于在此处插入自定义的CSS样式。
：页面的内容区域。：页面顶部的边框行。：导航栏的头部。<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="javascript:void(0);"> ：用于折叠导航栏的按钮。- ：导航栏右侧的链接列表。
- ：链接项。
- 欢迎使用编程浪子订餐管理管理后台：欢迎消息。
- ：用户信息下拉菜单。
- ：用户信息下拉菜单的触发按钮。
：用户头像。
- ：用户信息下拉菜单的内容。
- ：菜单项。
相关推荐数据小爬虫@2 小时前深入解析：使用 Python 爬虫获取苏宁商品详情健胃消食片片片片2 小时前Python爬虫技术：高效数据收集与深度挖掘ℳ₯㎕ddzོꦿ࿐5 小时前解决Python 在 Flask 开发模式下定时任务启动两次的问题CodeClimb5 小时前【华为OD-E卷 - 第k个排列 100分（python、java、c++、js、c）】一水鉴天5 小时前为AI聊天工具添加一个知识系统 之63 详细设计 之4：AI操作系统 之2 智能合约Channing Lewis5 小时前什么是 Flask 的蓝图（Blueprint）B站计算机毕业设计超人5 小时前计算机毕业设计hadoop+spark股票基金推荐系统 股票基金预测系统 股票基金可视化系统 股票基金数据分析 股票基金大数据 股票基金爬虫觅远6 小时前python+playwright自动化测试(四)：元素操作(键盘鼠标事件)、文件上传浪浪山小白兔6 小时前HTML5 新表单属性详解ghostwritten6 小时前Python FastAPI 实战应用指南热门推荐01centos7 init.d 和system.d02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04PyTorch AMP 混合精度中grad_scaler.py的scale函数解析05Windows10安装PCL1.14.0及点云配准06密码学原理技术-第六章-introduction to pulibc-key cryptography07xgboost: Why not implement distributed XGBoost on top of spark08Oracle Scheduler: Calendaring09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10大语言模型LLM的文生图、文生视频和文生语音技术简介