The 13th Blue Bridge Cup National Software and Information Technology Operation Talent Competition (Web Application Development) - Layout Question Type (First Question)

Question 1: Fruit Platter

Introduction: At present, the newly added Flex elastic layout in CSS3 has become the preferred solution for front-end pages. Ontology can use the Flex property to quickly complete the layout

The effect of previewing the index.html page in the browser is as follows:

need:

It is recommended to use flex related properties to complete the TODO section in css/style.css.

1. It is forbidden to modify the position of the disc and the size of the picture.

2. Put the fruit of the same color in the middle of the disc of the same color (for example: if the apple is red, put it in the red disc).

After completion, the effect is as follows:

html part code

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

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

Follow me, and I will continue to update the question types later!

The 13th Blue Bridge Cup National Software and Information Technology Operation Talent Competition (Web Application Development) - Layout Question Type (First Question)

Question 1: Fruit Platter

Introduction: At present, the newly added Flex elastic layout in CSS3 has become the preferred solution for front-end pages. Ontology can use the Flex property to quickly complete the layout

need:

Guess you like