JAVA HTMLCSSJS DAY03
1 管理员列表-3
1.1 问题
设置页面文本
1.2 方案
超链接：<a>
段落：<p>
1.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：修改文件
修改admin_list.html，设置文本内容，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="utf-8" />
<style type="text/css">
/* 1.设置页面整体布局 */
body {
margin:0;
padding:0;
}
div {
border:1px solid #000;
}
#logo {
width:960px;
height:61px;
margin:0 auto;
}
#nav {
width:100%;
height:91px;
}
#main {
width:100%;
height:410px;
margin:0 auto;
padding:10px 0 0 0;
}
#footer {
width:960px;
height:50px;
margin:0 auto;
}
.content {
width:950px;
height:390px;
border:5px solid #8ac1db;
margin:0 auto;
}
.operate {
width:910px;
height:40px;
margin:0 auto;
}
.data {
width:910px;
height:310px;
margin:0 auto;
}
.pages {
width:910px;
height:40px;
margin:0 auto;
}
/* 2.设置页面背景 */
body {
background-color:#0EA8D8;
}
#logo {
background-image:url('../img/top_bg.png');
}
#main {
background:url('../img/content_bg.png') repeat-x top;
}
#nav {
background-color:#0488BB;
}
.content {
background-color:#e8f3f8;
}
#cold_bold /* 3.设置文本格式 */
#cold_bold body {
#cold_bold font-family:'微软雅黑','文泉驿正黑','黑体';
#cold_bold font-size:14px;
#cold_bold }
#cold_bold #logo, #footer {
#cold_bold color:#fff;
#cold_bold }
#cold_bold #logo {
#cold_bold text-align:right;
#cold_bold line-height:61px;
#cold_bold }
#cold_bold /*
#cold_bold #logo a {
#cold_bold border:1px solid #000;
#cold_bold }
#cold_bold */
#cold_bold #logo a {
#cold_bold color:#fff;
#cold_bold padding-right:40px;
#cold_bold text-decoration:none;
#cold_bold }
#cold_bold #logo a:hover {
#cold_bold font-weight:bold;
#cold_bold }
#cold_bold #footer p {
#cold_bold text-align:center;
#cold_bold margin:0;
#cold_bold line-height:25px;
#cold_bold }
#cold_bold /*
#cold_bold #footer p {
#cold_bold border:1px solid red;
#cold_bold }
#cold_bold */
</style>
</head>
<body>
<!-- logo区 -->
<div id="logo">
#cold_bold<a href="#">[退出]</a>
</div>
<!-- 导航区 -->
<div id="nav"></div>
<!-- 主体区 -->
<div id="main">
<!-- 内容区 -->
<div class="content">
<!-- 操作区 -->
<div class="operate"></div>
<!-- 数据区 -->
<div class="data"></div>
<!-- 分页区 -->
<div class="pages"></div>
</div>
</div>
<!-- 版权区 -->
<div id="footer">
#cold_bold<p><源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目></p>
#cold_bold<p>版权所有©加拿大达内IT培训集团公司</p>
</div>
</body>
</html>
步骤二：测试
使用浏览器打开admin_list.html，效果如下图：
图-1
1.4 完整代码
本案例的完整代码如下所示：
admin_list.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="utf-8" />
<style type="text/css">
/* 1.设置页面整体布局 */
body {
margin:0;
padding:0;
}
div {
border:1px solid #000;
}
#logo {
width:960px;
height:61px;
margin:0 auto;
}
#nav {
width:100%;
height:91px;
}
#main {
width:100%;
height:410px;
margin:0 auto;
padding:10px 0 0 0;
}
#footer {
width:960px;
height:50px;
margin:0 auto;
}
.content {
width:950px;
height:390px;
border:5px solid #8ac1db;
margin:0 auto;
}
.operate {
width:910px;
height:40px;
margin:0 auto;
}
.data {
width:910px;
height:310px;
margin:0 auto;
}
.pages {
width:910px;
height:40px;
margin:0 auto;
}
/* 2.设置页面背景 */
body {
background-color:#0EA8D8;
}
#logo {
background-image:url('../img/top_bg.png');
}
#main {
background:url('../img/content_bg.png') repeat-x top;
}
#nav {
background-color:#0488BB;
}
.content {
background-color:#e8f3f8;
}
/* 3.设置文本格式 */
body {
font-family:'微软雅黑','文泉驿正黑','黑体';
font-size:14px;
}
#logo, #footer {
color:#fff;
}
#logo {
text-align:right;
line-height:61px;
}
/*
#logo a {
border:1px solid #000;
}
*/
#logo a {
color:#fff;
padding-right:40px;
text-decoration:none;
}
#logo a:hover {
font-weight:bold;
}
#footer p {
text-align:center;
margin:0;
line-height:25px;
}
/*
#footer p {
border:1px solid red;
}
*/
</style>
</head>
<body>
<!-- logo区 -->
<div id="logo">
<a href="#">[退出]</a>
</div>
<!-- 导航区 -->
<div id="nav"></div>
<!-- 主体区 -->
<div id="main">
<!-- 内容区 -->
<div class="content">
<!-- 操作区 -->
<div class="operate"></div>
<!-- 数据区 -->
<div class="data"></div>
<!-- 分页区 -->
<div class="pages"></div>
</div>
</div>
<!-- 版权区 -->
<div id="footer">
<p><源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目></p>
<p>版权所有©加拿大达内IT培训集团公司</p>
</div>
</body>
</html>
2 管理员列表-4
2.1 问题
设置页面内容
2.2 方案
表格：<table>
按钮：<input type=”button”/>
超链接：<a>
2.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：修改文件
修改admin_list.html，设置页面内容，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="utf-8" />
<style type="text/css">
/* 1.设置页面整体布局 */
body {
margin:0;
padding:0;
}
div {
border:1px solid #000;
}
#logo {
width:960px;
height:61px;
margin:0 auto;
}
#nav {
width:100%;
height:91px;
}
#main {
width:100%;
height:410px;
margin:0 auto;
padding:10px 0 0 0;
}
#footer {
width:960px;
height:50px;
margin:0 auto;
}
.content {
width:950px;
height:390px;
border:5px solid #8ac1db;
margin:0 auto;
}
.operate {
width:910px;
height:40px;
margin:0 auto;
}
.data {
width:910px;
height:310px;
margin:0 auto;
}
.pages {
width:910px;
height:40px;
margin:0 auto;
}
/* 2.设置页面背景 */
body {
background-color:#0EA8D8;
}
#logo {
background-image:url('../img/top_bg.png');
}
#main {
background:url('../img/content_bg.png') repeat-x top;
}
#nav {
background-color:#0488BB;
}
.content {
background-color:#e8f3f8;
}
/* 3.设置文本格式 */
body {
font-family:'微软雅黑','文泉驿正黑','黑体';
font-size:14px;
}
#logo, #footer {
color:#fff;
}
#logo {
text-align:right;
line-height:61px;
}
/*
#logo a {
border:1px solid #000;
}
*/
#logo a {
color:#fff;
padding-right:40px;
text-decoration:none;
}
#logo a:hover {
font-weight:bold;
}
#footer p {
text-align:center;
margin:0;
line-height:25px;
}
/*
#footer p {
border:1px solid red;
}
*/
/* 4.设置内容 */
.operate {
text-align:right;
line-height:40px;
}
.add {
background-image:url('../img/btn_bg.png');
width:71px;
height:26px;
border:0;
color:#fff;
}
.data_list {
width:910px;
background-color:#fff;
border-collapse:collapse;
margin:0 auto;
}
.data_list th {
border:1px solid #ccc;
height:40px;
line-height:40px;
font-weight:bold;
background-color:#fbedce;
}
.data_list td {
border:1px solid #ccc;
height:32px;
line-height:32px;
text-align:center;
}
.data_list tbody tr:hover {
background-color:#f7f9fd;
}
.modify {
border:0;
background:url('../img/modification.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.delete {
border:0;
background:url('../img/delete.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.pages {
text-align:center;
}
.pages a {
color:#000;
text-decoration:none;
margin:0;
padding:5px 10px;
border:1px solid #e8f3f8;
}
.pages a:hover {
border:1px solid #97B9C9;
color:#067DB5;
background-color:#CDDDE4;
}
.pages .current_page {
border:1px solid #97B9C9;
background-color:#fff;
}
</style>
</head>
<body>
<!-- logo区 -->
<div id="logo">
<a href="#">[退出]</a>
</div>
<!-- 导航区 -->
<div id="nav"></div>
<!-- 主体区 -->
<div id="main">
<!-- 内容区 -->
<div class="content">
<!-- 操作区 -->
<div class="operate">
<input type="button" value="增加" class="add"/>
</div>
<!-- 数据区 -->
<div class="data">
<table class="data_list">
<thead>
<tr>
<th><input type="checkbox" id="check_all"/><label for="check_all">全选</label></th>
<th>管理员ID</th>
<th>姓名</th>
<th>拥有角色</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>唐僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>孙悟空</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>猪八戒</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>沙僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
</tbody>
</table>
</div>
<!-- 分页区 -->
<div class="pages">
<a href="#">上一页</a>
<a href="#" class="current_page">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">下一页</a>
</div>
</div>
</div>
<!-- 版权区 -->
<div id="footer">
<p><源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目></p>
<p>版权所有©加拿大达内IT培训集团公司</p>
</div>
</body>
</html>
步骤二：测试
使用浏览器打开admin_list.html，效果如下图：
图-2
2.4 完整代码
本案例的完整代码如下所示：
admin_list.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="utf-8" />
<style type="text/css">
/* 1.设置页面整体布局 */
body {
margin:0;
padding:0;
}
div {
border:1px solid #000;
}
#logo {
width:960px;
height:61px;
margin:0 auto;
}
#nav {
width:100%;
height:91px;
}
#main {
width:100%;
height:410px;
margin:0 auto;
padding:10px 0 0 0;
}
#footer {
width:960px;
height:50px;
margin:0 auto;
}
.content {
width:950px;
height:390px;
border:5px solid #8ac1db;
margin:0 auto;
}
.operate {
width:910px;
height:40px;
margin:0 auto;
}
.data {
width:910px;
height:310px;
margin:0 auto;
}
.pages {
width:910px;
height:40px;
margin:0 auto;
}
/* 2.设置页面背景 */
body {
background-color:#0EA8D8;
}
#logo {
background-image:url('../img/top_bg.png');
}
#main {
background:url('../img/content_bg.png') repeat-x top;
}
#nav {
background-color:#0488BB;
}
.content {
background-color:#e8f3f8;
}
/* 3.设置文本格式 */
body {
font-family:'微软雅黑','文泉驿正黑','黑体';
font-size:14px;
}
#logo, #footer {
color:#fff;
}
#logo {
text-align:right;
line-height:61px;
}
/*
#logo a {
border:1px solid #000;
}
*/
#logo a {
color:#fff;
padding-right:40px;
text-decoration:none;
}
#logo a:hover {
font-weight:bold;
}
#footer p {
text-align:center;
margin:0;
line-height:25px;
}
/*
#footer p {
border:1px solid red;
}
*/
/* 4.设置内容 */
.operate {
text-align:right;
line-height:40px;
}
.add {
background-image:url('../img/btn_bg.png');
width:71px;
height:26px;
border:0;
color:#fff;
}
.data_list {
width:910px;
background-color:#fff;
border-collapse:collapse;
margin:0 auto;
}
.data_list th {
border:1px solid #ccc;
height:40px;
line-height:40px;
font-weight:bold;
background-color:#fbedce;
}
.data_list td {
border:1px solid #ccc;
height:32px;
line-height:32px;
text-align:center;
}
.data_list tbody tr:hover {
background-color:#f7f9fd;
}
.modify {
border:0;
background:url('../img/modification.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.delete {
border:0;
background:url('../img/delete.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.pages {
text-align:center;
}
.pages a {
color:#000;
text-decoration:none;
margin:0;
padding:5px 10px;
border:1px solid #e8f3f8;
}
.pages a:hover {
border:1px solid #97B9C9;
color:#067DB5;
background-color:#CDDDE4;
}
.pages .current_page {
border:1px solid #97B9C9;
background-color:#fff;
}
</style>
</head>
<body>
<!-- logo区 -->
<div id="logo">
<a href="#">[退出]</a>
</div>
<!-- 导航区 -->
<div id="nav"></div>
<!-- 主体区 -->
<div id="main">
<!-- 内容区 -->
<div class="content">
<!-- 操作区 -->
<div class="operate">
<input type="button" value="增加" class="add"/>
</div>
<!-- 数据区 -->
<div class="data">
<table class="data_list">
<thead>
<tr>
<th><input type="checkbox" id="check_all"/><label for="check_all">全选</label></th>
<th>管理员ID</th>
<th>姓名</th>
<th>拥有角色</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>唐僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>孙悟空</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>猪八戒</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>沙僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
</tbody>
</table>
</div>
<!-- 分页区 -->
<div class="pages">
<a href="#">上一页</a>
<a href="#" class="current_page">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">下一页</a>
</div>
</div>
</div>
<!-- 版权区 -->
<div id="footer">
<p><源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目></p>
<p>版权所有©加拿大达内IT培训集团公司</p>
</div>
</body>
</html>
3 管理员列表-5
3.1 问题
设置页面LOGO
3.2 方案
采用左浮动，设置页面的LOGO到指定位置。
3.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：修改文件
修改admin_list.html，增加LOGO，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="utf-8" />
<style type="text/css">
/* 1.设置页面整体布局 */
body {
margin:0;
padding:0;
}
div {
border:1px solid #000;
}
#logo {
width:960px;
height:61px;
margin:0 auto;
}
#nav {
width:100%;
height:91px;
}
#main {
width:100%;
height:410px;
margin:0 auto;
padding:10px 0 0 0;
}
#footer {
width:960px;
height:50px;
margin:0 auto;
}
.content {
width:950px;
height:390px;
border:5px solid #8ac1db;
margin:0 auto;
}
.operate {
width:910px;
height:40px;
margin:0 auto;
}
.data {
width:910px;
height:310px;
margin:0 auto;
}
.pages {
width:910px;
height:40px;
margin:0 auto;
}
/* 2.设置页面背景 */
body {
background-color:#0EA8D8;
}
#logo {
background-image:url('../img/top_bg.png');
}
#main {
background:url('../img/content_bg.png') repeat-x top;
}
#nav {
background-color:#0488BB;
}
.content {
background-color:#e8f3f8;
}
/* 3.设置文本格式 */
body {
font-family:'微软雅黑','文泉驿正黑','黑体';
font-size:14px;
}
#logo, #footer {
color:#fff;
}
#logo {
text-align:right;
line-height:61px;
}
/*
#logo a {
border:1px solid #000;
}
*/
#logo a {
color:#fff;
padding-right:40px;
text-decoration:none;
}
#logo a:hover {
font-weight:bold;
}
#footer p {
text-align:center;
margin:0;
line-height:25px;
}
/*
#footer p {
border:1px solid red;
}
*/
/* 4.设置内容 */
.operate {
text-align:right;
line-height:40px;
}
.add {
background-image:url('../img/btn_bg.png');
width:71px;
height:26px;
border:0;
color:#fff;
}
.data_list {
width:910px;
background-color:#fff;
border-collapse:collapse;
margin:0 auto;
}
.data_list th {
border:1px solid #ccc;
height:40px;
line-height:40px;
font-weight:bold;
background-color:#fbedce;
}
.data_list td {
border:1px solid #ccc;
height:32px;
line-height:32px;
text-align:center;
}
.data_list tbody tr:hover {
background-color:#f7f9fd;
}
.modify {
border:0;
background:url('../img/modification.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.delete {
border:0;
background:url('../img/delete.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.pages {
text-align:center;
}
.pages a {
color:#000;
text-decoration:none;
margin:0;
padding:5px 10px;
border:1px solid #e8f3f8;
}
.pages a:hover {
border:1px solid #97B9C9;
color:#067DB5;
background-color:#CDDDE4;
}
.pages .current_page {
border:1px solid #97B9C9;
background-color:#fff;
}
/* 5.定位图片、块 */
#logo img {
float:left;
}
</style>
</head>
<body>
<!-- logo区 -->
<div id="logo">
<img src="../img/logo.png"/>
<a href="#">[退出]</a>
</div>
<!-- 导航区 -->
<div id="nav"></div>
<!-- 主体区 -->
<div id="main">
<!-- 内容区 -->
<div class="content">
<!-- 操作区 -->
<div class="operate">
<input type="button" value="增加" class="add"/>
</div>
<!-- 数据区 -->
<div class="data">
<table class="data_list">
<thead>
<tr>
<th><input type="checkbox" id="check_all"/><label for="check_all">全选</label></th>
<th>管理员ID</th>
<th>姓名</th>
<th>拥有角色</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>唐僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>孙悟空</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>猪八戒</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>沙僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
</tbody>
</table>
</div>
<!-- 分页区 -->
<div class="pages">
<a href="#">上一页</a>
<a href="#" class="current_page">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">下一页</a>
</div>
</div>
</div>
<!-- 版权区 -->
<div id="footer">
<p><源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目></p>
<p>版权所有©加拿大达内IT培训集团公司</p>
</div>
</body>
</html>
步骤二：测试
使用浏览器打开admin_list.html，效果如下图：
图-3
3.4 完整代码
本案例的完整代码如下所示：
admin_list.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="utf-8" />
<style type="text/css">
/* 1.设置页面整体布局 */
body {
margin:0;
padding:0;
}
div {
border:1px solid #000;
}
#logo {
width:960px;
height:61px;
margin:0 auto;
}
#nav {
width:100%;
height:91px;
}
#main {
width:100%;
height:410px;
margin:0 auto;
padding:10px 0 0 0;
}
#footer {
width:960px;
height:50px;
margin:0 auto;
}
.content {
width:950px;
height:390px;
border:5px solid #8ac1db;
margin:0 auto;
}
.operate {
width:910px;
height:40px;
margin:0 auto;
}
.data {
width:910px;
height:310px;
margin:0 auto;
}
.pages {
width:910px;
height:40px;
margin:0 auto;
}
/* 2.设置页面背景 */
body {
background-color:#0EA8D8;
}
#logo {
background-image:url('../img/top_bg.png');
}
#main {
background:url('../img/content_bg.png') repeat-x top;
}
#nav {
background-color:#0488BB;
}
.content {
background-color:#e8f3f8;
}
/* 3.设置文本格式 */
body {
font-family:'微软雅黑','文泉驿正黑','黑体';
font-size:14px;
}
#logo, #footer {
color:#fff;
}
#logo {
text-align:right;
line-height:61px;
}
/*
#logo a {
border:1px solid #000;
}
*/
#logo a {
color:#fff;
padding-right:40px;
text-decoration:none;
}
#logo a:hover {
font-weight:bold;
}
#footer p {
text-align:center;
margin:0;
line-height:25px;
}
/*
#footer p {
border:1px solid red;
}
*/
/* 4.设置内容 */
.operate {
text-align:right;
line-height:40px;
}
.add {
background-image:url('../img/btn_bg.png');
width:71px;
height:26px;
border:0;
color:#fff;
}
.data_list {
width:910px;
background-color:#fff;
border-collapse:collapse;
margin:0 auto;
}
.data_list th {
border:1px solid #ccc;
height:40px;
line-height:40px;
font-weight:bold;
background-color:#fbedce;
}
.data_list td {
border:1px solid #ccc;
height:32px;
line-height:32px;
text-align:center;
}
.data_list tbody tr:hover {
background-color:#f7f9fd;
}
.modify {
border:0;
background:url('../img/modification.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.delete {
border:0;
background:url('../img/delete.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.pages {
text-align:center;
}
.pages a {
color:#000;
text-decoration:none;
margin:0;
padding:5px 10px;
border:1px solid #e8f3f8;
}
.pages a:hover {
border:1px solid #97B9C9;
color:#067DB5;
background-color:#CDDDE4;
}
.pages .current_page {
border:1px solid #97B9C9;
background-color:#fff;
}
/* 5.定位图片、块 */
#logo img {
float:left;
}
</style>
</head>
<body>
<!-- logo区 -->
<div id="logo">
<img src="../img/logo.png"/>
<a href="#">[退出]</a>
</div>
<!-- 导航区 -->
<div id="nav"></div>
<!-- 主体区 -->
<div id="main">
<!-- 内容区 -->
<div class="content">
<!-- 操作区 -->
<div class="operate">
<input type="button" value="增加" class="add"/>
</div>
<!-- 数据区 -->
<div class="data">
<table class="data_list">
<thead>
<tr>
<th><input type="checkbox" id="check_all"/><label for="check_all">全选</label></th>
<th>管理员ID</th>
<th>姓名</th>
<th>拥有角色</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>唐僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>孙悟空</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>猪八戒</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>沙僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
</tbody>
</table>
</div>
<!-- 分页区 -->
<div class="pages">
<a href="#">上一页</a>
<a href="#" class="current_page">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">下一页</a>
</div>
</div>
</div>
<!-- 版权区 -->
<div id="footer">
<p><源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目></p>
<p>版权所有©加拿大达内IT培训集团公司</p>
</div>
</body>
</html>
4 照片墙
4.1 问题
实现照片墙效果
4.2 方案
采用无序列表排列照片，并使用浮动布局照片。
4.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
在day03下创建photo_wall.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>照片墙</title>
<meta charset="utf-8" />
<style type="text/css">
body {
background-color:#300;
}
.wall {
width:780px;
margin:10px auto;
list-style-type:none;
color:#000;
/*border:1px solid blue;*/
}
.wall li {
background:#fff;
border:1px solid #ddd;
width:218px;
padding:10px;
margin:10px;
float:left;
}
.wall p {
text-align:center;
}
.wall li:hover {
position:relative;
left:-2px;
top:-2px;
cursor:pointer;
}
</style>
</head>
<body>
<ul class="wall">
<li>
<img src="../images/01.jpg"/>
<p>又到了秋风萧瑟的时节，</p>
</li>
<li>
<img src="../images/02.jpg"/>
<p>黄叶依旧，你在何方？</p>
</li>
<li>
<img src="../images/03.jpg"/>
<p>有你的日子，真的好！</p>
</li>
<li>
<img src="../images/04.jpg"/>
<p>无论是驾车，</p>
</li>
<li>
<img src="../images/05.jpg"/>
<p>或者是泛舟，</p>
</li>
<li>
<img src="../images/06.jpg"/>
<p>定要把你找回！</p>
</li>
</ul>
</body>
</html>
步骤二：测试
使用浏览器打开photo_wall.html，效果如下图：
图-4
4.4 完整代码
本案例的完整代码如下所示：
Photo_wall.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>照片墙</title>
<meta charset="utf-8" />
<style type="text/css">
body {
background-color:#300;
}
.wall {
width:780px;
margin:10px auto;
list-style-type:none;
color:#000;
/*border:1px solid blue;*/
}
.wall li {
background:#fff;
border:1px solid #ddd;
width:218px;
padding:10px;
margin:10px;
float:left;
}
.wall p {
text-align:center;
}
.wall li:hover {
position:relative;
left:-2px;
top:-2px;
cursor:pointer;
}
</style>
</head>
<body>
<ul class="wall">
<li>
<img src="../images/01.jpg"/>
<p>又到了秋风萧瑟的时节，</p>
</li>
<li>
<img src="../images/02.jpg"/>
<p>黄叶依旧，你在何方？</p>
</li>
<li>
<img src="../images/03.jpg"/>
<p>有你的日子，真的好！</p>
</li>
<li>
<img src="../images/04.jpg"/>
<p>无论是驾车，</p>
</li>
<li>
<img src="../images/05.jpg"/>
<p>或者是泛舟，</p>
</li>
<li>
<img src="../images/06.jpg"/>
<p>定要把你找回！</p>
</li>
</ul>
</body>
</html>
5 新闻图片
5.1 问题
实现新闻图片效果。
5.2 方案
使用绝对定位，在图片上增加文字。
5.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
在day03下创建news.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>新闻图片</title>
<meta charset="utf-8" />
<style type="text/css">
div {
width:256px;
border:2px solid #ddd;
position:relative;
}
p {
background-color:#333;
color:#fff;
margin:0;
width:100%;
line-height:1.6em;
text-align:center;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<h1>新闻图片</h1>
<div class="outter">
<img src="../images/image1.png"/>
<p>十一黄金周游客挤爆张家界</p>
</div>
</body>
</html>
步骤二：测试
使用浏览器打开news.html，效果如下图：
图-5
5.4 完整代码
本案例的完整代码如下所示：
admin_list.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>新闻图片</title>
<meta charset="utf-8" />
<style type="text/css">
div {
width:256px;
border:2px solid #ddd;
position:relative;
}
p {
background-color:#333;
color:#fff;
margin:0;
width:100%;
line-height:1.6em;
text-align:center;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<h1>新闻图片</h1>
<div class="outter">
<img src="../images/image1.png"/>
<p>十一黄金周游客挤爆张家界</p>
</div>
</body>
</html>
6 管理员列表-6
6.1 问题
设置信息提示框。
6.2 方案
采用绝对定位，设置信息提示框的位置。
6.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：修改文件
修改admin_list.html，增加信息提示框，并设置其位置，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="utf-8" />
<style type="text/css">
/* 1.设置页面整体布局 */
body {
margin:0;
padding:0;
}
div {
border:1px solid #000;
}
#logo {
width:960px;
height:61px;
margin:0 auto;
}
#nav {
width:100%;
height:91px;
}
#main {
width:100%;
height:410px;
margin:0 auto;
padding:10px 0 0 0;
}
#footer {
width:960px;
height:50px;
margin:0 auto;
}
.content {
width:950px;
height:390px;
border:5px solid #8ac1db;
margin:0 auto;
}
.operate {
width:910px;
height:40px;
margin:0 auto;
}
.data {
width:910px;
height:310px;
margin:0 auto;
}
.pages {
width:910px;
height:40px;
margin:0 auto;
}
/* 2.设置页面背景 */
body {
background-color:#0EA8D8;
}
#logo {
background-image:url('../img/top_bg.png');
}
#main {
background:url('../img/content_bg.png') repeat-x top;
}
#nav {
background-color:#0488BB;
}
.content {
background-color:#e8f3f8;
}
/* 3.设置文本格式 */
body {
font-family:'微软雅黑','文泉驿正黑','黑体';
font-size:14px;
}
#logo, #footer {
color:#fff;
}
#logo {
text-align:right;
line-height:61px;
}
/*
#logo a {
border:1px solid #000;
}
*/
#logo a {
color:#fff;
padding-right:40px;
text-decoration:none;
}
#logo a:hover {
font-weight:bold;
}
#footer p {
text-align:center;
margin:0;
line-height:25px;
}
/*
#footer p {
border:1px solid red;
}
*/
/* 4.设置内容 */
.operate {
text-align:right;
line-height:40px;
}
.add {
background-image:url('../img/btn_bg.png');
width:71px;
height:26px;
border:0;
color:#fff;
}
.data_list {
width:910px;
background-color:#fff;
border-collapse:collapse;
margin:0 auto;
}
.data_list th {
border:1px solid #ccc;
height:40px;
line-height:40px;
font-weight:bold;
background-color:#fbedce;
}
.data_list td {
border:1px solid #ccc;
height:32px;
line-height:32px;
text-align:center;
}
.data_list tbody tr:hover {
background-color:#f7f9fd;
}
.modify {
border:0;
background:url('../img/modification.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.delete {
border:0;
background:url('../img/delete.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.pages {
text-align:center;
}
.pages a {
color:#000;
text-decoration:none;
margin:0;
padding:5px 10px;
border:1px solid #e8f3f8;
}
.pages a:hover {
border:1px solid #97B9C9;
color:#067DB5;
background-color:#CDDDE4;
}
.pages .current_page {
border:1px solid #97B9C9;
background-color:#fff;
}
/* 5.定位图片、块 */
#logo img {
float:left;
}
.content {
position:relative;
}
.msg {
position:absolute;
left:250px;
top:100px;
width:400px;
height:50px;
border:1px solid #F68A8A;
background-color:#FDECEC;
padding:10px 10px 10px 40px;
}
.close {
float:right;
border:0;
width: 22px;
height: 22px;
background:url("../img/close.png") no-repeat;
cursor: pointer;
}
.msg {
background:#FDECEC url('../img/ok.png') 10px 30px no-repeat;
}
.msg p {
/*border:1px solid red;*/
line-height:30px;
}
</style>
</head>
<body>
<!-- logo区 -->
<div id="logo">
<img src="../img/logo.png"/>
<a href="#">[退出]</a>
</div>
<!-- 导航区 -->
<div id="nav"></div>
<!-- 主体区 -->
<div id="main">
<!-- 内容区 -->
<div class="content">
<!-- 操作区 -->
<div class="operate">
<input type="button" value="增加" class="add"/>
</div>
<!-- 数据区 -->
<div class="data">
<table class="data_list">
<thead>
<tr>
<th><input type="checkbox" id="check_all"/><label for="check_all">全选</label></th>
<th>管理员ID</th>
<th>姓名</th>
<th>拥有角色</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>唐僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>孙悟空</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>猪八戒</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>沙僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
</tbody>
</table>
</div>
<!-- 分页区 -->
<div class="pages">
<a href="#">上一页</a>
<a href="#" class="current_page">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">下一页</a>
</div>
<!-- 提示信息区 -->
<div class="msg">
<input type="button" value="X" class="close"/>
<p>操作成功！</p>
</div>
</div>
</div>
<!-- 版权区 -->
<div id="footer">
<p><源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目></p>
<p>版权所有©加拿大达内IT培训集团公司</p>
</div>
</body>
</html>
步骤二：测试
使用浏览器打开admin_list.html，效果如下图：
图-6
6.4 完整代码
本案例的完整代码如下所示：
admin_list.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="utf-8" />
<style type="text/css">
/* 1.设置页面整体布局 */
body {
margin:0;
padding:0;
}
div {
border:1px solid #000;
}
#logo {
width:960px;
height:61px;
margin:0 auto;
}
#nav {
width:100%;
height:91px;
}
#main {
width:100%;
height:410px;
margin:0 auto;
padding:10px 0 0 0;
}
#footer {
width:960px;
height:50px;
margin:0 auto;
}
.content {
width:950px;
height:390px;
border:5px solid #8ac1db;
margin:0 auto;
}
.operate {
width:910px;
height:40px;
margin:0 auto;
}
.data {
width:910px;
height:310px;
margin:0 auto;
}
.pages {
width:910px;
height:40px;
margin:0 auto;
}
/* 2.设置页面背景 */
body {
background-color:#0EA8D8;
}
#logo {
background-image:url('../img/top_bg.png');
}
#main {
background:url('../img/content_bg.png') repeat-x top;
}
#nav {
background-color:#0488BB;
}
.content {
background-color:#e8f3f8;
}
/* 3.设置文本格式 */
body {
font-family:'微软雅黑','文泉驿正黑','黑体';
font-size:14px;
}
#logo, #footer {
color:#fff;
}
#logo {
text-align:right;
line-height:61px;
}
/*
#logo a {
border:1px solid #000;
}
*/
#logo a {
color:#fff;
padding-right:40px;
text-decoration:none;
}
#logo a:hover {
font-weight:bold;
}
#footer p {
text-align:center;
margin:0;
line-height:25px;
}
/*
#footer p {
border:1px solid red;
}
*/
/* 4.设置内容 */
.operate {
text-align:right;
line-height:40px;
}
.add {
background-image:url('../img/btn_bg.png');
width:71px;
height:26px;
border:0;
color:#fff;
}
.data_list {
width:910px;
background-color:#fff;
border-collapse:collapse;
margin:0 auto;
}
.data_list th {
border:1px solid #ccc;
height:40px;
line-height:40px;
font-weight:bold;
background-color:#fbedce;
}
.data_list td {
border:1px solid #ccc;
height:32px;
line-height:32px;
text-align:center;
}
.data_list tbody tr:hover {
background-color:#f7f9fd;
}
.modify {
border:0;
background:url('../img/modification.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.delete {
border:0;
background:url('../img/delete.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.pages {
text-align:center;
}
.pages a {
color:#000;
text-decoration:none;
margin:0;
padding:5px 10px;
border:1px solid #e8f3f8;
}
.pages a:hover {
border:1px solid #97B9C9;
color:#067DB5;
background-color:#CDDDE4;
}
.pages .current_page {
border:1px solid #97B9C9;
background-color:#fff;
}
/* 5.定位图片、块 */
#logo img {
float:left;
}
.content {
position:relative;
}
.msg {
position:absolute;
left:250px;
top:100px;
width:400px;
height:50px;
border:1px solid #F68A8A;
background-color:#FDECEC;
padding:10px 10px 10px 40px;
}
.close {
float:right;
border:0;
width: 22px;
height: 22px;
background:url("../img/close.png") no-repeat;
cursor: pointer;
}
.msg {
background:#FDECEC url('../img/ok.png') 10px 30px no-repeat;
}
.msg p {
/*border:1px solid red;*/
line-height:30px;
}
</style>
</head>
<body>
<!-- logo区 -->
<div id="logo">
<img src="../img/logo.png"/>
<a href="#">[退出]</a>
</div>
<!-- 导航区 -->
<div id="nav"></div>
<!-- 主体区 -->
<div id="main">
<!-- 内容区 -->
<div class="content">
<!-- 操作区 -->
<div class="operate">
<input type="button" value="增加" class="add"/>
</div>
<!-- 数据区 -->
<div class="data">
<table class="data_list">
<thead>
<tr>
<th><input type="checkbox" id="check_all"/><label for="check_all">全选</label></th>
<th>管理员ID</th>
<th>姓名</th>
<th>拥有角色</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>唐僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>孙悟空</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>猪八戒</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>沙僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
</tbody>
</table>
</div>
<!-- 分页区 -->
<div class="pages">
<a href="#">上一页</a>
<a href="#" class="current_page">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">下一页</a>
</div>
<!-- 提示信息区 -->
<div class="msg">
<input type="button" value="X" class="close"/>
<p>操作成功！</p>
</div>
</div>
</div>
<!-- 版权区 -->
<div id="footer">
<p><源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目></p>
<p>版权所有©加拿大达内IT培训集团公司</p>
</div>
</body>
</html>
7 管理员列表-7
7.1 问题
设置导航栏。
7.2 方案
使用无序列表+浮动实现导航栏。
7.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：修改文件
修改admin_list.html，增加导航栏设置，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="utf-8" />
<style type="text/css">
/* 1.设置页面整体布局 */
body {
margin:0;
padding:0;
}
/*
div {
border:1px solid #000;
}
*/
#logo {
width:960px;
height:61px;
margin:0 auto;
}
#nav {
width:100%;
height:91px;
}
#main {
width:100%;
height:410px;
margin:0 auto;
padding:10px 0 0 0;
}
#footer {
width:960px;
height:50px;
margin:0 auto;
}
.content {
width:950px;
height:390px;
border:5px solid #8ac1db;
margin:0 auto;
}
.operate {
width:910px;
height:40px;
margin:0 auto;
}
.data {
width:910px;
height:310px;
margin:0 auto;
}
.pages {
width:910px;
height:40px;
margin:0 auto;
}
/* 2.设置页面背景 */
body {
background-color:#0EA8D8;
}
#logo {
background-image:url('../img/top_bg.png');
}
#main {
background:url('../img/content_bg.png') repeat-x top;
}
#nav {
background-color:#0488BB;
}
.content {
background-color:#e8f3f8;
}
/* 3.设置文本格式 */
body {
font-family:'微软雅黑','文泉驿正黑','黑体';
font-size:14px;
}
#logo, #footer {
color:#fff;
}
#logo {
text-align:right;
line-height:61px;
}
/*
#logo a {
border:1px solid #000;
}
*/
#logo a {
color:#fff;
padding-right:40px;
text-decoration:none;
}
#logo a:hover {
font-weight:bold;
}
#footer p {
text-align:center;
margin:0;
line-height:25px;
}
/*
#footer p {
border:1px solid red;
}
*/
/* 4.设置内容 */
.operate {
text-align:right;
line-height:40px;
}
.add {
background-image:url('../img/btn_bg.png');
width:71px;
height:26px;
border:0;
color:#fff;
}
.data_list {
width:910px;
background-color:#fff;
border-collapse:collapse;
margin:0 auto;
}
.data_list th {
border:1px solid #ccc;
height:40px;
line-height:40px;
font-weight:bold;
background-color:#fbedce;
}
.data_list td {
border:1px solid #ccc;
height:32px;
line-height:32px;
text-align:center;
}
.data_list tbody tr:hover {
background-color:#f7f9fd;
}
.modify {
border:0;
background:url('../img/modification.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.delete {
border:0;
background:url('../img/delete.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.pages {
text-align:center;
}
.pages a {
color:#000;
text-decoration:none;
margin:0;
padding:5px 10px;
border:1px solid #e8f3f8;
}
.pages a:hover {
border:1px solid #97B9C9;
color:#067DB5;
background-color:#CDDDE4;
}
.pages .current_page {
border:1px solid #97B9C9;
background-color:#fff;
}
/* 5.定位图片、块 */
#logo img {
float:left;
}
.content {
position:relative;
}
.msg {
position:absolute;
left:250px;
top:100px;
width:400px;
height:50px;
border:1px solid #F68A8A;
background-color:#FDECEC;
padding:10px 10px 10px 40px;
}
.close {
float:right;
border:0;
width: 22px;
height: 22px;
background:url("../img/close.png") no-repeat;
cursor: pointer;
}
.msg {
background:#FDECEC url('../img/ok.png') 10px 30px no-repeat;
}
.msg p {
/*border:1px solid red;*/
line-height:30px;
}
/* 6.设置导航栏 */
/*
ul, li {
border:1px solid red;
}
*/
.menu {
width:960px;
margin:0 auto;
list-style-type:none;
}
.menu li {
width:68px;
height:77px;
float:left;
margin:7px 14px;
}
.menu a {
display:block;
width:68px;
height:77px;
}
.menu span {
display:none;
}
#index {
background-image:url('../img/index_out.png');
}
#index:hover {
background-image:url('../img/index_on.png');
}
#role {
background-image:url('../img/role_out.png');
}
#role:hover {
background-image:url('../img/role_on.png');
}
#admin {
background-image:url('../img/admin_out.png');
}
#admin:hover {
background-image:url('../img/admin_on.png');
}
#fee {
background-image:url('../img/fee_out.png');
}
#fee:hover {
background-image:url('../img/fee_on.png');
}
#account {
background-image:url('../img/account_out.png');
}
#account:hover {
background-image:url('../img/account_on.png');
}
#service {
background-image:url('../img/service_out.png');
}
#service:hover {
background-image:url('../img/service_on.png');
}
#bill {
background-image:url('../img/bill_out.png');
}
#bill:hover {
background-image:url('../img/bill_on.png');
}
#report {
background-image:url('../img/report_out.png');
}
#report:hover {
background-image:url('../img/report_on.png');
}
#info {
background-image:url('../img/information_out.png');
}
#info:hover {
background-image:url('../img/information_on.png');
}
#pwd {
background-image:url('../img/password_out.png');
}
#pwd:hover {
background-image:url('../img/password_on.png');
}
</style>
</head>
<body>
<!-- logo区 -->
<div id="logo">
<img src="../img/logo.png"/>
<a href="#">[退出]</a>
</div>
<!-- 导航区 -->
<div id="nav">
<ul class="menu">
<li><a href="#" id="index"><span>首页</span></a></li>
<li><a href="#" id="role"><span>角色管理</span></a></li>
<li><a href="#" id="admin"><span>管理员</span></a></li>
<li><a href="#" id="fee"><span>资费管理</span></a></li>
<li><a href="#" id="account"><span>账务账户</span></a></li>
<li><a href="#" id="service"><span>业务账号</span></a></li>
<li><a href="#" id="bill"><span>账单管理</span></a></li>
<li><a href="#" id="report"><span>报表</span></a></li>
<li><a href="#" id="info"><span>个人信息</span></a></li>
<li><a href="#" id="pwd"><span>修改密码</span></a></li>
</ul>
</div>
<!-- 主体区 -->
<div id="main">
<!-- 内容区 -->
<div class="content">
<!-- 操作区 -->
<div class="operate">
<input type="button" value="增加" class="add"/>
</div>
<!-- 数据区 -->
<div class="data">
<table class="data_list">
<thead>
<tr>
<th><input type="checkbox" id="check_all"/><label for="check_all">全选</label></th>
<th>管理员ID</th>
<th>姓名</th>
<th>拥有角色</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>唐僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>孙悟空</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>猪八戒</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>沙僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
</tbody>
</table>
</div>
<!-- 分页区 -->
<div class="pages">
<a href="#">上一页</a>
<a href="#" class="current_page">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">下一页</a>
</div>
<!-- 提示信息区 -->
<div class="msg">
<input type="button" value="X" class="close"/>
<p>操作成功！</p>
</div>
</div>
</div>
<!-- 版权区 -->
<div id="footer">
<p><源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目></p>
<p>版权所有©加拿大达内IT培训集团公司</p>
</div>
</body>
</html>
步骤二：测试
使用浏览器打开admin_list.html，效果如下图：
图-7
7.4 完整代码
本案例的完整代码如下所示：
admin_list.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="utf-8" />
<style type="text/css">
/* 1.设置页面整体布局 */
body {
margin:0;
padding:0;
}
/*
div {
border:1px solid #000;
}
*/
#logo {
width:960px;
height:61px;
margin:0 auto;
}
#nav {
width:100%;
height:91px;
}
#main {
width:100%;
height:410px;
margin:0 auto;
padding:10px 0 0 0;
}
#footer {
width:960px;
height:50px;
margin:0 auto;
}
.content {
width:950px;
height:390px;
border:5px solid #8ac1db;
margin:0 auto;
}
.operate {
width:910px;
height:40px;
margin:0 auto;
}
.data {
width:910px;
height:310px;
margin:0 auto;
}
.pages {
width:910px;
height:40px;
margin:0 auto;
}
/* 2.设置页面背景 */
body {
background-color:#0EA8D8;
}
#logo {
background-image:url('../img/top_bg.png');
}
#main {
background:url('../img/content_bg.png') repeat-x top;
}
#nav {
background-color:#0488BB;
}
.content {
background-color:#e8f3f8;
}
/* 3.设置文本格式 */
body {
font-family:'微软雅黑','文泉驿正黑','黑体';
font-size:14px;
}
#logo, #footer {
color:#fff;
}
#logo {
text-align:right;
line-height:61px;
}
/*
#logo a {
border:1px solid #000;
}
*/
#logo a {
color:#fff;
padding-right:40px;
text-decoration:none;
}
#logo a:hover {
font-weight:bold;
}
#footer p {
text-align:center;
margin:0;
line-height:25px;
}
/*
#footer p {
border:1px solid red;
}
*/
/* 4.设置内容 */
.operate {
text-align:right;
line-height:40px;
}
.add {
background-image:url('../img/btn_bg.png');
width:71px;
height:26px;
border:0;
color:#fff;
}
.data_list {
width:910px;
background-color:#fff;
border-collapse:collapse;
margin:0 auto;
}
.data_list th {
border:1px solid #ccc;
height:40px;
line-height:40px;
font-weight:bold;
background-color:#fbedce;
}
.data_list td {
border:1px solid #ccc;
height:32px;
line-height:32px;
text-align:center;
}
.data_list tbody tr:hover {
background-color:#f7f9fd;
}
.modify {
border:0;
background:url('../img/modification.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.delete {
border:0;
background:url('../img/delete.png') no-repeat left;
padding:5px 5px 5px 15px;
margin:0 5px;
cursor:pointer;
}
.pages {
text-align:center;
}
.pages a {
color:#000;
text-decoration:none;
margin:0;
padding:5px 10px;
border:1px solid #e8f3f8;
}
.pages a:hover {
border:1px solid #97B9C9;
color:#067DB5;
background-color:#CDDDE4;
}
.pages .current_page {
border:1px solid #97B9C9;
background-color:#fff;
}
/* 5.定位图片、块 */
#logo img {
float:left;
}
.content {
position:relative;
}
.msg {
position:absolute;
left:250px;
top:100px;
width:400px;
height:50px;
border:1px solid #F68A8A;
background-color:#FDECEC;
padding:10px 10px 10px 40px;
}
.close {
float:right;
border:0;
width: 22px;
height: 22px;
background:url("../img/close.png") no-repeat;
cursor: pointer;
}
.msg {
background:#FDECEC url('../img/ok.png') 10px 30px no-repeat;
}
.msg p {
/*border:1px solid red;*/
line-height:30px;
}
/* 6.设置导航栏 */
/*
ul, li {
border:1px solid red;
}
*/
.menu {
width:960px;
margin:0 auto;
list-style-type:none;
}
.menu li {
width:68px;
height:77px;
float:left;
margin:7px 14px;
}
.menu a {
display:block;
width:68px;
height:77px;
}
.menu span {
display:none;
}
#index {
background-image:url('../img/index_out.png');
}
#index:hover {
background-image:url('../img/index_on.png');
}
#role {
background-image:url('../img/role_out.png');
}
#role:hover {
background-image:url('../img/role_on.png');
}
#admin {
background-image:url('../img/admin_out.png');
}
#admin:hover {
background-image:url('../img/admin_on.png');
}
#fee {
background-image:url('../img/fee_out.png');
}
#fee:hover {
background-image:url('../img/fee_on.png');
}
#account {
background-image:url('../img/account_out.png');
}
#account:hover {
background-image:url('../img/account_on.png');
}
#service {
background-image:url('../img/service_out.png');
}
#service:hover {
background-image:url('../img/service_on.png');
}
#bill {
background-image:url('../img/bill_out.png');
}
#bill:hover {
background-image:url('../img/bill_on.png');
}
#report {
background-image:url('../img/report_out.png');
}
#report:hover {
background-image:url('../img/report_on.png');
}
#info {
background-image:url('../img/information_out.png');
}
#info:hover {
background-image:url('../img/information_on.png');
}
#pwd {
background-image:url('../img/password_out.png');
}
#pwd:hover {
background-image:url('../img/password_on.png');
}
</style>
</head>
<body>
<!-- logo区 -->
<div id="logo">
<img src="../img/logo.png"/>
<a href="#">[退出]</a>
</div>
<!-- 导航区 -->
<div id="nav">
<ul class="menu">
<li><a href="#" id="index"><span>首页</span></a></li>
<li><a href="#" id="role"><span>角色管理</span></a></li>
<li><a href="#" id="admin"><span>管理员</span></a></li>
<li><a href="#" id="fee"><span>资费管理</span></a></li>
<li><a href="#" id="account"><span>账务账户</span></a></li>
<li><a href="#" id="service"><span>业务账号</span></a></li>
<li><a href="#" id="bill"><span>账单管理</span></a></li>
<li><a href="#" id="report"><span>报表</span></a></li>
<li><a href="#" id="info"><span>个人信息</span></a></li>
<li><a href="#" id="pwd"><span>修改密码</span></a></li>
</ul>
</div>
<!-- 主体区 -->
<div id="main">
<!-- 内容区 -->
<div class="content">
<!-- 操作区 -->
<div class="operate">
<input type="button" value="增加" class="add"/>
</div>
<!-- 数据区 -->
<div class="data">
<table class="data_list">
<thead>
<tr>
<th><input type="checkbox" id="check_all"/><label for="check_all">全选</label></th>
<th>管理员ID</th>
<th>姓名</th>
<th>拥有角色</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>唐僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>孙悟空</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>猪八戒</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>沙僧</td>
<td>管理员、会计、业务员</td>
<td><input type="button" value="修改" class="modify"/><input type="button" value="删除" class="delete"/></td>
</tr>
</tbody>
</table>
</div>
<!-- 分页区 -->
<div class="pages">
<a href="#">上一页</a>
<a href="#" class="current_page">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">下一页</a>
</div>
<!-- 提示信息区 -->
<div class="msg">
<input type="button" value="X" class="close"/>
<p>操作成功！</p>
</div>
</div>
</div>
<!-- 版权区 -->
<div id="footer">
<p><源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目></p>
<p>版权所有©加拿大达内IT培训集团公司</p>
</div>
</body>
</html>