layui框架是一款非常好的框架结构,如下官网地址:https://www.layui.com/doc/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="layui-master/src/css/layui.css" />
<script src="layui-master/src/layui.js"></script>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md9" style="background-
color:chartreuse;height: 100%;">
你的内容 9/12
</div>
<div class="layui-col-md3" style="background-
color:#0000FF;height: 30%;">
你的内容 3/12
</div>
</div>
</body>
</html>
![](https://img-blog.csdnimg.cn/img_convert/87541af07cfe9837010dcf7153f7df42.png)
学习使用layuI的时候
<link rel="stylesheet" href="layui-master/src/css/layui.css" />
<script src="layui-master/src/layui.js"></script>
这两行必须导入
<!--图标的使用方式-->
<i class="layui-icon"></i>
<i class="layui-icon layui-icon-mike"></i>
<i class="layui-icon layui-icon-login-wechat"></i><br />
<!--
时间:2020-06-01
描述:layui动画的使用
-->
<div class="layui-anim layui-anim-up">测试</div><br />
![](https://img-blog.csdnimg.cn/img_convert/696caa76c5b01f4725aceea944dfd412.png)
<!--
时间:2020-06-01
描述:layui按钮的使用
-->
<input type="button" class="layui-btn layui-btn-primary" value="原始按钮" /><br />
<input type="button" class="layui-btn" value="默认按钮" /><br />
<input type="button" class="layui-btn layui-btn-normal" value="百搭按钮" /><br />
<input type="button" class="layui-btn layui-btn-warm" value="暖色按钮" /><br />
<input type="button" class="layui-btn layui-btn-danger" value="警告按钮" /><br />
<input type="button" class="layui-btn layui-btn-disabled" value="禁用按钮" /><br />
<div class="layui-anim-loop">
展示按钮的大小尺寸<br />
<input type="button" class="layui-btn layui-btn-normal layui-btn-lg" value="百搭按钮大型" /><br />
<input type="button" class="layui-btn layui-btn-normal layui-btn-sm" value="百搭按钮小型" /><br />
<input type="button" class="layui-btn layui-btn-normal layui-btn-xs" value="百搭按钮迷你型" /><br />
<input type="button" class="layui-btn layui-btn-normal" value="百搭按钮正常型" /><br />
</div>
<br />
![](https://img-blog.csdnimg.cn/img_convert/cd14282e72057b29d2a650b962cc7163.png)
<!--
时间:2020-06-01
描述:图标按钮混合使用
-->
<!--使用按钮功能 layui-btn-hroup按钮的分组-->
<div class="layui-btn-group">
<button type="button" class="layui-btn">增加</button>
<button type="button" class="layui-btn">编辑</button>
<button type="button" class="layui-btn">删除</button>
</div>
<!--在默认按钮中加上图标-->
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
<!--在原始按钮上加上图标-->
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div><br /><br />
<!--尽管按钮在同节点并排时会自动拉开间距,但在按钮太多的情况,效果并不是很美好。因为你需要用到按钮容器-->
<div class="layui-btn-container">
<button type="button" class="layui-btn">按钮一</button>
<button type="button" class="layui-btn">按钮二</button>
<button type="button" class="layui-btn">按钮三</button>
</div>
![](https://img-blog.csdnimg.cn/img_convert/1517a7e645a805767f36a97459c12e84.png)