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>
注意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>
注意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>
注意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>
注意内容栏使用了iframe，且名称为main-frame，所以点击左侧导航栏菜单后，对应页面的内容就显示到该区域内。
6. 底部版权栏
这个比较简单
<div data-options="region:'south',border:false"
style="height: 24px; line-height: 24px; background: #F0F0F0; text-align: center;">
版权所有 熊猫大哥大宇宙股份无限公司
</div>
7. 效果
效果很好，大功告成哈。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