介绍
又是一年开学季，蓝桥为大家准备了开学礼物，想制作一个页面来宣传一下该活动。
本题需要按照要求完成一个以“开学季”为主题的页面布局。
准备
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
├── 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);
}
运行结果
