layui实现管理后台页面效果

效果如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>frame</title><!-- <link rel="stylesheet" href="css/layui.css"  media="all"> --><link rel="stylesheet" href="/static/layui/css/layui.css"><style type="text/css">.layui-btn+.layui-btn {margin-left: 0px;}</style>
</head>
<body><div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo">XX平台</div><!-- 头部区域（可配合layui已有的水平导航） --><ul class="layui-nav layui-layout-left"><li class="layui-nav-item"><a href="">项目分析</a></li><li class="layui-nav-item"><a href="">菜单二</a></li><li class="layui-nav-item"><a href="">菜单三</a></li><li class="layui-nav-item"><a href="javascript:;">菜单四</a><dl class="layui-nav-child"><dd><a href="">管理1</a></dd><dd><a href="">管理2</a></dd><dd><a href="">管理3</a></dd></dl></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">用户CAN</a><dl class="layui-nav-child"><dd><a href="">基本资料</a></dd><dd><a href="">安全设置</a></dd></dl></li><li class="layui-nav-item"><a href="">退了</a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree"  lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">管理1</a><dl class="layui-nav-child"><dd class="layui-this"><a lay-href="createProject">清单1</a></dd><dd><a href="javascript:;">清单2</a></dd></dl></li><li class="layui-nav-item layui-nav-tree"><a href="javascript:;">管理2</a><dl class="layui-nav-child"><dd><a href="javascript:;">清单1</a></dd><dd><a href="javascript:;">清单2</a></dd><dd><a href="javascript:;">清单3</a></dd></dl></li><li class="layui-nav-item layui-nav-tree"><a href="javascript:;">管理3</a><dl class="layui-nav-child"><dd><a href="javascript:;">清单1</a></dd><dd><a href="javascript:;">清单2</a></dd><dd><a href="javascript:;">清单3</a></dd><dd><a href="javascript:;">清单4</a></dd></dl></li><li class="layui-nav-item layui-nav-tree"><a href="javascript:;">管理4</a><dl class="layui-nav-child"><dd><a href="javascript:;">清单1</a></dd><dd><a href="javascript:;">清单2</a></dd></dl></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;"></div></div><div class="layui-footer"><!-- 底部固定区域 -->© our.com - 底部固定区域</div>
</div>
<script src="/static/layui/layui.all.js" charset="utf-8"></script>
<script></script>
</body>
</html>

layui实现管理后台页面效果相关推荐

axure RP文件如何找回_AXURE教程：管理后台页面框架
今天,教大家如何用AXURE做一个管理后台页面框架. 本文以员工信息为案例,展示中继器增.删.改.查+导入+导出+排序的真实效果.包括直接在中继器修改和弹出页面修改两种模式,只需要导入数据,就可以直接 ...
django之二十二--admi管理后台页面的文案展示等相关配置
一.前言 1.django提供的admin管理后台页面默认是英文展示的页面.我们不喜欢英文的话,可以改下[settings.py]里面的常量[LANGUAGE_CODE]的值为[zh-Hans]使页面 ...
layui搭建管理后台系统
先上最终效果图: 点击左侧的菜单树可以显示在导航栏中下面是具体步骤: ①下载layui https://www.layui.com/ ②项目结构介绍 html:存放静态界面 img:存放图片 jso ...
Flask异步渲染管理后台局部页面
想法 / One simple idea 最近在折腾研究Python Web开发,入坑了Flask,用习惯Python了发现用它干啥都是~真香! 试着写了个考试管理的后台,以前做web开发的套路,管理 ...
为啥我从后台查到的值在页面显示的是undefined_再谈一个管理后台列表功能应有的素质...
大家能看到的这个号第1篇文章<无心朝政,列表功能分析下>就是讲列表功能.虽然当时写的时候特别认真,但基本是围绕"列表功能"这个广泛的词来阐述的. 最近在做一个体育赛事 ...
web端业务数据管理平台+Axure运营数据管理平台+月度数据统计分析+年度排行榜数据统计页面分析+运营大数据统计管理后台+用户信息管理+Axure通用web端高保真交互业务数据管理平台
作品介绍:原型内容包含:web端业务数据管理平台+Axure运营数据管理平台+月度数据统计分析+年度排行榜数据统计页面分析+运营大数据统计管理后台+用户信息管理+Axure通用web端高保真交互业务数 ...
ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理（15）之前台网站页面
源码下载地址:http://www.yealuo.com/Sccnn/Detail?KeyValue=c891ffae-7441-4afb-9a75-c5fe000e3d1c 本项目主要是一个素材的分 ...
banner panel 页面_广告位（banner）的可视化管理后台逻辑说明
针对APP端的banner展示,怎样做到前后端的有机组合,方便运营人员自行操作(随时更改)广告位呢?本文简单的将可视化banner后台的逻辑做以说明. 百度百科上我们可以看到对banner的定义即&q ...
layui管理后台模板
layui搭建的后台模板~

layui实现管理后台页面效果

layui实现管理后台页面效果相关推荐

最新文章

热门文章