标签：前端框架 tle mile 出现 cti containe 代码区 ini size
1.导入插件
layui使用需要导入layui的js和css:
<link rel="stylesheet" href="layui/css/layui.css" /> <script src="layui/layui.js"></script>
2.栅格系统
2.1入门demo：
<div class="layui-container"> 常规布局（以中型屏幕桌面为例）： <div class="layui-row"> <div class="layui-col-md9"> 你的内容 9/12 </div> <div class="layui-col-md3"> 你的内容 3/12 </div> </div> </div>
2.2添加列间距
通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。有12 种不同尺寸的边距，如layui-col-space1，layui-col-space3，layui-col-space5等，具体的详见官网介绍。下面有个例子：
<div class="layui-row layui-col-space10"> <div class="layui-col-md4"> 1/3 </div> <div class="layui-col-md4"> 1/3 </div> <div class="layui-col-md4"> 1/3 </div> </div>
2.3列偏移
对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移3个列宽度。
采用“列偏移”机制让两个列左右对齐的实例：
<div class="layui-row"> <div class="layui-col-md4"> 4/12 </div> <div class="layui-col-md4 layui-col-md-offset4"> 偏移4列，从而在最右 </div> </div>
2.4让IE8/9兼容栅格
将上述代码放入你页面 <body> 标签内的任意位置：
<!-- 让IE8/9支持媒体查询，从而兼容栅格 --> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
2.5后台布局样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>栅格系统demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="plugin/layui/css/layui.css" rel="stylesheet">
<script src="plugin/layui/layui.js"></script>
<script src="plugin/jquery-3.4.1/jquery-3.4.1.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout 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="">商品管理</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">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<script src="../src/layui.js"></script>
<script>
//JavaScript代码区域
layui.use(‘element‘, function(){
var element = layui.element;
});
</script>
</html>
3.颜色设计
参考网址：https://www.layui.com/doc/element/color.html
3.1常用主色
#009688 通常用于按钮、及任何修饰元素
#5FB878 一般用于选中状态
#393D49 通常用于导航
#1E9FFF 比较适合一些鲜艳色系的页面
3.2场景色
#FFB800 暖色系，一般用于提示性元素
#FF5722 比较引人注意的颜色
#01AAED 用于文字着色，如链接文本
#2F4056 侧边或底部普遍采用的颜色
3.3内置颜色
赤色：class="layui-bg-red"
橙色：class="layui-bg-orange"
墨绿：class="layui-bg-green"
藏青：class="layui-bg-cyan"
蓝色：class="layui-bg-blue"
雅黑：class="layui-bg-black"
银灰：class="layui-bg-gray"
4.字体图标
参考网址：https://www.layui.com/doc/element/icon.html
<i class="layui-icon layui-icon-face-smile"></i>
自定义图标大小各颜色：
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
5.CSS3动画类
标签：前端框架 tle mile 出现 cti containe 代码区 ini size
原文地址：https://www.cnblogs.com/zys2019/p/11874397.html
