当前位置：首页 > article >正文

蓝桥杯Web前端练习题-----水果拼盘

article 2025/1/31 11:18:29

一、水果拼盘

介绍

目前 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 是图片文件夹。
在浏览器中预览 index.html 页面效果如下：
在这里插入图片描述

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

禁止修改圆盘的位置和图片的大小。
相同颜色的水果放在相同颜色的圆盘正中间（例如：苹果是红色的就放在红色的圆盘里）。
完成后，页面效果如下：

代码
html

    <div id="board">
      <!-- 水果位置 -->
      <div id="pond">
        <!-- 苹果 -->
        <div class="fruit apple">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit apple">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit apple">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit apple">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit apple">
          <div class="bg animated pulse infinite"></div>
        </div>
        <!-- 梨 -->
        <div class="fruit pear">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit pear">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit pear">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit pear">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit pear">
          <div class="bg animated pulse infinite"></div>
        </div>
        <!-- 香蕉 -->
        <div class="fruit banana">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit banana">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit banana">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit banana">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="fruit banana">
          <div class="bg animated pulse infinite"></div>
        </div>
      </div>

      <!-- 背景位置 -->
      <div id="fruit-background" style="flex-flow: column wrap">
        <div class="lilypad apple">
          <div class="bg"></div>
        </div>
        <div class="lilypad apple">
          <div class="bg"></div>
        </div>
        <div class="lilypad apple">
          <div class="bg"></div>
        </div>
        <div class="lilypad apple">
          <div class="bg"></div>
        </div>
        <div class="lilypad apple">
          <div class="bg"></div>
        </div>
        <div class="lilypad pear">
          <div class="bg"></div>
        </div>
        <div class="lilypad pear">
          <div class="bg"></div>
        </div>
        <div class="lilypad pear">
          <div class="bg"></div>
        </div>
        <div class="lilypad pear">
          <div class="bg"></div>
        </div>
        <div class="lilypad pear">
          <div class="bg"></div>
        </div>
        <div class="lilypad banana">
          <div class="bg"></div>
        </div>
        <div class="lilypad banana">
          <div class="bg"></div>
        </div>
        <div class="lilypad banana">
          <div class="bg"></div>
        </div>
        <div class="lilypad banana">
          <div class="bg"></div>
        </div>
        <div class="lilypad banana">
          <div class="bg"></div>
        </div>
      </div>
    </div>

css

/* TODO：待补充代码 */
#pond {
}

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

.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);
}

答案

#pond {
  /* flex布局 */
  display: flex;
  /* 是否换行 默认是不换行  */
  flex-wrap: wrap;
  /* 改变主轴 默认是x轴 即row  y是column */
  flex-direction: column;
}

查看全文

http://www.kler.cn/a/3154.html

C动态库的生成与在Python和QT中的调用方法

XCTF - IllIntentions wp

复古壁纸中棕色系和米色系哪个更受欢迎？

【Linux权限】—— 于虚拟殿堂，轻拨密钥启华章

C++:PTA L2-003 月饼

2025年美赛B题-结合Logistic阻滞增长模型和SIR传染病模型研究旅游可持续性-成品论文

acm省赛：高桥和低桥（三种做法：区间计数、树状数组、线段树）

chatGPT爆火，什么时候中国能有自己的“ChatGPT“

PID控制算法详解

刷题之最长公共/上升子序列问题

Android实时显示时间日期(极简)

7个最好的PDF编辑器，帮你像编辑Word一样编辑PDF

【C语言】(*s)[3]和*s[3]区别

JVM垃圾回收机制

Java设计模式（二）——工厂模式

文件上传的多种利用方式

JeecgBoot 3.5.0 版本发布，开源的企业级低代码平台

Winform/Csharp中使用StackExchange.Redis连接Redis存取数据并序列化对象/反序列化(支持redis key 模糊搜索)

如何将字符串反转？

Java开发常用网址，推荐一些能帮助我们提升开发效率和学识巩固的网址，值得收藏

反向传播算法的算法原理与Python实现

6.网络爬虫——BeautifulSoup详讲与实战

C/C++获取文件名的方法（__FILE__,__builtin_FILE(),__BASE_FILE__）

数据结构中的堆

java与Spring的循环依赖

指针进阶(中)

一、水果拼盘

相关文章：