《HTML5网页设计》补充案例5（完整）
下面是小编为大家整理的《HTML5网页设计》补充案例5（完整）,供大家参考。
补充案例 — “萌宠俱乐部”注册页面制 一、案例描述
1、 、 考核知识点 表格与表单` 2、 、 练习目标 掌握表格样式的控制。
掌握表单相关标记。
3、 、 需求分析 表格和表单在互联网上随处可见，一般多用于登录和注册页面的制作。通过学习本案例可以使初学者进一步的巩固表格与表单等相关知识点。
4、 、 案例 展示 效果如图 6-1 所示。
图6-1 “萌宠俱乐部”效果展示 二、 布局及定义基础样式 1、 、 效果分析 （ （1 ）HTML 结构分析 “萌宠俱乐部”首页面从上到下可以分为 5 个模块，如图 6-2 所示。
头部导航banner内容版权信息 图6-2 “萌宠俱乐部”结构分析 （ （2 ）CSS 样式分析 页面中的各个模块居中显示，页面的版心为 980px。另外，页面中的所有字体均为微软雅黑，字体大小为 16px，这些可以通过 CSS 公共样式进行定义。
2、 、 页面布局 新建 index06.html 文件，在 index06.html 文件内书写 HTML 结构代码，具体代码如下。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
6 <title>萌宠俱乐部</title>
7 </head>
8 <body>
9 <!--header begin-->
10 <div class="header"></div>
11 <!--header end-->
12 <!--nav begin-->
13 <div class="nav"></div>
14 <!--nav end-->
15 <!--banner begin-->
16 <div class="banner"></div>
17 <!--banner end-->
18 <!--content begin-->
19 <div class="content"></div>
20 <!--content end-->
21 <!--footer begin-->
22 <div class="footer"></div>
23 <!--footer end-->
24 </body>
25 </html> 在上述代码中，通过给 div 添加不同的类名来定义页面中的各个模块。
3、 、 定义公共样式
为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对 CSS 样式进行初始化并声明一些通用的样式。在 index06.html 文件所在的文件夹内新建 css 文件夹用于存放样式表文件 style06.css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下：
/*重置浏览器的默认样式*/ *{margin:0;padding:0;border:0;list-style: none;} /*全局控制*/ body{font-family: "微软雅黑";font-size: 16px;} a{text-decoration: none;color:#fff;}
三、案例制作 1、 、 制作头部 及导航 模块 （ （1 ）HTML 结构分析 “头部”及“导航”模块分别由<div>进行控制。其中，头部的图片由<img>标记定义，导航内容由无序列表<ul>定义。“头部”及“导航”模块的具体结构如图 6-3 所示。
<div><div><div><ul><img> <img> 图6-3 “头部”及“导航”模块结构图 （ （2）
）
样式 分析 “头部”模块的背景色通栏显示，“头部”及“导航”模块的版心宽为 980px，通过设置外边距属性使其在页面中居中显示。左侧 logo 和右侧图片分别设置绝对定位，最后还需设置导航栏的所有<li>左浮动及鼠标悬浮时<li>的背景样式。
（ （3）
）
搭建结构 在 index06.html 文件内书写“头部”及“导航”模块的 HTML 结构代码。具体如下：
1 <!--header begin-->
2 <div class="header">
3
<div class="header_in">
4
<img class="left" src="images/logo.png" />
5
<img class="right" src="images/pic04.png" />
6
</div>
7 </div>
8 <!--header end-->
9 <!--nav begin-->
10 <div class="nav">
11
<ul>
12
<li><a href="#">首页</a></li>
13
<li><a href="#">萌宠领养</a></li>
14
<li><a href="#">萌宠医院</a></li>
15
<li><a href="#">萌宠食品</a></li>
16
<li><a href="#">萌宠资讯</a></li>
17
<li class="last"><a href="#">注册会员</a></li>
18
</ul>
19 </div>
20 <!--nav end-->
（ （4）
）
定义样式 在样式表文件 style06.css 中书写 CSS 样式代码，用于控制“头部”及“导航”模块。具体如下：
1 .header{
2
width:100%;
3
height: 86px;
4
background: url(../images/top.jpg) repeat-x;
5 }
6 .header_in{
7
width:980px;
8
margin:0 auto;
9
position: relative;
10 }
11 .header_in .left{
12
position: absolute;
13
left:0;
14
top:5px;
15 }
16 .header_in .right{
17
position: absolute;
18
right:78px;
19
top:13px;
20 }
21 .nav{
22
width:900px;
23
height:74px;
24
margin:0 auto;
25
padding-left: 80px;
26
background: url(../images/navbg.png) no-repeat;
27 }
28 .nav ul li{
29
float: left;
30
line-height: 45px;
31
width:100px;
32
height:48px;
33
text-align: center;
34 }
35 .nav ul li a{
36
display: block;
37
width:100px;
38
height:48px;
39 }
40 .nav ul li:hover{background: url(../images/pic03.png) no-repeat;}
41 .nav ul li.last{background:url(../images/pic03.png) no-repeat;} 上述代码中，第 40 行代码用于设置鼠标悬浮时<li>的背景图片。
保存 index06.html 与 style06.css 文件，刷新页面，效果如图 6-4 所示。
图6-4 “头部”及“导航”模块效果图 2、 、作 制作 banner 模块 （ （1 ）HTML 结构分析 “banner”模块由一个大盒子<div>进行控制。“banner”模块的具体结构如图 6-5 所示。<div> 图6-5 “banner”模块结构图 （ （2）
）
样式 分析 “banner”模块在页面中居中显示。
（ （3）
）
搭建结构 在 index06.html 文件内书写“banner”模块的 HTML 结构代码。具体如下：
1 <!--banner begin-->
2 <div class="banner"></div>
3 <!--banner end--> （ （4）
）
定义样式 在样式表文件 style06.css 中书写 CSS 样式代码，用于控制“banner”模块。具体如下：
1 .banner{
2
width:980px;
3
height:330px;
4
margin:0 auto;
5
background: url(../images/banner.jpg) no-repeat;
6 } 保存 index06.html 与 style06.css 文件，刷新页面，效果如图 6-6 所示。
图6-6 “banner”模块效果图 3、 、 制作 内容 模块 （ （1 ）HTML 结构分析 “内容”模块整体由<div>标记定义，其内部嵌套<table>标记定义表格及表单，标题部分由 2 个<div>标记定义。“内容”模块的具体结构如图 6-7 所示。
<div><div><table><div><table> 图6-7 “内容”模块结构图 （ （2）
）
样式 分析 “内容”模块在页面中居中显示，可通过设置外边距实现，标题部分的背景通过插入背景图片实现。同时还需设置表格与表单的相关样式。
（ （3）
）
搭建结构 在 index06.html 文件内书写“内容”模块的 HTML 结构代码。具体如下：
1 <!--content begin-->
2 <div class="content">
3
<div class="top">会员注册</div>
4
<form action="#" method="post">
5
<table class="con">
6
<tr>
7
<td class="left">昵称：</td>
8
<td><input type="text"
class="right" /></td>
9
</tr>
10
<tr>
11
<td class="left">邮箱：</td>
12
<td><input type="text" class="right" /></td>
13
</tr>
14
<tr>
15
<td class="left">手机：</td>
16
<td><input type="text" class="right" /></td>
17
</tr>
18
<tr>
19
<td class="left">设置密码：</td>
20
<td><input type="password" maxlength="8" class="right" /></td>
21
</tr>
22
<tr>
23
<td class="left">确认密码：</td>
24
<td><input type="password" maxlength="8" class="right" /></td>
25
</tr>
26
27
</table>
28
</form>
29
<div class="top">宠物信息</div>
30
<form action="#" method="post">
31
<table class="con">
32
<tr>
33
<td class="left">所属种类：</td>
34
<td>
35
<select>
36
<option>-请选择-</option>
37
<option>狗</option>
38
<option>猫</option>
39
<option>鼠</option>
40
<option>鸟</option>
41
<option>猪</option>
42
</select>
43
</td>
44
</tr>
45
<tr>
46
<td class="left">性别：</td>
47
<td>
48
<label for="boy"><input type="radio" name="sex" id="boy" />男
49 </label>&nbsp;&nbsp;&nbsp;&nbsp;
50
<label for="girl"><input type="radio" name="sex" id="girl" />女</label>
51
</td>
52
</tr>
53
54
<tr>
55
<td class="left">年龄：</td>
56
<td>
57
<select>
58
<option selected="selected">-请选择-</option>
59
<option>1 岁</option>
60
<option>2 岁</option>
61
<option>3 岁</option>
62
<option>4 岁</option>
63
<option>5 岁</option>
64
<option>6 岁</option>
65
<option>7 岁</option>
66
</select>
67
</td>
68
</tr>
69
<tr>
70
<td class="left">喜爱的食物：</td>
71
<td>
72
<label for="one"><input type="checkbox" id="one"/>面食</label>&nbsp;&nbsp;&nbsp;
73
<label for="two"><input type="checkbox" id="two"/>青草</label>&nbsp;&nbsp;&nbsp;
74
<label for="three"><input type="checkbox" id="three"/>肉类</label>&nbsp;&nbsp;&nbsp;
75
<label for="four"><input type="checkbox" id="four"/>杂粮</label>&nbsp;&nbsp;&nbsp;
76
<label for="five"><input type="checkbox" id="five"/>水果</label>&nbsp;&nbsp;&nbsp;
77
<label for="six"><input type="checkbox" id="six"/>蔬菜</label>
78
</td>
79
</tr>
80
<tr>
81
<td class="left">备注：</td>
82
<td>
83
<textarea cols="60" rows="8">请填写备注内容。</textarea>
84
</td>
85
</tr>
86
<tr>
87
<td colspan="2"><input type="button" value="完成注册" class="btn" /></td>
88
</tr>
89
90
</table>
91
</form>
92 </div>
93 <!--content end--> （ （4）
）
定义样式 在样式表文件 style06.css 中书写 CSS 样式代码，用于控制“内容”模块。具体如下：
1 .content{
2
width:980px;
3
height:985px;
4
margin:0 auto;
5
background:#f5f5f5;
6 }
7 .content .top{
8
width:945px;
9
height:26px;
10
padding:5px 0 0 35px;
11
color:#edf7d8;
12
background: url(../images/pic01.jpg) no-repeat;
13 }
14 .content .con{padding:50px 0 45px 250px;}
15 td{
16
height:50px;
17
color:#89b52a;
18 }
19 tr .left{
20
width:120px;
21
text-align:right;
22 }
23 tr .right{
24
width:310px;
25
height:28px;
26
padding-left: 10px;
27
border:1px solid #89b52a;
28 }
29 input{vertical-align:middle;}
30 select{
31
width:171px;
32
border:1px solid #89b52a;
33
color:#89b52a;
34 }
35 textarea{
36
width:380px;
37
border:1px solid #89b52a;
38
resize:none...