618 活动

介绍

最近蓝桥准备了很多 618 优惠，今天我们将化身蓝桥前端小工，亲自动手制作一个 618 活动页面，快来一显身手吧。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

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

其中：

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

目标

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

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

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

规定

  • 本题只能使用项目文件夹中提供的素材。
  • 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分

判分标准

  • 本题根据页面布局的相似度给分，低于 50% 得 0 分，高于 50% 则通过（正式比赛时会按照比例得分）。

总通过次数: 340 | 总提交次数: 612 | 通过率: 55.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
/* TODO：待补充代码 */
*{
    margin: 0;
    padding: 0;
}
body{
    background: #290897;
}
.neirong{
    position: absolute;
    top: 60px;
    left: 650px;
}
.stage{
    position: absolute;
    top: 464px;
    left: -35px;
    z-index: 100;
}
.title1{
    position: absolute;
    left: 637px;
    top: 574px;
    z-index: 200;
}
.box{
    position: absolute;
    width: 210px;
    height: 180px;
    top: 700px;
    z-index: 200;
}
.quan1{
    left: 375px;
}
.quan2{
    left: 615px;
}
.quan3{
    left: 855px;
}
.quan4{
    left: 1095px;
}
.quan5{
    left: 1335px;
}
.background{
    position: absolute;
    height: 1369px;
    width: 1920px;
    top: 506px;
}
.bg{
    position: absolute;
    left: 360px;
    top: 1006px;
    z-index: 100;
}
.background2{
    width: 1120px;
    height: 636px;
    position: absolute;
    left: 400px;
    top: 1118px;
    background: #FFF9E0;
    border-radius: 10px;
    z-index: 100;
}
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
<!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>618 活动</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body style="margin:0;padding:0; width: 1920px; height: 1877px;">
    <!-- TODO：待补充代码 -->
    <img src="../images/banner-bg.png">
    <img src="../images/neirong.png" class="neirong">
    <img src="../images/stage.png" class="stage">
    <img src="../images/title1.png" class="title1">
    <img src="../images/quan1.png" class="box quan1">
    <img src="../images/quan2.png" class="box quan2">
    <img src="../images/quan3.png" class="box quan3">
    <img src="../images/quan4.png" class="box quan4">
    <img src="../images/quan5.png" class="box quan5">
    <div class="background"></div>
    <img src="../images/bg.png" class="bg">
    <div class="background2"></div>
  </body>
</html>