试题编号：2-2“谭木记”专题页制作—内容模块

项目描述

​ 檀，因其木质坚硬，香气芬芳永恒，色彩绚丽多变且百毒不侵，万古不朽，又能避邪，故又称圣檀。世界上仅存有沈檀、檀香、绿檀、紫檀、黑檀、红檀、金药檀等，而且数量极其有限。为了推广檀木产品的使用，“谭木记”公司的项目负责人谭总致电HC公司项目负责人王经理，计划制作一个专题页面，用于宣传檀木产品的使用。王经理将此任务安排给了实习生小黄，接到任务后，实习生小黄已经完成了网页的头部、导航和banner模块的制作，接着开始着手制作网页的内容模块。

​ 假设你是小黄，请按要求完成网页的内容模块，如下图所示。相关素材见试题2-2。

img

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

任务1：根据效果图按要求完成内容模块的总体布局及样式（小计35分）

1)内容模块宽980px，水平居中，内容中的所有文字字体为“隶书”，所有文字源于素材“文字.txt”。（15分）

2)所有的中文标题“檀木简介”、“新品发布”、“高端原创”采用二级标题，字号30px，颜色#7c251c，居中对齐，上外边距为20px。（10分）

3)所有的英文标题采用三级标题，字号20px，颜色#7c251c，居中对齐，下外边距为20px。（10分）

任务2：根据效果图按要求完成内容模块下“檀木简介”模块的布局及样式（小计45分）

1)“檀木简介”文字介绍模块上下内边距为40px，上、下边框样式为：实线,线宽为2px，颜色为#dcdcdc。（15分）

2)“檀木简介”文字介绍模块共由2段组成，字号为20px，颜色为#303131，首行缩进2em。（10分）

3)第一段中的第1个字“檀”，字号为30px，颜色为#7c251c并且倾斜；第一段中的最后2个字“圣檀”颜色为#7c251c并且加粗。（10分）

4)第二段中的 “沈檀……”，字号为24px，颜色为#7c251c，加下划线并倾斜；第二段中的 “吉祥物”加粗并加上#f5ee30背景色。（10分）

任务3：根据效果图按要求完成内容模块下“新品发布”和“高端原创”模块的布局及样式（小计15分）

1)在“新品发布”英文标题下插入素材中给定的图片，当鼠标悬停图片时显示文字“新品发布图片”；在“高端原创”英文标题下插入素材中给定的图片，如果图片无法显示，显示替代文本：“高端原创图片”。（15分）

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

<body class="w">
    <h2>檀木简介</h2>
    <h3>TAN MU JIAN JIE</h3>
    <div class="content">
        <p>
            <span class="t1">檀</span> ,梵语是布施的意思，因其木质坚硬，香气芬芳永恒，色彩绚丽多变且百毒不侵，万古不朽，又能避邪，故又称
            <span class="t2">圣檀</span> 。
        </p>
        <p>世界上仅存有
            <span class="t3">沈檀、檀香、绿檀、紫檀、黑檀、红檀、金药檀</span> 等，而且数量极其有限。其质地紧密坚硬、色彩绚丽多变、香气芬芳永恒，且百毒不侵，又能避邪治病，所以人们常常把它作为
            <span class="orange">吉祥物</span> ，以保平安吉祥。
        </p>
    </div>
    <h2>新品发布</h2>
    <h3>XING PING FA BU</h3>
    <img src="../网页抽考题库素材/网页抽考题库素材/谭木记-2/images/pic01.jpg" alt="新品发布照片">
    <h2>高端原创</h2>
    <h3>GAO DUAN YUAN CHUANG</h3>
    <img src="../网页抽考题库素材/网页抽考题库素材/谭木记-2/images/pic02.jpg" alt="高端原创图片">
</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
* {
    margin: 0;
    padding: 0;
    font-family: "隶书";
}

.w {
    width: 980px;
    margin: 0 auto;
}

h2 {
    /*
字号30px，颜色#7c251c，居中对齐，上外边距为20px。
*/
    font-size: 30px;
    color: #7c251c;
    text-align: center;
    padding: 20px;
}

h3 {
    /*
    字号20px，颜色#7c251c，居中对齐，下外边距为20px
    */
    font-size: 20px;
    color: #7c251c;
    text-align: center;
    padding: 0 0 20px;
}

.content {
    border-bottom: 2px solid #dcdcdc;
    border-top: 2px solid #dcdcdc;
}

p {
    margin: 40px 0 40px;
    font-size: 20px;
    color: #303131;
    text-indent: 2em;
}

.t1 {
    font-size: 30px;
    color: #7c251c;
    font-style: italic;
}

.t2 {
    font-size: 24px;
    color: #7c251c;
}

.t3 {
    color: #7c251c;
    font-style: italic;
    text-decoration: underline;
}

.orange {
    background: #f5ee30;
}