网站导航
> 文章列表 > 第十三届蓝桥杯Web组国赛真题 开学礼物大放送

第十三届蓝桥杯Web组国赛真题 开学礼物大放送

网友: 文章列表 2024-03-21 19:13:44

第十三届蓝桥杯Web组国赛真题 开学礼物大放送

介绍

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

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

准备

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

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

其中：

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

十三届蓝桥杯Web国赛真题下载地址（包含题目介绍PDF和十个题目的文件）

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

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

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

规定

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

判分标准

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

下面是自己写的代码 比较乱 仅供参考

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="banner-bg"><div class="banner-title"></div></div><div class="down"><div class="part1-bg"><div class="title_context"><span class="small-left"></span><div class="title">精品好课，助力备赛；就业辅导，直通名企</div><span class="small-right"></span></div><div class="main"><ul><li><img src="./images/icon1.png" alt=""><div class="main_title">赛事特训</div><div class="main_context">真题详解、模拟实战</div></li><li><img src="./images/icon2.png" alt=""><div class="main_title">20+畅销书籍课</div><div class="main_context">权威书籍，价值千元</div></li><li><img src="./images/icon3.png" alt=""><div class="main_title">200+企业级项目</div><div class="main_context">聚焦业务，助力晋升</div></li><li><img src="./images/icon4.png" alt=""><div class="main_title">工程师养成计划</div><div class="main_context">职场菜鸟，晋升必</div></li><li class="label_father"><img src="./images/icon5.png" alt=""><div class="main_title">硬核实习</div><div class="main_context">到达百楼，可享推荐实习1次</div><div class="label"></div></li><li><img src="./images/icon6.png" alt=""><div class="main_title">就业辅导</div><div class="main_context">精准辅导，质量就业</div></li><li><img src="./images/icon7.png" alt=""><div class="main_title">170+基础编程语言课 </div><div class="main_context">C语言、Java、Python 等</div></li><li><img src="./images/icon8.png" alt=""><div class="main_title">保存开发环境</div><div class="main_context">随到随学，即开即用</div></li></ul></div><div class="btn1"><div class="hand"></div></div></div><div class="left"></div><div class="right"></div></div>
</body></html>

CSS文件

/*TODO：请补充代码*/
* {padding: 0;margin: 0;box-sizing: border-box;
}li {list-style: none;
}.banner-bg {padding-top: 52px;width: 1920px;height: 753px;background-size: cover;background-image: url(../images/banner-bg.png);background-repeat: no-repeat;background-position: center center;
}.banner-title {margin: auto;/* margin-top: 52px; */width: 640px;height: 440.14px;background-position: center center;background-image: url(../images/banner-title.png);
}.down {position: relative;background: #2873F9;background-repeat: no-repeat;background-position: center center;background-size: cover;height: 754px;width: 1920px;}.part1-bg {position: absolute;top: -73px;left: 50%;transform: translate(-50%);padding-top: 103px;margin: 0 auto;width: 1072px;height: 698px;background-image: url(../images/part1-bg.png);background-repeat: no-repeat;z-index: 100;/* background-position: center center; *//* background-size: cover; */
}.title_context {display: flex;justify-content: center;align-items: center;
}.title {font-family: PingFangSC-Semibold;font-size: 20px;color: #EC6853;letter-spacing: 0;text-align: center;font-weight: 600;padding: 0 20px;
}.small-left {/* display: inline-block; */width: 16.06px;height: 10.67px;background-image: url(../images/small-left.png);
}.small-right {/* display: inline-block; *//* transform: rotateY(10); */width: 16.06px;height: 10.67px;background-image: url(../images/small-right.png);
}.main_title {font-family: PingFangSC-Semibold;font-size: 20px;color: #333333;letter-spacing: 0;text-align: center;font-weight: 600;margin: 10px 0;
}.main_context {font-family: PingFangSC-Regular;font-size: 16px;color: #666666;letter-spacing: 0;text-align: center;line-height: 24px;font-weight: 400;
}.main ul {display: flex;flex-wrap: wrap;justify-content: space-around;
}.main ul li {display: flex;flex-direction: column;justify-content: center;align-items: center;width: 210px;height: 200px;margin: 0 15px;
}.main ul li img {width: 60px;height: 60px;/* margin: 5px; */
}.label_father {position: relative;z-index: 1
}.label {position: absolute;right: 0px;top: 25px;width: 54px;height: 20px;background-image: url(../images/label.png);
}.btn1 {position: relative;margin: auto;background-image: url(../images/btn1.png);width: 590px;height: 100px;padding-bottom: 20px;/* margin: 20px 0px; */
}.hand {position: absolute;bottom: -20px;left: 50%;transform: translate(-50%);width: 38px;height: 45px;background-image: url(../images/hand.png);
}.left {position: relative;z-index: 1;display: inline-block;top: 500px;left: 244px;width: 230.43px;height: 132.28px;background-image: url(../images/left.png);
}.right {position: relative;z-index: 1;top: 365px;left: 1445px;width: 230.43px;height: 132.28px;background-image: url(../images/right.png);
}

运行结果

第十三届蓝桥杯Web组国赛真题 开学礼物大放送

第十三届蓝桥杯Web组国赛真题 开学礼物大放送

网络标签：

相关问题