【页面布局】水果摆盘蓝桥云课楼赛第31期（Web 前端挑战）

本文主要是介绍【页面布局】水果摆盘蓝桥云课楼赛第31期（Web 前端挑战），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

【页面布局】水果摆盘

背景介绍

目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式，这次试题将利用 Flex 实现经典布局效果。

考试要求

解答：

index.css：

/* 菠萝 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;}