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

蓝桥杯 - 中等 - 智能停车系统

article 2025/3/29 1:54:03

介绍

蓝桥社区停车场正式对外开放，但由于停车位线标记不够完善，车主总是乱停乱放。为了使车辆有序的停放，现在给停车场绘制了醒目的停车位线。

本题需要在已提供的基础项目中，使用 CSS 让每辆车正确停放至停车位。

准备

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

├── images
├── css
|   └── style.css
└── index.html

其中：

images 是图片文件夹。
index.html 是主页面。
css/style.css 是待补充代码的 css 文件。

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

目标

请使用 Flex 完善 css/style.css 中的 TODO 代码，让每辆车正确停放至停车位，最终实现下图效果。

提示：设置子元素为（flex-wrap）换行，在交叉轴上使用（align-content）两端对齐分布，在主轴上使用（justify-content）两端对齐分布。两端对齐分布效果即均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。

规定

请勿修改 css/style.css 文件外的任何内容。
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题⽆法通过。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./css/style.css" rel="stylesheet" type="text/css" />
  <title>智能停车系统</title>
</head>
<body>
  <div class="cars">
    <div class="car"><img src="./images/car.png" /></div>
    <div class="car"><img src="./images/car.png" /></div>
    <div class="car"><img src="./images/car.png" /></div>
    <div class="car"><img src="./images/car.png" /></div>
    <div class="car"><img src="./images/car.png" /></div>
    <div class="car"><img src="./images/car.png" /></div>
    <div class="car"><img src="./images/car.png" /></div>
    <div class="car"><img src="./images/car.png" /></div>
  </div>

  <div class="parking-lot">
    <div class="parking-lot-row">
      <div class="parking-garage">
        <div class="inner-border"></div>
        <div class="parking-space"></div>
      </div>
      <div class="parking-garage hidden"></div>
      <div class="parking-garage">
        <div class="inner-border"></div>
        <div class="parking-space"></div>
      </div>
      <div class="parking-garage hidden"></div>
      <div class="parking-garage">
        <div class="inner-border"></div>
        <div class="parking-space"></div>
      </div>
    </div>


    <div class="parking-lot-row">
      <div class="parking-garage">
        <div class="inner-border"></div>
        <div class="parking-space"></div>
      </div>
      <div class="parking-garage hidden"></div>
      <div class="parking-garage">
        <div class="inner-border"></div>
        <div class="parking-space"></div>
      </div>
      <div class="parking-garage hidden"></div>
      <div class="parking-garage hidden"></div>
    </div>

    <div class="parking-lot-row">
      <div class="parking-garage">
        <div class="inner-border"></div>
        <div class="parking-space"></div>
      </div>
      <div class="parking-garage hidden"></div>
      <div class="parking-garage">
        <div class="inner-border"></div>
        <div class="parking-space"></div>
      </div>
      <div class="parking-garage hidden"></div>
      <div class="parking-garage">
        <div class="inner-border"></div>
        <div class="parking-space"></div>
      </div>
    </div>
  </div>
</body>

</html>

.cars {
  position: absolute;
  z-index: 2;
  width: 600px;
  height: 600px;
  display: flex;
  flex-direction: column;  /* 排成列*/
  /* TODO: 请为下方属性填空，不要更改其他选择器里的代码 */
  flex-wrap: wrap; 
  align-content: space-between;
  justify-content:space-between;

}


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

body {
  margin: 0;
  padding: 0;
  background-color: #d4e3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.car {
  width: 90px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.car>img {
  width: 100%;
}


.parking-lot-row {
  width: 640px;
  height: 220px;
}

.parking-lot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 660px;
  border: 4px dashed rgb(130, 130, 130);
}

.hidden {
  visibility: hidden;
}

.parking-lot-row {
  display: flex;
  height: 200px;
  align-items: center;
}

.parking-garage {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #ddd;
  border: 2px solid #999;
  margin: 20px;
}

.inner-border {
  border: 2px dashed #999;
  border-radius: 10px;
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  z-index: 1;
}

.parking-space {
  background-color: #5e92f366;
  position: absolute;
  top: 22px;
  left: 22px;
  width: 40px;
  height: 40px;

}