试题编号：2-1“谭木记”专题页制作—头部、导航和banner模块

项目描述

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

​ 假设你是小黄，请按要求完成网页的头部、导航和banner模块，如下图所示。相关素材见试题2-1。

img

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

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

1）整个页面版心为980px，水平居中。（10分）

任务2：根据效果图按要求完成头部模块的布局及样式（小计10分）

1)头部高度为114px，背景色为#525252，头部里面包含公司logo图片，图片居中显示。（10分）

任务3：根据效果图按要求完成导航栏模块的布局及样式（小计55分）

1)导航栏高100px，上下外边距均为10px，背景颜色为#4d0506。（10分）

2)导航栏左侧菜单项包括“首页”、“用户中心”、“公司简介”、“联系我们”、“产品介绍”共5个，均为超链接。（10分）

3)超链接左、右内边距为20px，字号为20px，字体为“隶书”，颜色为#ffffff，文字垂直居中；当鼠标悬停于超链接时，文字颜色变成#f5ee30，且文字加粗。（15分）

4)导航栏右侧为搜索框，搜索框无边框，高30px，宽为200px，距上边距为35px，距右边距为50px。（10分）

5)搜索框内文字“输入关键词”字号为12px，颜色为#cccccc，距左边框10px。（10分）

任务4：根据效果图按要求完成banner模块的布局及样式（小计20分）

1)banner里的标题“原木时尚”采用二级标题表示，字号为18px，字体为“隶书”，颜色为#303131，行高为40px。（10分）

2)banner里的图片如果无法显示，显示替代文本：“焦点图片”。（10分）

任务5：作品提交要求（小计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
<!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-1.css">
</head>

<body>
    <div class="top w">
        <img src="../网页抽考题库素材/网页抽考题库素材/谭木记-1/images/logo.jpg" alt="">
    </div>
    <div class="header w">
        <ul>
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">用户中心</a>
            </li>
            <li>
                <a href="#">公司简介</a>
            </li>
            <li>
                <a href="#">联系我们</a>
            </li>
            <li>
                <a href="#">产品介绍</a>
            </li>
        </ul>
        <input type="text" value="输入关键字">
    </div>
    <div class="banner w">
        <h2> 原木时尚>></h2>
        <img src="../网页抽考题库素材/网页抽考题库素材/谭木记-1/images/banner.jpg" alt="焦点图片">
    </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
* {
    margin: 0;
    padding: 0;
}

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

.top {
    height: 114px;
    background: #525252;
}

.top img {
    width: 100%;
    height: 114px;
}

.header {
    height: 100px;
    background: #4d0506;
    /* margin: 10px 0 10px 0 auto; */
}

ul {
    margin: 10px 0 10px 0;
}

li {
    font: 20px/"隶书";
    float: left;
    list-style: none;
}

a {
    margin: 0 20px 0 20px;
    color: #ffffff;
    text-decoration: none;
    line-height: 6em;
    padding: 5px;
}

a:hover {
    color: #f5ee30;
    font-weight: 700;
}

input {
    width: 200px;
    height: 30px;
    margin: 35px 50px;
    font-size: 12px;
    color: #cccccc;
    float: right;
}

.banner h2 {
    font-size: 18px/"隶书";
    color: #303131;
    line-height: 40px;
    overflow: hidden;
    padding: 10px;
}