江月迟迟的个人知识库

外观

开学礼物大放送 ​

作者:江月迟迟
发表于:2024-12-10
字数统计:1518 字
预计阅读6分钟

介绍 ​

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

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

准备 ​

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

txt
├── css
│   └── style.css
├── images
├── mark
│   ├── preview
│   └── index.html
└── index.html

其中：

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

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

bash
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

题解 ​

css
/*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;
}
html
<!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>