layui前端开发框架
1下载与使用
官网地址：https://layuion.com/
layui文件目录结构
- layui
- css
- layui.css
- font
- image
- lay
- modules(加载模块)
- dest
- layui.js
- css
2页面元素
1栅格布局
采用行列的整体页面布局方式，具体使用步骤如下
- 在div标签的类选择器中加入layui-container
- row定义列完整定义layui-row（使用同上）
- 行的定义有三种类型xs,sm,lg三种根据屏幕自适应，完整定义类似于layui-col-md（使用同上）
2导航
- 水平导航（依赖加载模块element）
导航栏定义layui-nav
一级标题layui-nav-item
二级标题layui-nav-child
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./css/layui.css">
<title></title>
</head>
<body>
<ul class="layui-nav">
<li class="layui-nav-item">一级标题</li>
<li class="layui-nav-item">一级标题</li>
<li class="layui-nav-item">一级标题</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>
</dl>
</li>
</ul>
<script type="text/javascript" src="./js/layui.js"></script>
<script type="text/javascript">
layui.use('element',function(){
var element=layui.element
})
</script>
</body>
</html>
效果图
2. 垂直导航和侧边导航的HTMl结构完全一样
垂直导航layui-nav-tree layui-nav-side
3. 后台管理布局layui-layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./css/layui.css">
<title></title>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<!--水平导航栏部分-->
</div>
<div class="layui-side">
<!--左侧垂直导航栏-->
</div>
<div class="layui-body">
<!--主题内容-->
</div>
<div class="layui-footer">
<!--底部固定模块-->
</div>
</div>
<script type="text/javascript" src="./js/layui.js">
layui.use(['element','layer','util'],function(){
//......
})
</script>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看