<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3c.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3x.org/1999/xhtml">
<head>
<title>管理员列表</title>
<meta http-equlv="content-type" content="text/html;charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="admin_style.css"/>
</head>
<body>
<!--Logo区域-->
<div id="header">
<img src="make.jpg" alt="logo"/>
<a href="#">[退出]</a>
</div>
<!--导航区域-->
<div id="navi">
</div>
<!--主要区域-->
<div id="main">
<form>
<!--操作区域-->
<div id="operate">
</div>
<!--数据区域-->
<div id="data">
<table id="datalist">
<tr class="header">
<td>
<input type="checkbox"/>
<span>全选</span>
</td>
<td>管理员ID</td>
<td>姓名</td>
<td>拥有角色</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1</td>
<td>贾强</td>
<td>超级管理员、角色管理员、账单管理员</td>
<td>
<input type="button" class="btn_modify" value="修改"/>
<input type="button" class="btn_delete" value="删除"/>
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>2</td>
<td>贾强</td>
<td>超级管理员、账务管理员</td>
<td>
<input type="button" class="btn_modify" value="修改"/>
<input type="button" class="btn_delete" value="删除"/>
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>3</td>
<td>贾强</td>
<td>超级管理员、账务管理员</td>
<td>
<input type="button" class="btn_modify" value="修改"/>
<input type="button" class="btn_delete" value="删除"/>
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>4</td>
<td>贾强</td>
<td>超级管理员、账务管理员</td>
<td>
<input type="button" class="btn_modify" value="修改"/>
<input type="button" class="btn_delete" value="删除"/>
</td>
</tr>
</table>
</div>
<!--分页-->
<div id="pages">
</div>
</form>
</div>
<!--页脚区域-->
<div id="footer">
<p><源自北美的技术></p>
<p>版权所有©<p>
</div>
</body>
</html>
css配置：
/*全局样式*/
body
{
margin:0px auto;
padding:0px;
border:0;
background-repeat:repeat-x;
/*background-image:url(make.jpg);*/
font-size:12px;
font-family:Tahoma,Geneva,sans-serif;
}
div
{
margin:0px auto;
padding:0px;
}
/*整体布局样式*/
#header,#footer
{
960px;
}
#header
{
height:61px;
/*background:url(make.jpg) no-repeat;*/
text-align:right;
}
#navi
{
100%;
height:91px;
/*background:url(make.jpg) repeat-x;*/
}
#main
{
border:5px solid #8ac1db;
height:410px;
950px;
background-color:#e8f3f8;
}
#footer
{
height:50px;
}
#pages
{
height:28px;
}
/*正文部分*/
#operate,#data,#pages
{
910px;
}
#operate
{
height:30px;
}
#data
{
height:340px;
}
/*页头的超级链接*/
#header a
{
margin-right:40px;
line-height:61px;
color:#fff;
text-decoration:none;
}
#header a:hover
{
font-weight:bold;
text-decoration:underline;
}
/*页脚文本*/
#footer p
{
margin:0px auto;
color:#fff;
line-height:25px;
text-align:center;
}
/*数据表格部分*/
#datalist
{
910px;
margin:5px auto;
text-align:center;
background-color:#fff;
border:0;
border-collapse:collapse;
}
#datalist td
{
height:32px;
vertical-align:middle;
border:1px solid #ccc;
}
#datalist tr:hover
{
background-color:#f7f9fd;
}
#datalist tr.header td
{
font-weight:bold;
height:35px;
background:#fbedce;
}
/*按钮样式*/
input.btn modify,input.btn delete
{
margin-left:3px;
58px;
cursor:pointer;
color:#000;
border:0;
background-color:#fff;
background-repeat:no-repeat;
background-position:left center;
}
input.btn_modify
{
background-image:url(modify.jpg);
}
input.btn_delete
{
background-image:url(delete.jpg);
}
/*页头logo部分*/
#header img
{
float:left;
}