中职高教版《网页设计与制作任务驱动教程》7.2创建用户注册的表单网页课件
2023-05-18
|
13页
|
117人阅读
|
3人下载
普通
内容正文：
1
单元6 制作包含超级链接和
导航栏的网页
【任务7-2】创建用户注册的表单网页0702.html
《网页设计与制作任务驱动教程（第3版）》
1
2
【任务描述】
【任务7-2】创建用户注册的表单网页
0702.html
（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档0702.html，且链接外部样式文件base.css和main.css。
《网页设计与制作任务驱动教程（第3版）》
3
（3）在网页0702.html中添加必要的HTML标签和插入表单及表单控件。
（4）浏览网页0702.html的效果，如图7-38所示，该网页包含表单以及多个表单控件，用于实现用户注册功能。
图7-38 网页0702.html的浏览效果
《网页设计与制作任务驱动教程（第3版）》
4
【任务实施】
（1）创建所需的文件夹与拷贝所需的资源
文件夹“Unit07”中创建子文件夹“task07-2”，再在该子文件夹“task07-2”中创建“css”、“images”等子文件夹，且将所需的素材（包括base.css））拷贝到对应的子文件夹中。
《网页设计与制作任务驱动教程（第3版）》
5
（2）定义网页主体布局结构与美化表单的CSS代码
在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页0702.html主体布局结构的CSS代码如表7-1所示。
表7-1 网页0702.html主体布局结构的CSS代码定义
序号 CSS代码 序号 CSS代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20 .ec-s-reg {
margin-left: 20px;
}
.ec-s-reg > h2 {
padding: 10px 20px;
font-size: 16px;
font-family: "微软雅黑";
padding-left: 300px;
}
.ec-s-reg > .w-m {
box-shadow: 0 0 5px #EEE;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #EEE;
padding: 5px;
width: 660px;
} 21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 section {
display: block;
position: relative;
margin: auto;
}
.form-m li {
padding-top: 5px;
padding-bottom: 5px;
margin: 0 auto;
line-height: 40px;
position: relative;
*zoom: 1;
color: #666;
clear: both;
}
.form-m li.userInfo {
z-index: 10;
}
《网页设计与制作任务驱动教程（第3版）》
5
6
网页0702.html中美化表单及表单控件的CSS代码如表7-2所示。
表7-2 网页0702.html中美化表单及表单控件的CSS代码定义
序号 CSS代码 序号 CSS代码
01
02
03
04
05
06
07
08
09
10
11
12
13 .form-m li label {
margin-right: 5px;
font-size: 14px;
display: inline-block;
width: 100px;
text-align: right;
white-space: nowrap;
color: #333;
}
.form-m li i.radiolabel label {
width: auto;
font-weight: normal
} 14
15
16
17
18
19
20
21
22
23
24
25
26 .form-m li.submit {
padding-left: 110px;
}
.form-m li.submit {
padding: 5px 0
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。