下面主要是后台主页的布局。
html如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>后台管理页面</title>
<script src="../jquery-2.1.4/jquery.min.js"></script>
<script src="../EasyUI1.4.4/jquery.easyui.min.js"></script>
<link href="../EasyUI1.4.4/themes/default/easyui.css" rel="stylesheet" />
<link href="../EasyUI1.4.4/themes/icon.css" rel="stylesheet" />
<script src="js/admin.js"></script>
<link href="css/admin.css" rel="stylesheet" />
</head>
<body class="easyui-layout">
<div data-options="region:‘north‘,title:‘header‘,split:true,noheader:true" style="height:60px;background:#666">
<div class="logo">
后台管理
</div>
<div class="logout">你好：xxx |<a href="#">登出</a> </div>
</div>
<div data-options="region:‘south‘,title:‘footer‘,split:true,noheader:true" style="height:35px;line-height:30px;text-align:center">
© choi
</div>
<div id="accordion" data-options="region:‘west‘,title:‘导航‘,split:true,border:false,collapsible:false" style="width:180px;padding:0px;position:relative">
</div>
<div data-options="region:‘center‘" style="">
<div id="tabs">
<div title="起始页" style="padding:0 10px;display:block">
欢迎来到后台管理系统!
</div>
</div>
</div>
</body>
</html>
js代码如下：
$(function () {
$("#tabs").tabs({
fit: true,
border: false,
});
$("#accordion").accordion({
//width: 500,
//height: 500,
fit: true,
// border: false,
// animate: false,
// multiple: true,
selected: 1,
});
function addtabs(url) { 新增tab
if ($("#tabs").tabs("exists", url)) {
$("#tabs").tabs("select", url)
}
else {
$("#tabs").tabs(
‘add‘,
{
title: url,
closable: true,
//href: //显示的页面
});
}
}
//模拟左导航菜单
for (var i = 0; i < 2; i++) {
var content = $("<ul></ul>");
for (var j = 0; j < 2; j++) {
content.append("<li id=‘"+i.toString()+"_"+j.toString()+"‘><a>aaaa</a></li>")
}
$(‘#accordion‘).accordion(‘add‘, {
title: i.toString(),
content: content,//‘新内容‘,
selected: false,
});
}
$("#accordion ul li").click(function () { addtabs(this.id) });
});
css代码如下：
body {
}
.logo {
width: 180px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
font-weight: bold;
float: left;
color: #fff;
}
.logout {
float: right;
padding: 30px 15px 0 0;
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: blue;
}
#accordion ul {
padding: 0;
margin: 0;
list-style-type: none;
fit: inherit;
position: relative;
background:#95B8E7;
}
#accordion li {
text-align:center;
padding: 0px;
margin: 1px;
font-size:18pt;
color:black;
border:1px,solid,#95B8E7;
border-top:1px,solid,#95B8E7;
background:#E0ECFF;
}
#accordion li a{
color:black;
text-decoration:none;
}
#accordion li:hover{
background:#95B8E7;
}
原文：http://www.cnblogs.com/choii/p/5797511.html