蓝桥杯 - 中等 - 水果拼盘

来一碗刘肉面

于 2025-03-30 10:30:00 发布

阅读量303

点赞数 1

分类专栏：蓝桥杯文章标签：蓝桥杯职场和发展

本文链接：https://blog.csdn.net/2302_81312344/article/details/146711604

版权

蓝桥杯专栏收录该内容

27 篇文章

订阅专栏

介绍

目前 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 页面效果如下：

目标

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

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

完成后，页面效果如下：

规定

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

判分标准

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

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>水果拼盘</title>
  </head>

  <body>
    <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>
  </body>
</html>

/* TODO：待补充代码 */
#pond {
  display: flex; /* 设置为弹性盒子布局，用于灵活排列子元素 */
  flex-direction: column; /* 弹性盒子子元素排列方向为垂直列 */
  flex-wrap: wrap; /* 子元素在空间不足时自动换行 */
}

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

/* 为类名为 fruit 且包含 apple 的元素内的 .bg 元素设置苹果背景图 */
.fruit.apple .bg { 
  background-image: url(../images/apple.svg); 
}

/* 为类名为 fruit 且包含 pear 的元素内的 .bg 元素设置梨背景图 */
.fruit.pear .bg { 
  background-image: url(../images/pear.svg); 
}

/* 为类名为 fruit 且包含 banana 的元素内的 .bg 元素设置香蕉背景图 */
.fruit.banana .bg { 
  background-image: url(../images/banana.svg); 
}

#pond {
  z-index: 20; /* 设置元素堆叠层级，数值越大越显示在上方 */
}

/* 为 #pond 和 #fruit-background 元素设置共同样式 */
#pond,
#fruit-background { 
  display: flex; /* 弹性盒子布局 */
  position: absolute; /* 绝对定位，脱离文档流 */
  top: 0; /* 距离顶部 0 像素 */
  left: 0; /* 距离左侧 0 像素 */
  width: 100%; /* 占据父元素 100% 宽度 */
  height: 100%; /* 占据父元素 100% 高度 */
  padding: 1em; /* 内边距 1em，用于内部空间留白 */
}

/* 为 .lilypad 和 .fruit 元素设置共同样式 */
.lilypad,
.fruit { 
  position: relative; /* 相对定位，作为子元素绝对定位的参考 */
  width: 20%; /* 宽度占父元素的 20% */
  height: 20%; /* 高度占父元素的 20% */
  overflow: hidden; /* 超出元素尺寸的内容隐藏 */
}

/* 为 .lilypad 内的 .bg 和 .fruit 内的 .bg 元素设置共同样式 */
.lilypad .bg,
.fruit .bg { 
  width: 100%; /* 填充父元素宽度 */
  height: 100%; /* 填充父元素高度 */
  background-position: center center; /* 背景图水平和垂直居中 */
  background-repeat: no-repeat; /* 背景图不重复 */
}

/* 为同时拥有 .animated 和 .infinite 类的元素设置动画无限循环 */
.animated.infinite { 
  -webkit-animation-iteration-count: infinite; /* 适配 WebKit 内核（如 Safari） */
  animation-iteration-count: infinite; /* 标准语法，动画无限循环 */
}

/* 为 .pulse 类元素指定动画名称为 pulse */
.pulse { 
  -webkit-animation-name: pulse; /* WebKit 内核动画名称 */
  animation-name: pulse; /* 标准动画名称 */
}

/* 为 .animated 类元素设置基础动画属性 */
.animated { 
  -webkit-animation-duration: 1s; /* WebKit 内核动画时长 1 秒 */
  animation-duration: 1s; /* 动画总时长 1 秒 */
  -webkit-animation-fill-mode: both; /* WebKit 内核动画填充模式，保持开始和结束状态 */
  animation-fill-mode: both; /* 动画填充模式，保持开始和结束状态 */
}

/* WebKit 内核下的 pulse 动画关键帧 */
@-webkit-keyframes pulse { 
  0% { /* 动画起始状态 */
    -webkit-transform: scaleX(1); /* 水平缩放 1 倍（无缩放） */
    transform: scaleX(1); 
  }
  50% { /* 动画 50% 进度状态 */
    -webkit-transform: scale3d(1.05, 1.05, 1.05); /* 三维缩放，x/y/z 轴均缩放 1.05 倍 */
    transform: scale3d(1.05, 1.05, 1.05); 
  }
  to { /* 动画结束状态（等同于 100%） */
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
  }
}

/* 标准语法下的 pulse 动画关键帧 */
@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 元素设置背景图尺寸为容器的 80% */
.lilypad .bg,
.fruit .bg { 
  width: 100%; 
  height: 100%; 
  background-position: center center; 
  background-size: 80% 80%; /* 背景图宽高各占容器的 80% */
  background-repeat: no-repeat; 
}

/* 单独为 .fruit .bg 元素设置背景图尺寸为容器的 30%（覆盖上面的 80% 设置） */
.fruit .bg { 
  background-size: 30% 30%; 
}

/* 通用选择器：设置所有元素的盒模型为 border-box，让 padding 和 border 包含在 width/height 内 */
* { 
  box-sizing: border-box; 
}

/* 为类名为 lilypad 且包含 apple 的元素内的 .bg 元素设置样式 */
.lilypad.apple .bg { 
  border-radius: 50%; /* 圆形边框，实现圆角效果 */
  background-image: url(../images/redplate.svg); /* 红色盘子背景图 */
  opacity: 0.6; /* 透明度 0.6，半透明效果 */
}

/* 为类名为 lilypad 且包含 banana 的元素内的 .bg 元素设置样式 */
.lilypad.banana .bg { 
  border-radius: 50%; 
  background-image: url(../images/yellowplate.svg); /* 黄色盘子背景图 */
  opacity: 0.6; 
}

/* 为类名为 lilypad 且包含 pear 的元素内的 .bg 元素设置样式 */
.lilypad.pear .bg { 
  border-radius: 50%; 
  opacity: 0.6; 
  background-image: url(../images/blueplate.svg); /* 蓝色盘子背景图 */
}