试题编号1 - 3： “说旅游”专题页制作——驴友评论模块

项目描述

​ 马尔代夫是世界是最大的珊瑚岛，以其独特的风景吸引着众多游客。为了更好地展示马尔代夫的独特风采，“一日游”公司的项目负责人马总致电HC公司项目负责人王经理，计划制作一个专题页面，用于宣传马尔代夫伊露岛。王经理将此任务安排给了实习生小黄。接到任务后，实习生小黄已经完成了网页的大部分内容，后来经过反复思考，觉得应该再添加一个驴友评论模块。

​ 请完成驴友评论模块相关任务，如图所示。相关素材见试题1-3。

img |

​ 驴友评论模块效果图

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

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

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

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

任务2：请根据效果图按要求制作驴友评论模块。(小计85分)

1）此处分为三个部分，首先是标题，图片icon.gif位于左上角，下方是1个像素、#ccc、实线；（10分）

2）第二部分为表单部分，由多行文本框与两个按钮组成；（20分）

3）多行文本框每行100个字，共10行；（10分）

4）两个按钮位于文本框的右下角，宽80像素，高30像素，有适当间距，内容分别为提交与重写；（10分）

5）第三部分为评论部分，共3条评论，每条评论表现为左图右字的效果，中间均有间距，下方均有1像素、灰色#ccc、实线；（20分）

6）每条评论中右侧文字来源于素材text.txt，分别由标题h4或段落共三段组成，最后一行文字颜色为灰色#666。（15分）

任务3：作品提交要求（小计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
41
42
43
44
45
46
47
48
<!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-3.css">
</head>

<body>
    <div class="banner w">
        <img src="../网页抽考题库素材/网页抽考题库素材/说旅游-3/images/icon.gif" alt="">
    </div>
    <div class="content w">
        <form action="">
            <section>
                <textarea name="" id="" cols="100" rows="10" value="请发表评论">请发表评论</textarea>
                <input type="button" value="提交">
                <input type="button" value="重写">
            </section>
            <dl>
                <dt><img src="../网页抽考题库素材/网页抽考题库素材/说旅游-3/images/person1.jpg" alt=""></dt>
                <dd>HXZ9_IT 2015-4-2 15:38:37</dd>
                <dd>第一次用途牛，太让我们惊喜了！真的很不错，行程安排的也很好！幸运的是，往返飞机都没有延误！伊露岛的美，让我们的蜜月越发美满！
                </dd>
                <dd>来自：一日游驴友 www.yiriyou.com</dd>
            </dl>
            <dl>
                <dt><img src="../网页抽考题库素材/网页抽考题库素材/说旅游-3/images/person2.jpg" alt=""></dt>
                <dd>外星人 2015-3-2 15:05:37</dd>
                <dd>岛还可以，就是沙屋有虫子，不太让人满意，水屋确实挺棒的。饭嘛，国外基本都那样吧，海鲜还行。</dd>
                <dd>来自：一日游驴友 www.yiriyou.com</dd>
            </dl>
            <dl>
                <dt><img src="../网页抽考题库素材/网页抽考题库素材/说旅游-3/images/person3.jpg" alt=""></dt>
                <dd>
                    so_cool 2015-2-14 10:38:36
                </dd>
                <dd>行程安排挺好的，挺喜欢伊露岛，岛上的人很热情，手机丢了小黑给找回来了，都很热情，会主动跟你招呼！</dd>
                <dd>来自：一日游驴友 www.yiriyou.com</dd>
            </dl>
        </form>
    </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;
    font: 16px/"微软雅黑";
    color: #000;
}

.banner {
    border-bottom: #ccc 1px solid;
}

form {
    padding: 10px;
}

textarea {
    color: #ccc;
}

input {
    width: 80px;
    height: 30px;
    margin: 5px;
}

dl {
    border-bottom: #ccc 1px solid;
    padding: 25px;
}

dt {
    float: left;
    padding: 10px;
}

dd {
    padding: 5px;
}

dl dd:nth-child(2) {
    font-weight: 700;
}

dl dd:nth-child(4) {
    color: #666;
}