背景介绍
目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式,这次试题将利用 Flex 实现经典布局效果。
准备步骤
在开始答题前,你需要在线上环境终端中键入以下命令,下载并解压所提供的文件。
wget https://labfile.oss.aliyuncs.com/courses/7835/fruit-flex.zip&& unzip fruit-flex.zip && rm fruit-flex.zip
下载完成之后的目录结构如下:
├── index.css
└── index.html
└── img
其中:
-
index.css
是本次挑战的需要补充样式文件。 -
index.html
为主页面。 -
img
图片文件夹。
- 选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。
- 打开环境右侧的【Web 服务】。
考试要求
提示
align-self 值 :
flex-start flex-end center baseline stretch
order:<整数>(... -1, 0 (default), 1, ..)
在需要修改部分的代码有相关提示,请仔细阅读之后,使用 flex 布局中的 align-self
和 order
完善 index.css
中的代码, 把对应的水果放在对应的盘子里面,最终效果如下:
要求规定
- 请严格按照考试步骤操作,切勿修改考试默认提供项目中的文件名称、文件夹路径等。
- 满足题目需求后,保持 Web 服务处于可以正常访问状态,点击「提交检测」系统会自动判分。
解题思路
题目中给了提示
align-self 值 : flex-start flex-end center baseline stretch
order:<整数>(... -1, 0 (default), 1, ..)这道题目也就简单了,挨个试都能试出来,偏偏我粗心把
align-self写成了align-items,一直出不来结果,然后看了题解文章来源:https://www.toymoban.com/news/detail-823752.html
最终代码:文章来源地址https://www.toymoban.com/news/detail-823752.html
/* 菠萝 TODO 待补充代码 */
.yellow {
align-self: flex-end;
order: 1;
}
/* 以下代码不需要修改 */
#board {
position: sticky;
top: 0;
width: 50vw;
height: 50vw;
min-width: 300px;
min-height: 300px;
max-width: 100vh;
max-height: 100vh;
overflow: hidden;
}
#pond {
z-index: 20;
}
#pond, #background {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 1em;
}
.lilypad, .frog {
position: relative;
width: 20%;
height: 20%;
overflow: hidden;
}
.frog.green .bg {
background-image: url(./img/1.png);
}
.frog.yellow .bg {
background-image: url(./img/2.png);
}
.frog .bg {
background-size: 60% 60%;
}
.lilypad .bg, .frog .bg {
width: 100%;
height: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.lilypad.green .bg {
border-radius: 50%;
background: #9B100A;
opacity: 0.5;
}
.lilypad .bg, .frog .bg {
width: 100%;
height: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
* {
box-sizing: border-box;
}
.lilypad.yellow .bg {
border-radius: 50%;
background: #863A1B;
opacity: 0.5;
}
到了这里,关于web蓝桥杯真题--13、水果摆盘的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!