开学礼物大放送

介绍

又是一年开学季，蓝桥为大家准备了开学礼物，想制作一个页面来宣传一下该活动。

本题需要按照要求完成一个以“开学季”为主题的页面布局。

准备

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

1
2
3
4
5
6
7
├── css
│   └── style.css
├── images
├── mark
│   ├── preview
│   └── index.html
└── index.html

其中：

  • css/style.css 是样式文件。
  • images 是页面布局需要用到的图片素材。
  • mark/preview 是页面效果图。
  • mark/index.html 是布局参数标记页面。
  • index.html 是主页面。

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

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

目标

请完善 css/style.css 和 index.html 文件。

请根据 mark/preview 最终效果图和 mark/index.html 上的参数标注来完成页面布局。

在浏览器打开 mark/index.html 页面，鼠标点击页面可以在右侧看到相应的参数标注。

规定

  • 本题只能使用项目文件夹中提供的素材。
  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成无法判题通过。

判分标准

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

总通过次数: 661 | 总提交次数: 652 | 通过率: 101.4%

难度: 中等 标签: 2022, 国赛, Web 前端, HTML5, 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
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
/*TODO：请补充代码*/

* {
  padding: 0;
  margin: 0;
}

img {
  width: 100%;
}

body {
  width: 1920px;
  height: 753px;
}

.background-container {
  position: relative;
}

.banner-title {
  position: absolute;
  left: 640px;
  top: 52px;
  width: 640px;
  height: 440.14px;
  z-index: 1;
}

.center-container {
  width: 100%;
  height: 745px;
  background-color: #2873f9;
  position: absolute;
  top: 751px;
}

.part1-bg {
  position: absolute;
  left: 424px;
  top: 678px;
  width: 1072px;
  height: 698px;
}

.small-left {
  position: absolute;
  left: 738px;
  top: 790px;
  width: 16.06px;
  height: 10.67px;
}

.small-right {
  position: absolute;
  left: 1165.94px;
  top: 790px;
  width: 16.06px;
  height: 10.67px;
}

.text-center {
  position: absolute;
  top: 781px;
  left: 770px;
  font-family: PingFangSC-Semibold;
  font-size: 20px;
  color: #ec6853;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
}

.icon1 {
  position: absolute;
  left: 538px;
  top: 848.53px;
  width: 60px;
  height: 60px;
}
.icon2 {
  position: absolute;
  left: 799px;
  top: 848.53px;
  width: 60px;
  height: 60px;
}
.icon3 {
  position: absolute;
  left: 1060px;
  top: 848.53px;
  width: 60px;
  height: 60px;
}
.icon4 {
  position: absolute;
  left: 1322px;
  top: 848.53px;
  width: 60px;
  height: 60px;
}
.icon5 {
  position: absolute;
  left: 538px;
  top: 1025px;
  width: 60px;
  height: 60px;
}
.icon6 {
  position: absolute;
  left: 799px;
  top: 1025px;
  width: 60px;
  height: 60px;
}
.icon7 {
  position: absolute;
  left: 1060px;
  top: 1025px;
  width: 60px;
  height: 60px;
}
.icon8 {
  position: absolute;
  left: 1322px;
  top: 1025px;
  width: 60px;
  height: 60px;
}

.hand {
  position: absolute;
  left: 942px;
  top: 1295px;
  width: 38px;
  height: 45px;
  z-index: 1;
}

.btn1 {
  position: absolute;
  left: 671px;
  top: 1221px;
  width: 579px;
  height: 95px;
}

.text1 {
  position: absolute;
  left: 528px;
  top: 923px;
  font-family: PingFangSC-Semibold;
  font-size: 20px;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
}
.text2 {
  position: absolute;
  left: 760.5px;
  top: 923px;
  font-family: PingFangSC-Semibold;
  font-size: 20px;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
}
.text3 {
  position: absolute;
  left: 1015.5px;
  top: 923px;
  font-family: PingFangSC-Semibold;
  font-size: 20px;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
}
.text4 {
  position: absolute;
  left: 1281px;
  top: 923px;
  font-family: PingFangSC-Semibold;
  font-size: 20px;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
}
.text5 {
  position: absolute;
  left: 528px;
  top: 1099px;
  font-family: PingFangSC-Semibold;
  font-size: 20px;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
}
.text6 {
  position: absolute;
  left: 789px;
  top: 1099px;
  font-family: PingFangSC-Semibold;
  font-size: 20px;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
}
.text7 {
  position: absolute;
  left: 994.5px;
  top: 1099px;
  font-family: PingFangSC-Semibold;
  font-size: 20px;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
}
.text8 {
  position: absolute;
  left: 1291px;
  top: 1099px;
  font-family: PingFangSC-Semibold;
  font-size: 20px;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
}

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
<!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>开学礼物大放送</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="background-container">
      <img src="./images/banner-bg.png" alt="" class="banner-bg" />
      <img src="./images//banner-title.png" alt="" class="banner-title" />
      <div class="center-container"></div>
      <img src="./images/part1-bg.png" alt="" class="part1-bg" />
      <img src="./images/small-left.png" alt="" class="small-left" />
      <p class="text-center">精品好课，助力备赛；就业辅导，直通名企</p>
      <img src="./images/small-right.png" alt="" class="small-right" />
      <img src="./images/icon1.png" alt="" class="icon1">
      <img src="./images/icon2.png" alt="" class="icon2">
      <img src="./images/icon3.png" alt="" class="icon3">
      <img src="./images/icon4.png" alt="" class="icon4">
      <img src="./images/icon5.png" alt="" class="icon5">
      <img src="./images/icon6.png" alt="" class="icon6">
      <img src="./images/icon7.png" alt="" class="icon7">
      <img src="./images/icon8.png" alt="" class="icon8">
      <img src="./images/hand.png" alt="" class="hand">
      <img src="./images/btn1.png" alt="" class="btn1">
      <img src="./images/label.png" alt="" class="label">
      <p class="text1">赛事特训</p>
      <p class="text2">20+畅销书籍课</p>
      <p class="text3">200+企业级项目</p>
      <p class="text4">工程师养成计划</p>
      <p class="text5">硬核学习</p>
      <p class="text6">就业辅导</p>
      <p class="text7">170+基础编程语言课</p>
      <p class="text8">保存开发环境</p>
      <p class="desc1">真题详解、模拟实战</p>
      <p class="desc2">权威书籍，价值千元</p>
      <p class="desc3">聚焦业务，助力晋升</p>
      <p class="desc4">职场菜鸟，晋升必备</p>
      <p class="desc5">到达百楼，可享推荐实习1次</p>
      <p class="desc6">精准辅导，质量就业</p>
      <p class="desc7">C语言、JAVA、Python等</p>
      <p class="desc8">随到随学，即开即用</p>
    </div>
  </body>
</html>