web蓝桥杯真题--13、水果摆盘

背景介绍

目前 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 图片文件夹。
  1. 选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。
  2. 打开环境右侧的【Web 服务】。

考试要求

提示
复制代码
align-self 值 :
  flex-start flex-end center baseline stretch

order:<整数>(... -1, 0 (default), 1, ..)

在需要修改部分的代码有相关提示,请仔细阅读之后,使用 flex 布局中的 align-selforder 完善 index.css 中的代码, 把对应的水果放在对应的盘子里面,最终效果如下:

要求规定

  • 请严格按照考试步骤操作,切勿修改考试默认提供项目中的文件名称、文件夹路径等。
  • 满足题目需求后,保持 Web 服务处于可以正常访问状态,点击「提交检测」系统会自动判分。

解题思路

题目中给了提示

align-self 值 : flex-start flex-end center baseline stretch

order:<整数>(... -1, 0 (default), 1, ..)这道题目也就简单了,挨个试都能试出来,偏偏我粗心把

align-self写成了align-items,一直出不来结果,然后看了题解

最终代码:

复制代码
/* 菠萝 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;

}
相关推荐
GISer_Jing43 分钟前
sqb&ks二面(准备)
前端·javascript·面试
谢尔登1 小时前
【Webpack】模块联邦
前端·webpack·node.js
Bottle4141 小时前
深入探究 React Fiber(译文)
前端
汤姆Tom1 小时前
JavaScript Proxy 对象详解与应用
前端·javascript
xiaopengbc1 小时前
在 React 中如何使用 useMemo 和 useCallback 优化性能?
前端·javascript·react.js
GISer_Jing1 小时前
React 18 过渡更新:并发渲染的艺术
前端·javascript·react.js
全栈技术负责人2 小时前
前端网络性能优化实践:从 HTTP 请求到 HTTPS 与 HTTP/2 升级
前端·网络·http
码上暴富2 小时前
Echarts雷达图根据数值确定颜色
前端·javascript·echarts
Mintopia2 小时前
在混沌宇宙中捕捉错误的光——Next.js 全栈 Sentry / LogRocket
前端·javascript·next.js
Mintopia2 小时前
长文本 AIGC:Web 端大篇幅内容生成的技术优化策略
前端·javascript·aigc