页面布局 layui与 layui的导入

导入

css  
<link rel="stylesheet" href="../layui/css/layui.css">
js
<script src="../layui/layui.js"></script>

测试 是否 导入 成功

<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script> 

1. 页面布局 layui

固定布局

 <div class="layui-container " style="background-color:red ;height: 300px;">
</div>

完整宽度

<div class="layui-fluid " style="background-color:red ;height: 300px;">
</div>

2. 栅格系统

layui-row 是行
layui-col-md*是列

变量md 是不同 屏幕下的标记
变量*代表的是该列所占用的12等分数(如6/12) ,可选值为1- 12
如果多个列的“等分数值"总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起一行。

<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md5" style="background-color: #0000FF;"> 5/12 </div>
 <div class="layui-col-md7" style="background-color: #00F7DE;"> 7/12 </div>
</div>
<div class="layui-row">
<div class="layui-col-md5" style="background-color: #0000FF;"> 5/12 </div>
 <div class="layui-col-md5" style="background-color: #00F7DE;"> 5/12 </div>
<div class="layui-col-md2" style="background-color: firebrick;"> 2/12 </div>
</div>
<div class="layui-row">
<div class="layui-col-md5" style="background-color: #00FF00;"> 5/12 </div>
 <div class="layui-col-md5" style="background-color: #00F7DE;"> 5/12 </div>
<div class="layui-col-md5" style="background-color: firebrick;"> 5/12 </div>
</div>
</div>	

3.列边距

通过”列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现

右边距。列间距在保证排版美观的同时还可以进一步保证分列的宽度精细程度。我们结合网页常用的边
距,预设了12种不同尺寸的边距，分别是:
支持列之间为1px- 30px区间的所有双数间隔，以及1px、 5px、 15px、25px的单数间隔
.layui-col-space* *(1–30)px

<h3>列边距</h3>
		<div class="layui-container">
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md4" >
				     <div id="" style="background-color: #00FF00;">
				    	4
				     </div>	
				</div>
			    <div class="layui-col-md4"> 
					 <div id=""  style="background-color: #00F7DE;">
				 	4
					 </div>	
				</div>
				<div class="layui-col-md4" >
					 <div id=""  style="background-color: firebrick;">
						4
					 </div>	
				</div>
			</div>
		</div>	

4.列偏移

将列向右移动指定列数
layui-col-md-offset*
*代表的是列数

<div class="layui-container">
		<h3>列边距</h3>
		<div class="layui-row ">
			<div class="layui-col-md4" style="background-color: #007DDB;">
			   4
			</div>
			<div class="layui-col-md4 " style="background-color: #00FF00;" >
				4
			</div>`在这里插入代码片`
		    
		</div>
		<h3>偏移后</h3>
		<div class="layui-row ">
			<div class="layui-col-md4" style="background-color: #007DDB;">
			   4
			</div>
			<div class="layui-col-md4 layui-col-md-offset4 " style="background-color: #00FF00;" >
				4
			</div>
		    
		</div>
	</div>	

5.列嵌套

列之间可以无限嵌套列

div class="layui-container">
<h3>列嵌套</h3>
<div class="layui-row ">
<div class="layui-col-md6" style="background-color: #007DDB;">
<div class="layui-row">
<div class="layui-col-md5" style="background-color: #0000FF;"> 5/12 </div>
 <div class="layui-col-md5" style="background-color: #00F7DE;"> 5/12 </div>
<div class="layui-col-md2" style="background-color: firebrick;"> 2/12 </div>
</div>
</div>
</div>	
</div>