试题编号：1-1“说旅游”专题页制作——头部与景点介绍模块

项目描述

​ 马尔代夫是世界是最大的珊瑚岛，以其独特的风景吸引着众多游客。为了更好地展示马尔代夫的独特风采，“一日游”公司的项目负责人马总致电HC公司项目负责人王经理，计划制作一个专题页面，用于宣传马尔代夫伊露岛。王经理将此任务安排给了实习生小黄，接到任务后，实习生小黄决定从网页的头部与景点介绍模块开始着手制作。

​ 请完成网页头部与景点介绍模块的相关任务，如图所示。相关素材见试题1-1。

img

​ 网页头部与景点介绍模块效果图

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

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

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

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

任务2：请根据效果图按要求制作页面头部模块。(小计35分)

1）头部模块于页面最顶部，包括LOGO和页面导航部分，logo.png图片在左侧显示，导航条在右侧显示；（10分）

2）头部模块高60像素，上内边距为10像素，1像素、#ccc、实线的下边框线；（5分）

3）导航条包括“旅游首页”、“登录”、“注册”3个项目，均为超链接，第1、2个项目右侧有竖线，与文字左右分别有20像素的距离；（10分）

4）导航条的文字为16号、黑色、微软雅黑；（5分）

5）当鼠标悬停到超链接上时，文字颜色变为#f90。（5分）

任务3：请根据效果图按要求制作景点介绍模块。（小计50分）

1）整个景点介绍部分距离四周均有10像素的空隙；(5分)

2）景点介绍分为两部分，左侧为图片banner1.jpg，右侧为文字介绍，左右两侧之间有10像素的距离；（10分）

3）右侧文字部分具体为标题与三段文字，其中文字在素材text.txt中；（5分）

4）右侧标题为h2大小、颜色橘色#f90，其中“旅”字号为38号，位置水平居中，字符间距0.5em；（10分）

5）三段文字统一设置首行缩进2个字符，行间距为1.5em，段前距为10像素；（10分）

6）第二段文字中两段日期“1月-12月”、“12月至次年4月”设置为绿色#093、加粗、倾斜、下划线的效果；（5分）

7）第三段文字中“……【详细】”设置为超链接、橘色#f90、加粗、下划线效果。（5分）

任务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
<!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="lyw.css">
</head>

<body>
    <div class="banner w">
        <div class="left">
            <img src="../网页抽考题库素材/网页抽考题库素材/说旅游-1/images/logo.png" alt="">
        </div>
        <div class="right">
            <ul>
                <li><a href="#">旅游首页</a></li>
                <li>|</li>
                <li><a href="#">登录</a></li>
                <li>|</li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </div>
    <div class="footer w">
        <img src="../网页抽考题库素材/网页抽考题库素材/说旅游-1/images/banner1.jpg" alt="">
        <h2>说<strong>旅</strong>游</h2>
        <p>伊露岛（Iru Fushi）位于马尔代夫北部环礁——诺鲁环礁（Noonu Atoll）中，它是一座拥有醉人景色和浪漫气氛的小岛。晶莹的海水、绵白的沙滩、明媚的阳光、温馨的海边小屋、浪漫的海上落日。所有的一切似乎都为浪漫而存在，美丽而遗世独立。
        </p>
        <p> 最佳旅游时间：<a class="green">1月-12月</a>，热带海洋气候，全年皆适合旅游。<a class="green">12月至次年4月</a>可避开高峰。</p>
        <p>伊露岛沙滩屋的构造很独特，彻底的南亚风情——雪白的圆形房子，尖尖的茅草屋顶，木质的框<a href="#" class="orange">......[详细]</a></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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
* {
    margin: 0;
    padding: 0;
}

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

.left {
    float: left;
}

.right {
    float: right;
}

.banner {
    height: 60px;
    padding: 10px 1px 0 0;
    color: #ccc;
    border-bottom: #000 1px solid;
}

.banner li {
    float: left;
    padding: 20px;
    border-right: #000 0 solid;
    list-style: none;
}

.banner a {
    color: #000;
    font-size:16px;
    font-family:"微软雅黑";
    list-style: none;
    text-decoration: none;
}

.banner a:hover {
    color: #f90;
}

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

.footer img {
    float: left;
    padding: 20px;
}

.footer h2 {
    color: #f90;
    text-align: center;
    padding: 5px;
}

strong {
    font-size: 38px;
    margin: 0 auto;
    line-height: 0.5em;
    padding: 20px;
}

p {
    text-indent: 2em;
    line-height: 1.5em;
    padding: 5px;
}

.orange {
    color: #f90;
    font-weight: 700;
    font-style: italic;
    text-decoration: underline;
}

.green {
    color: #093;
    font-weight: 700;
    text-decoration: underline;
}