试题编号：1-2“说旅游”专题页制作——景点推荐与页脚模块

项目描述

​ 马尔代夫是世界是最大的珊瑚岛，以其独特的风景吸引着众多游客。为了更好地展示马尔代夫的独特风采，“一日游”公司的项目负责人马总致电HC公司项目负责人王经理，计划制作一个专题页面，用于宣传马尔代夫伊露岛。王经理将此任务安排给了实习生小黄，接到任务后，实习生小黄已经完成了网页的头部与景点介绍模块，准备开始制作景点推荐与页脚模块。
​ 请完成网页景点推荐与页脚模块的相关任务，如图所示。相关素材见试题1-2。

img |

​ 景点推荐与页脚模块效果图

任务描述与评分标准（共100分）

任务1：请根据效果图按要求对“说旅游”专题页进行整体布局。(小计10分)

1）整个页面宽980px，水平居中；（5分）

2）页面中大部分的文字为16像素、微软雅黑、颜色#000。（5分）

任务2：请根据效果图按要求制作景点推荐模块。(小计55分)

1）景点推荐中所有文字来源于素材text.txt中，均有10像素的上下外边距；（5分）

2）景点推荐中标题选用h2，字符间距为0.25em；（5分）

3）副标题设置为倾斜、#ccc灰色，“来源”与之前的文字间有一段空白；（10分）

4）副标题与正文间有1像素、灰色的实线；（5分）

5）正文首行缩进两个字符，行间距为1.5em；（5分）

6）景点推荐中的图片分别为左侧banner2-1.png，右侧上面为banner2-2.png，右侧下面为banner2-3.png；（10分）

7）三张图调整好位置，左右之间有一定的空隙，右边上下之间也有5像素的空隙；（10分）

8）景点推荐的图片下面如图有1像素、灰色的实线。（5分）

任务3：请根据效果图按要求制作页脚模块。（小计30分）

1）页脚中分成四行文字，素材来源于text.txt，内容距离四周有10像素间距；（10分）

2）页脚中所有文字水平居中，行间距为1.5em，颜色为蓝黑色#1d6983；（10分）

3）第一行中“电话：000-1234567”与第三行所有文字为黑色。（10分）

任务4 ：作品提交要求（小计5分）

1）在“网页技能抽查提交资料\”文件夹内创建考生文件夹，考生文件夹的命名规则：考生学校+考生号+考生姓名，示例：湘西民族职业技术学院01张三。（3分）

2）“网页技能抽查提交资料”文件夹内保存代码源文件及引用的相关素材文件，代码源文件以“姓名_题号.html”命名，最终将考生文件夹进行压缩后提交。（2分）

代码如下：

HTML

1
2
3
4
5
6
7
8
9
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
39
40
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="lyw1-2.css">
</head>

<body>
    <div class="banner w">
        <h2>马尔代夫伊露岛：”伊露”上有你真好</h2>
        <h3>2015.04.21　　来源：一日游驴友群-老牛
        </h3>
        <p>伊露岛沙滩屋的构造很独特，彻底的南亚风情。雪白的圆形的房子，尖尖的茅草屋顶，木质的框架，朴实的外表里面却十分的豪华，从卧室转到后面有一个很大的半露天花园，里面有只超大的按摩浴缸和露天的淋浴台，洗好澡穿上睡袍躺在这里拿本书，心情彻底放松。</p>
        <div class="images w">
            <img src="../网页抽考题库素材/网页抽考题库素材/说旅游-2/images/banner2-1.png" alt="">
            <img src="../网页抽考题库素材/网页抽考题库素材/说旅游-2/images/banner2-2.png" alt="">
            <img src="../网页抽考题库素材/网页抽考题库素材/说旅游-2/images/banner2-3.png" alt="">
        </div>
    </div>
    <div class="footer w">
        <p>一日游网友意见留言板
            <span class="black"> 电话：000-1234567 </span> 欢迎批评指正
        </p>
        <p>公司简介 | About YIRIYOU| 广告服务 | 联系我们 | 招聘信息 | 网站律师 | YIRIYOU English | 注册 | 产品答疑</p>
        <p>
            <span class="black">
            opyright ? 1996 - 2016 YIRIYOU.coright All Rights Reserved
           </span>
        </p>
        <p>
            一日游公司　版权所有
        </p>
    </div>
</body>

</html>

CSS

1
2
3
4
5
6
7
8
9
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
39
40
41
42
43
44
45
46
47
48
49
50
51
* {
    margin: 0;
    padding: 0;
}

.w {
    width: 980px;
    margin: 0 auto;
    color: #000;
    /*font-size: 16px/"微软雅黑";*/
}

.banner h2 {
    letter-spacing: 0.25em;
}

.banner h3 {
    color: #ccc;
    line-height: 2em;
    border-bottom: 1px solid #ccc;
    font-style: italic;
}

.banner p {
    text-indent: 2em;
    line-height: 1.5em;
}

.images {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}

.images img {
    float: left;
    margin: 5px 5px 5px 0;
}

.footer {
    padding: 10px 10px 10px 10px;
}

.footer p {
    text-align: center;
    color: #1d6983;
    line-height: 1.5em;
}

.black {
    color: black;
}