简单使用easyui布局拼装

  <link rel="stylesheet" type="text/css" href="../easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyUI/themes/icon.css">
    <script type="text/javascript" src="../easyUI/jquery.min.js"></script>
    <script type="text/javascript" src="../easyUI/jquery.easyui.min.js"></script>
    //使用前需要先导入easyui中的js和css样式

<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:1330px;height:600px;">
    <div data-options="region:'north'" style="height:50px"></div>
    <div data-options="region:'south',split:true" style="height:50px;"></div>
    <div data-options="region:'east',split:true" title="East" style="width:150px;"></div>
    <div data-options="region:'west',split:true" title="West" style="width:150px;">
        <div style="margin:20px 0;"></div>
        <div class="easyui-panel" style="padding:5px">
            <ul class="easyui-tree">
                <li>
                    <span>员工管理系统</span>
                    <ul>
                        <li data-options="state:'open'">
                            <span>人力资源部</span>
                            <ul>
                                <li>
                                    <span><a href="department.html" class="ul_Li_span_a_class">部门管理</a></span>
                                </li>
                                <li>
                                    <span><a href="employees.html" class="ul_Li_span_a_class">员工管理</a></span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div data-options="region:'center',title:'员工管理',iconCls:'icon-ok'">
        <div class="easyui-tabs" style="width:1028px;height:470px">
            <div title="员工管理" style="padding:10px">
                <table id="employeesTable">

                </table>
            </div>
            <div title="添加员工信息" style="padding:10px">
                <div class="easyui-panel" title="添加员工" style="width:400px;padding:30px 60px">
                    <div style="margin-bottom:20px">
                        <div>员工编号:</div>
                        <input id="addStaffId" class="easyui-textbox" data-options="prompt:'请输入正确的员工编号'" style="width:100%;height:32px">
                    </div>
                    <div style="margin-bottom:20px">
                        <div>员工姓名:</div>
                        <input id="addStaffName" class="easyui-textbox" style="width:100%;height:32px">
                    </div>
                    <div style="margin-bottom:20px">
                        <div>性别:</div>
                        <input id="addStaffSex" class="easyui-textbox" style="width:100%;height:32px">
                    </div>
                    <div style="margin-bottom:20px">
                        <div>出生日期:</div>
                        <input id="addStaffBornDate" class="easyui-datebox" data-options="sharedCalendar:'#cc'">
                    </div>
                    <div style="margin-bottom:20px">
                        <div>入职时间:</div>
                        <input id="addStaffEntryTime" class="easyui-datebox" data-options="sharedCalendar:'#cc'">
                        <div id="cc" class="easyui-calendar"></div>
                    </div>
                    <div style="margin-bottom:20px">
                        <div>所属部门:</div>
                        <input id="addStaffDepartment" class="easyui-textbox" style="width:100%;height:32px">
                    </div>
                    <form id="uploadForm">
                        <div style="margin-bottom:20px">
                            <div>文件:</div>
                            <input class="easyui-filebox" value="上传" onclick="doUpload()" name="file" data-options="prompt:'请选择文件'" style="width:100%">
                        </div>
                    </form>
                    <div>
                        <a href="#" id="addStaffBtn" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px">提交</a>
                    </div>
                </div>
            </div>
            <div title="帮助" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
            </div>
        </div>
    </div>
</div>

这个是页面全部搭建好的效果图

里面分别用到了easyui的布局，树，选项卡等Demo

最外面使用的是 布局Layout  

<div style="margin:20px 0;"></div>
	<div class="easyui-layout" style="width:700px;height:350px;">
		<div data-options="region:'north'" style="height:50px"></div>
		<div data-options="region:'south',split:true" style="height:50px;"></div>
		<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
		<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
			
		</div>
	</div>