中职高教版《网页设计与制作任务驱动教程》5.2创建网页以项目列表形式表现 图文按钮课件
2023-05-18
|
12页
|
114人阅读
|
5人下载
普通
内容正文：
1
单元5 制作包含列表和表格的网页
【任务5-2】
创建网页以项目列表形式表现 图文按钮
《网页设计与制作任务驱动教程（第3版）》
1
2
【任务描述】
【任务5-2】创建网页以项目列表形式
表现图文按钮
（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档0502.html，且链接外部样式文件base.css和main.css。
《网页设计与制作任务驱动教程（第3版）》
3
（3）在网页0502.html中添加必要的HTML标签和输入文字。
（4）浏览网页0502.html的效果，如图5-4所示，该网页包含以项目列表形式表现的图文按钮。
图5-4 网页0502.html的浏览效果
《网页设计与制作任务驱动教程（第3版）》
4
【任务实施】
（1）创建文件夹与网页
在站点“单元5”中创建文件夹“task05-2”，在该文件夹中创建子文件夹“CSS”。在文件夹“task05-2”中创建网页文档0502.html。
《网页设计与制作任务驱动教程（第3版）》
5
（2）定义网页主体布局结构和美化列表
的CSS代码
在文件夹“CSS”中创建样式文件base.css，在该样式文件中编写样式代码，如表5-3所示。
表5-3 网页0502.html中样式文件base.css的CSS代码定义
序号 CSS代码 序号 CSS代码
01
02
03
04
05
06
07
08
09
10 body {
min-width: 1200px;
line-height: 2em;
margin: auto;
color: #333;
background-image: url(../images/travel-bg.png);
background-position: left top;
background-repeat: repeat-x;
background-color: #FFF;
} 11
12
13
14
15
16
17
18
19
20 ul,li {
margin: 0;
padding: 0;
border: none;
}
ul,li {
list-style-type: none;
list-style-position: outside;
text-indent: 0;
}
《网页设计与制作任务驱动教程（第3版）》
5
6
在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，如表5-4所示。
表5-4 网页0502.html中样式文件main.css的CSS代码定义
序号 CSS代码 序号 CSS代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 section {
width: 1200px;
margin: auto;
margin-top: 30px;
}
.actpList {
float: left;
margin-left: -5px;
overflow: hidden;
width: 320px;
}
.actpList li {
margin-bottom: 5px;
margin-left: 5px;
background-color: rgba(225,232,237,.7);
width: 146px;
float: left;
font-family: "Microsoft YaHei";
font-size: 20px;
}
.actpList li:hover {
background-color: rgba(250,250,250, .7);
}
.actpList li i {
margin: 34px 5px 35px 15px;
}
.ico-travel {
background-image:
url(../images/travel-ico.png);
background-repeat: no-repeat;
width: 16px;
height: 16px;
line-height: 16px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
} 39
40
41
42
43
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。