1. 本章任务
之前已实现登录后进入main.html页面功能，本篇来实现后台管理页面布局。
主要包括：上方标题栏，下方版权栏，左侧菜单栏，右侧点击菜单后对应的内容区域。
2. 引入EasyUI
新建main.html然后引入EasyUI。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>布局和标签页</title> <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> </head> <body class="easyui-layout"> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 注意body使用了easyui-layout样式，所以该页面遵循easyui的布局规范。 3. 顶部标题栏 新增顶部标题栏 <div data-options="region:'north',border:false" style="height: 48px; line-height: 48px; padding-left: 24px; font-size: 1.3em; background: #C3E7F3;"> 汉东大学奖助学金管理系统 </div> 1 2 3 4 注意region:'north'将标题栏固定到了顶部，汉东大学是虚构的，此处使用了《人民的名义》中的大学名称，仅仅是为了有趣。 4. 左侧导航栏 新增左侧导航栏 <div data-options="region:'west',split:true,title:'导航栏'" style="width: 150px; padding: 10px;"> <ul> <li><a href="http://www.qq.com" target="main-frame">腾讯</a></li> <li><a href="http://www.baidu.com" target="main-frame">百度</a></li> </ul> </div> 1 2 3 4 5 6 注意region:'west'将导航栏固定到了左侧。然后此处添加了两个菜单用于演示，后续真实环境下应该从数据库中加载角色对应菜单显示。 注意点击<a>标签后，target="main-frame"表明指向的网页显示到main-frame中。 5. 右侧内容栏 代码如下： <div data-options="region:'center',title:'内容栏'"> <iframe name="main-frame" style="width: 100%; height: 100%;"></iframe> </div> 1 2 3 注意内容栏使用了iframe，且名称为main-frame，所以点击左侧导航栏菜单后，对应页面的内容就显示到该区域内。 6. 底部版权栏 这个比较简单 <div data-options="region:'south',border:false" style="height: 24px; line-height: 24px; background: #F0F0F0; text-align: center;"> 版权所有 熊猫大哥大宇宙股份无限公司 </div>
![EasyUI+JavaWeb奖助学金管理系统[20]-项目总结与展望](https://ucc.alicdn.com/pic/developer-ecology/330d6712fdf74f1f96f2bbaa9de55eb4.png?x-oss-process=image/resize,h_160,m_lfit)