后台管理系统模板，简易模板

后台模板

搭建的简易后台管理系统模板 基于 layui
先看效果图很适合初学者对于刚使用 layui的来说可以很好的借鉴一下

图片:
第一页可加群号下载比较完整的代码 805371278

第二页普通的数据展示

第三页带文件预览下载的数据展示没有加pdf

第四页搜索栏展开默认关闭也可设置展开

第五页新增表单

文档格式

好了开始上代码
先下载好 layui 官网地址 layui

1 html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>后台表单</title><link rel="stylesheet" href="./layui/css/layui.css"><style>.layadmin-iframe {position: absolute;width: 100%;height: 100%;left: 0px;top: 0px;right: 0px;bottom: 0px;background-color: #f2f2f2;}.layui-fluid {padding: 10px;background-color: white;margin: 10px;}</style>
</head><body class="layui-layout-body"><div class="layui-layout-admin"><div class="layui-header"><div class="layui-logo">layui 后台布局</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="javascript:;">其它系统</a><dl class="layui-nav-child"><dd><a href="">授权管理</a></dd></dl></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><img src="./images/img.jpg" class="layui-nav-img">admin</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 href="javascript:;">主页</a><dl class="layui-nav-child"><dd class="layui-this"><a data_herf="./page/home.html" href="javascript:;">home</a></dd></dl></li><li class="layui-nav-item"><a data_herf="./page/page1.html" href="javascript:;">表单1</a></li><li class="layui-nav-item"><a data_herf="./page/page2.html" href="javascript:;">表单2(带文档预览)</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><iframe class="layadmin-iframe" id="Z_iframe" src="./page/home.html" frameborder="0"></iframe></div><div class="layui-footer"><!-- 底部固定区域 -->© xxxx.com - 底部固定区域</div></div><script src="./layui/layui.js"></script><script>//JavaScript代码区域layui.use('element', function () {var element = layui.element;var Z_iframe = document.getElementById("Z_iframe")element.on('nav(test)', function (data) {// console.log(data)let href = data[0].attributes[0].nodeValueZ_iframe.src = href});});</script>
</body></html>

后台管理系统模板，简易模板相关推荐

Axure RP中后台管理系统通用原型模板
Axure RP中后台管理系统通用原型方案 v2是一套通用型的中后台信息系统原型方案,可以快速扩展并输出标准美观的中后台产品原型,极大的提升输出效率和节省协作成本.方案中提供了几十套不同风格和结构的系 ...
MFAN通用企业网站后台管理系统源码模板
介绍: mfan通用企业网站后台管理系统模板基于layui制作,响应式设计,自适应分辨率,兼容pc端和移动端,全套模板,包括登录.前台菜单.后台菜单.文章管理.单页管理.邮件系统.个人信息.系统设置等 ...
后台管理系统纯前端模板
分享一个个人学习前端写过的模板,简单.高效.好用. 下载链接: https://download.csdn.net/download/qq_51701007/87109342https://downl ...
HTML期末学生大作业基于HTML+CSS+JavaScript通用的后台管理系统ui框架模板
javascript网页设计大作业: HTML期末学生大作业基于HTML+CSS+JavaScript通用的后台管理系统ui框架模板
html学生后台管理系统设计,学生后台管理系统（简易版）
学生管理学生姓名: 学生年龄: 学生性别: 男女考试成绩: 添加学生 let addStu=document.getElementById("addStu"); let st ...
50套高大上的后台管理系统模板，总有一套适合你
50套高大上的后台管理系统模板,总有一套适合你码个蛋 2018-12-20 21:23:29 作者 | web小二来源 | web前端开发(web_qdkf) 从13年开始,我由开发慢慢走向设计, ...
10款网站后台管理系统模板_bootstrap网站后台模板_html后台模板下载（四）
企业项目营销管理ui后台模板蓝色的邮箱密码登录ui模板网盘云储存管理系统ui框架模板线条背景的登录页面ui模板房产销售管理系统OA后台模板办公自动化平台系统登录模板农业生产大数据投屏模板 ...
【后台端】OA办公后台管理系统高保真Axure原型模板
作品名称:OA办公后台管理系统高保真原型模板作品编号:WEB007 软件版本:Axure8(兼容Axure9) 作品类型:原型模版页面数量:186 当前版本:V1.0 作品预览链接:http:// ...
手把手带你使用uni-admin搭建后台管理系统
我们一般写应用都需要有后台管理系统,那么uni-app也不例外. 本次内容假设我们已经完成了一个uni-app+uniCloud开发的程序. 默认我们已经搭建好了服务空间. 我们的视频教程(免费)链接 ...

后台管理系统模板，简易模板

后台模板

后台管理系统模板，简易模板相关推荐

最新文章

热门文章