web蓝桥杯真题--9、水果拼盘

这篇具有很好参考价值的文章主要介绍了web蓝桥杯真题--9、水果拼盘。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

介绍

目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方案,本题可以使用 Flex 属性快速完成布局。

准备

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

├── css
│   └── style.css
├── images
│   ├── apple.svg
│   ├── banana.svg
│   ├── blueplate.svg
│   ├── redplate.svg
│   ├── yellowplate.svg
│   └── pear.svg
└── index.html

其中:

  • css/style.css 是需要补充的样式文件。
  • index.html 是主页面。
  • images 是图片文件夹。

注意:打开环境后发现缺少项目代码,请手动键入下述命令进行下载:

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9791/01.zip && unzip 01.zip && rm 01.zip

在浏览器中预览 index.html 页面效果如下:

web蓝桥杯真题--9、水果拼盘,蓝桥杯真题web,前端,蓝桥杯

目标

建议使用 flex 相关属性完成 css/style.css 中的 TODO 部分。

  1. 禁止修改圆盘的位置和图片的大小。
  2. 相同颜色的水果放在相同颜色的圆盘正中间(例如:苹果是红色的就放在红色的圆盘里)。

完成后,页面效果如下:

web蓝桥杯真题--9、水果拼盘,蓝桥杯真题web,前端,蓝桥杯

规定

  • 禁止修改圆盘的位置和图片的大小。
  • 请勿修改项目中的 DOM 结构。
  • 请严格按照考试步骤操作,切勿修改考试默认提供项目中的文件名称、文件夹路径等。

判分标准

  • 本题完全实现题目目标得满分,否则得 0 分。

实现思路

这个题目有点绕,可能是我菜

web蓝桥杯真题--9、水果拼盘,蓝桥杯真题web,前端,蓝桥杯

主要是将水果放在盘子里面,把pond的布局设置为flex,然后需要的是将bg这些水果竖着放,也就是flex-direction:column; 然后所有的水果就集中显示在了最左边一行,再添加一个换行flex-wrap:wrap;

具体实现代码:文章来源地址https://www.toymoban.com/news/detail-802339.html

/* TODO:待补充代码 */
#pond {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
}

/* 以下代码不需要修改 */

.fruit.apple .bg {
  background-image: url(../images/apple.svg);
}

.fruit.pear .bg {
  background-image: url(../images/pear.svg);
}

.fruit.banana .bg {
  background-image: url(../images/banana.svg);
}

#pond {
  z-index: 20;
}

#pond,
#fruit-background {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1em;
}

.lilypad,
.fruit {
  position: relative;
  width: 20%;
  height: 20%;
  overflow: hidden;
}

