1、新建html文档。
2、书写hmtl代艨位雅剖码。<body class="easyui-layout"&爿讥旌护gt;<div region="north" split="true" border="false" style="overflow: hidden; height: 30px; background: url(images/layout-browser-hd-bg.gif) #7f99be repeat-x center 50%; line-height: 20px;color: #fff; font-family: Verdana, 微软雅黑,黑体"><span style="float:right; padding-right:20px;" class="head">欢迎 测柜员<a href="#" id="loginOut">安全退出</a></span><span style="padding-left:10px; font-size: 16px; "><img src="images/blocks.gif" width="20" height="20" align="absmiddle" /> 实时报表系统</span></div><div region="center" title=""><div class="easyui-tabs" fit="true" border="false" id="tabs"> <div title="首页"></div></div></div><div region="west" class="west" title="菜单"><ul id="tree"></ul></div><div id="tabsMenu" class="easyui-menu" style="width:120px;"> <div name="close">关闭</div> <div name="Other">关闭其他</div> <div name="All">关闭所有</div></div>
3、书写css代码。<style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } .west{ width:200px; padding:10px; } .north{ height:30px; }</style>
4、书写并添加js代码。<script src="js/jquery.easyui.min.js"></script><script src="js/main.js"></script>
5、代码整体结构。
6、查看效果。
