蓝桥知识网

介绍

蓝桥为了帮助大家学习，开发了一个知识汇总网站，现在想设计一个简单美观的首页。本题请根据要求来完成一个首页布局。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

1
2
3
4
5
├── css
│   └── style.css
├── data.txt
├── index.html
└── mark.png

其中：

  • css/style.css 是样式文件。
  • data.txt 是页面数据文件。
  • index.html 是主页面。
  • mark.png 是页面参数标注图。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

1
2
cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9791/06.zip && unzip 06.zip && rm 06.zip

目标

请根据 mark.png 图片上的参数标注，补充 css/style.css 和 index.html 文件中的代码。对于 mark.png 上未标注的参数，请结合效果图自行调整。

页面版心宽度为 1024px，请保证版心居中，让页面呈现如下图所示的效果：

完成布局的显示效果

页面数据在 data.txt 文件中，直接复制即可。

规定

  • 请勿自定义页面数据，必须使用 data.txt 所提供的页面数据。
  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成无法判题通过。

判分标准

  • 本题根据页面布局的相似度给分，低于 50% 得 0 分，高于 50% 则按比例给分。

总通过次数: 869 | 总提交次数: 890 | 通过率: 97.6%

难度: 中等 标签: 2022, 省赛, Web 前端, HTML5, CSS3

题解

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
88
89
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>蓝桥知识网</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <!--TODO：请补充代码-->
     <!--TODO：请补充代码-->
     <div class="one">
      <div id="one">
        <nav>
          <ul type="none">
            <li>蓝桥知识网</li>
            <li>首页</li>
            <li>热门技术</li>
            <li>使用手册</li>
            <li>知识库</li>
            <li>练习题</li>
            <li>联系我们</li>
            <li>更多</li>
          </ul>
        </nav>
        <div class="tit">
          <div>蓝桥云课</div>
        </div>
        <div class="des">
          <div>随时随地丰富你的技术栈！</div>
        </div>
        <div class="join">
          <button>
            <div>加入我们</div>
          </button>
        </div>
      </div>
    </div>

    <div class="two">
      <div id="two">
        <table>
          <thead>
            <tr>
              <th>人工智能</th>
              <th>前端开发</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。</td>
              <td>前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。</td>
            </tr>
          </tbody>
        </table>
        <table>
          <thead>
            <tr>
              <th>后端开发</th>
              <th>信息安全</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。</td>
              <td>ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <footer>
      <div id="three">
        <div class="z1">
          <div>© 蓝桥云课 2022</div>
        </div>
        
        <div class="z2">
          <div>京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</div>
        </div>
      </div>
    </footer>
  </body>
</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
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/*
 TODO：请补充代码
*/


/*
 TODO：请补充代码
*/
.one{
    background-color: #a6b1e1;
    height: 486px;
    display: flex;
    justify-content: center;
}
#one{
    width: 1024px;
    /* border: 1px gray solid; */
}
nav{
    margin-top: 13px;
    height: 46px;
    /* border: 1px gray solid; */
}
nav ul{
    /* border: 1px red solid; */
    display: flex;
    color: white;
    /* gap:16px; */

}
nav ul li:first-child{
    /* border: 1px gray solid; */
    font-size: 18px;
    margin-right: 365px;
}
nav ul li:nth-child(n+2){
    font-size: 16px;
    margin-right: 16px;
}
.tit div{
    font-size: 45px;
    color: black;
    /* border: 1px gray solid; */
}
.tit{
    /* border: 1px gray solid; */
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.des div{
    font-size: 21px;
    color: white;
    font-weight: 200;
    /* border: 1px gray solid; */
}
.des{
    /* border: 1px gray solid; */
    display: flex;
    justify-content: center;
    margin-top: 62px;
}
button{
    background-color: transparent;
    box-shadow: inset 0 0 0 2px #efbfbf;
    border: #efbfbf 0.1px solid;
    border-radius: 2px;
}
button div{
    font-size: 18px;
    background-color: transparent;
    color: #efbfbf;

    padding: 10px;
    /* box-shadow: inset 0 0 0 2px #efbfbf; */
}
.join{
    display: flex;
    justify-content: center;
    margin-top: 36px;
    /* border: 1px gray solid;  */
}
.two{
    /* border: 1px red solid;  */
    height: 376px;
    display: flex;
    justify-content: center;
}

#two{
    margin-top: 74px;
    width: 1024px;
    /* border: 1px gray solid;  */
}

table{
    height: 144px;
}

th{
    font-size: 30px;
    color: black;
    font-weight: 200;
    text-align: left;
}
td{
    font-size: 18px;
    color: #aaa;
    line-height: 1.4em;
    width: 502px;
    vertical-align: top;
}
tbody tr td:first-child{
    padding-right: 20px;
}

footer{
    height: 80px;
    border-top: 1px #aaa solid;
    display: flex;
    justify-content: center; 

}
#three{
    width: 1024px;
}
.z1 div{
    font-size: 14px;
    color: #aaa;
}
.z1{
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.z2 div{
    font-size: 14px;
    color: #aaa;
}
.z2{
    display: flex;
    justify-content: center;
    margin-top: 10px;
}