.lilypad .bg,
.fruit .bg {
  width: 100%;
  height: 100%;
  background-position: center center;
  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;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

.lilypad .bg,
.fruit .bg {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}

.fruit .bg {
  background-size: 30% 30%;
}

* {
  box-sizing: border-box;
}

.lilypad.apple .bg {
  border-radius: 50%;
  background-image: url(../images/redplate.svg);
  opacity: 0.6;
}

.lilypad.banana .bg {
  border-radius: 50%;
  background-image: url(../images/yellowplate.svg);
  opacity: 0.6;
}

.lilypad.pear .bg {
  border-radius: 50%;
  opacity: 0.6;
  background-image: url(../images/blueplate.svg);
}

到了这里,关于web蓝桥杯真题--9、水果拼盘的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web蓝桥杯真题--8、和手机相处的时光

    现在都提倡健康使用手机,那么统计一下在一周中每天使用手机的情况吧!本题使用 ECharts 实现统计手机使用时长的折线图,但是代码中存在 Bug 需要你去修复。 开始答题前,需要先打开本题的项目代码文件夹,目录结构如下: 其中: js/echarts.js  是 ECharts 文件。 index.html  

    2024年01月19日
    浏览(32)
  • web蓝桥杯真题--14、关于你的欢迎语

    营销号,有时候需要一些特定的欢迎语,但针对特定的用户,我们希望可以个性化一点。本题需要在项目文件中修改代码存在的问题,实现根据模版生成特定用户的欢迎语。 本题已经内置了初始代码,打开实验环境,目录结构如下: 其中: css/style.css  是页面样式文件。 c

    2024年01月25日
    浏览(30)
  • 2023年第十四届蓝桥杯Web应用开发(职业院校组)省赛真题

    前言: 因博主申请的线上考试所以留下了真题,本篇文章只有题目没有答案( 真题源码资源在最后 ),因博主技术有限(请理解一下),博主只拿了省二 目录 1. 电影院排座位 2. 图⽚⽔印⽣成: 3.  收集帛书碎⽚ 4. ⾃适应⻚⾯ 5.  外卖给好评 6. 视频弹幕  7. ISBN 转换与⽣成

    2024年02月05日
    浏览(46)
  • 【蓝桥杯选拔赛真题11】C++求平方 青少年组蓝桥杯C++选拔赛真题 STEMA比赛真题解析

    目录 C/C++求平方 一、题目要求 1、编程实现 2、输入输出

    2024年02月05日
    浏览(46)
  • 【蓝桥杯嵌入式】蓝桥杯第十二届省赛程序真题,真题分析与代码讲解

    🎊【蓝桥杯嵌入式】专题正在持续更新中,原理图解析✨,各模块分析✨以及历年真题讲解✨都在这儿哦,欢迎大家前往订阅本专题,获取更多详细信息哦🎏 🎏【蓝桥杯嵌入式】蓝桥杯第十届省赛真题 🎏【蓝桥杯嵌入式】蓝桥杯第十三届省赛程序真题 🪔本系列专栏 -  

    2023年04月15日
    浏览(71)
  • 蓝桥杯:国二选手经验贴 附蓝桥杯历年真题

    🤩 那么恭喜你呀 ~ 看到一篇宝藏参赛指南 🤩 楼主将结合自己的参赛经历 手把手教你拿到省一进国赛嗷!!!(文章结尾有历年真题及VIP试题链接 建议收藏 ~✌️) 楼主是参加了2022年的蓝桥杯算法竞赛Python大学A组 先浅浅晒一下证书: 目录  ⭐️引言⭐️ ⭐️本文适合

    2023年04月09日
    浏览(55)
  • 【蓝桥杯嵌入式】蓝桥杯嵌入式第十四届省赛程序真题,真题分析与代码讲解

     🎊【蓝桥杯嵌入式】专题正在持续更新中,原理图解析✨,各模块分析✨以及历年真题讲解✨都已更新完毕,欢迎大家前往订阅本专题🎏 🎏【蓝桥杯嵌入式】蓝桥杯第十届省赛真题 🎏【蓝桥杯嵌入式】蓝桥杯第十二届省赛程序真题 🎏【蓝桥杯嵌入式】蓝桥杯第十三届省

    2023年04月15日
    浏览(94)
  • 【蓝桥杯省赛真题18】python阴影图形面积 青少年组蓝桥杯python编程省赛真题解析

    目录 python阴影图形面积 一、题目要求 1、编程实现 2、输入输出

    2023年04月23日
    浏览(40)
  • 【蓝桥杯】【省赛真题】

    关于第十一届第一场蓝桥杯中如何判断串口数据的问题的代码如下:

    2023年04月09日
    浏览(36)
  • 蓝桥杯真题6

    对于正整数 n, 如果存在正整数 k 使得 n=1+2+3+⋯+k=k(k+1)/2, 则 n 称为三角数。例如, 66066 是一个三角数, 因为 66066=1+2+3+⋯+363 。 如果一个整数从左到右读出所有数位上的数字, 与从右到左读出所有数位 上的数字是一样的, 则称这个数为回文数。例如, 66066 是一个回文数, 8778 也是一

    2023年04月10日
    浏览(26)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包