第十三届蓝桥杯全国软件和信息技术作业人才大赛（Web应用开发）——布局题型（第一题）

第一题：水果拼盘

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

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

需求：

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

1.禁止修改圆盘的的位置和图片的大小。

2.相同颜色的水果放在相同颜色的圆盘正中间（例如：苹果是红色的就放在红色的圆盘里）。

完成后，效果如下：

html部分代码

<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>

css部分代码

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

关注我，后面持续更新题型哦！

第十三届蓝桥杯全国软件和信息技术作业人才大赛（Web应用开发）——布局题型（第一题）

第一题：水果拼盘

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

需求：

猜你喜欢

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