The following will introduce a method to quickly build a page layout, which is to use EasyUI for layout.
Before the layout, first reference five files from the EasyUI package.
<link href="EasyUI/themes/material/easyui.css" rel="stylesheet" /> < link href =" EasyUI/themes/icon.css " rel =" stylesheet " / > --image style <script src="EasyUI/jquery.min.js"></script> <script src="EasyUI/jquery.easyui.min.js"></script> <script src="EasyUI/locale/easyui-lang-zh_CN.js"></ script >--use language
There are many ways to create layouts:
1. Create a layout with labels
<divid="cc"class="easyui-layout"style="width:600px;height:400px;">
<divdata-options="region:'north',title:'North Title',split:true"style="height:100px;"></div>
<divdata-options="region:'south',title:'South Title',split:true"style="height:100px;"></div>
<divdata-options="region:'east',iconCls:'icon-reload',title:'East',split:true"style="width:100px;"></div>
<divdata-options="region:'west',title:'West',split:true"style="width:100px;"></div>
<divdata-options="region:'center',title:'center title'"style="padding:5px;background:#eee;"></div>
</div>
2. Create a layout with a full page
<bodyclass="easyui-layout">
<divdata-options="region:'north',title:'North Title',split:true"style="height:100px;"></div>
<divdata-options="region:'south',title:'South Title',split:true"style="height:100px;"></div>
<divdata-options="region:'east',iconCls:'icon-reload',title:'East',split:true"style="width:100px;"></div>
<divdata-options="region:'west',title:'West',split:true"style="width:100px;"></div>
<divdata-options="region:'center',title:'center title'"style="padding:5px;background:#eee;"></div>
</body >
The layout can be divided into five parts, east, west, south, north, and middle, among which the "middle" part is a must. To write your content, the others can be selectively deleted.
You can also change the title by title.
The knowledge about EasyUI will be updated later, please pay attention at any time, thank you! ! !