Top

JAVA HTMLCSSJS DAY03

  1. 管理员列表-3
  2. 管理员列表-4
  3. 管理员列表-5
  4. 照片墙
  5. 新闻图片
  6. 管理员列表-6
  7. 管理员列表-7

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>&lt;源自北美的技术,最优秀的师资,最真实的企业环境,最适用的实战项目&gt;</p>
#cold_bold<p>版权所有&copy;</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>&lt;源自北美的技术,最优秀的师资,最真实的企业环境,最适用的实战项目&gt;</p>
<p>版权所有&copy;</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>&lt;源自北美的技术,最优秀的师资,最真实的企业环境,最适用的实战项目&gt;</p>
<p>版权所有&copy;</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>&lt;源自北美的技术,最优秀的师资,最真实的企业环境,最适用的实战项目&gt;</p>
<p>版权所有&copy;</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>&lt;源自北美的技术,最优秀的师资,最真实的企业环境,最适用的实战项目&gt;</p>
<p>版权所有&copy;</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>&lt;源自北美的技术,最优秀的师资,最真实的企业环境,最适用的实战项目&gt;</p>
<p>版权所有&copy;</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>&lt;源自北美的技术,最优秀的师资,最真实的企业环境,最适用的实战项目&gt;</p>

<p>版权所有&copy;</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>&lt;源自北美的技术,最优秀的师资,最真实的企业环境,最适用的实战项目&gt;</p>
<p>版权所有&copy;</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>&lt;源自北美的技术,最优秀的师资,最真实的企业环境,最适用的实战项目&gt;</p>
<p>版权所有&copy;</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>&lt;源自北美的技术,最优秀的师资,最真实的企业环境,最适用的实战项目&gt;</p>
<p>版权所有&copy;</p>
</div>
</body>
</html>