写在前面

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。

准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

材料准备

1.进入layui官网下载layui资源包：https://www.layui.com

图1.layui官网

代码书写

后台管理界面如下图所示：

图2.后台界面效果图
后台管理界面代码如下所示：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>后台管理面板</title><link rel="stylesheet" href="css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo">后台管理面板</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="">邮件管理</a></dd><dd><a href="">消息管理</a></dd><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="http://t.cn/RCzsdCq" class="layui-nav-img">贤心</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:;">所有商品</a><dl class="layui-nav-child"><dd><a href="javascript:;">列表一</a></dd><dd><a href="javascript:;">列表二</a></dd><dd><a href="javascript:;">列表三</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">解决方案</a><dl class="layui-nav-child"><dd><a href="javascript:;">列表一</a></dd><dd><a href="javascript:;">列表二</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="">云市场</a></li><li class="layui-nav-item"><a href="">发布商品</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;">内容主体区域</div></div><div class="layui-footer"><!-- 底部固定区域 -->Copyright © 2018 idcs.vip All Rights Reserved.</div>
</div>
<script src="layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){var element = layui.element;});
</script>
</body>
</html>

其中css和js资源引用需要替换成自己的资源链接。

参考资源

更多内容可阅读layui官方文档https://www.layui.com/doc/。

作者：戴翔
电子邮箱：daixiangcn@outlook.com

使用layui框架迅速搭建后台管理页面相关推荐

bootstrap搭建后台管理页面
bootstrap搭建后台管理页面管理页面主体包括4部分,顶部导航栏,左侧导航栏,中间正文页和底部的页脚.其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件,主体页面为了演示方便,使用了i ...
【javaWeb微服务架构项目——乐优商城day03】——（搭建后台管理前端，Vuetify框架，使用域名访问本地项目，实现商品分类查询，cors解决跨域，品牌的查询）
乐优商城day03 0.学习目标 1.搭建后台管理前端 1.1.导入已有资源 1.2.安装依赖 1.3.运行一下看看 1.4.目录结构 1.5.调用关系 2.Vuetify框架 2.1.为什么要学习U ...
使用bootstrap搭建后台管理系统页面《一》
1. 使用bootstrap搭建后台管理系统页面<一> 一般的后台管理系统页面主体包括四个部分,顶部导航栏,左侧菜单栏,中间正文页和底部的页脚. 其中左侧和顶部使用的是bootstrap的 ...
vue+antd搭建后台管理界面模版（PC端），适配中文、英文、日文 mock数据，开箱即用
vue+antd搭建后台管理界面模版(PC端) 完整代码下载地址:vue+antd搭建后台管理界面模版(PC端) 技术栈 vue2 + vuex + vue-router + webpack + ES ...
使用bootstrap搭建后台管理系统页面《二》
1.使用bootstrap搭建后台管理系统页面<二> 这次不需要另外写css.直接完全引用bootstrap下的样式. 完成以后的效果: 源代码: <%@ page language ...
二基于Django 简单后台管理页面
<1> 整个后台页面布局项目基于python的Django框架进行开发 ①实现用户登录 ②实现用户对自己数据的增删改查 (1)在app cmdb的models.py下创建用户数据表:用户表 ...
后台管理页面布局（左侧导航长度根据右侧内容无限延伸）
2019独角兽企业重金招聘Python工程师标准>>> 如图为标准后台管理页面布局,左侧导航布局一般是设置高度100%来适应所有尺寸的显示器打开的浏览器高度. 但是这种布局会 ...
后台管理页面基本布局方式
经典页面布局简易后台管理页面布局 1 左边菜单栏固定 2 header固定高度(宽度自适应) 3 主体统计列表(宽度自适应) 代码如下 html <div class="main&q ...
Vue后台管理页面总体结构及主要功能设计
后台管理页面总体结构为:顶部左侧为系统标题,顶部右侧为用户图标及改密.退出菜单.中间左侧为功能菜单,中间右侧为操作区域,可以用el-row配合el-col来实现布局.其中导航菜单可以用el-menu配 ...

使用layui框架迅速搭建后台管理页面

写在前面

材料准备

代码书写

参考资源

使用layui框架迅速搭建后台管理页面相关推荐

最新文章

热门文章