五、利用定位实现如下图所示效果： 1，方块整体宽520px，高280px。整体在页面水平居中。 2，左边的小方块宽20px，高30px，在图片的垂直方向居中显示。右边的小方块同理。 3，下方的整体宽70px，高13px，背景色为白色，其整体在图片的水平方向居中显示。该形状的左右圆弧边的写法为：border-radius： 7px;其内部的小圆点的样式实现代码如下图，其中第一个圆点背景色为橙色。

可以使用CSS的绝对定位来实现这个效果。HTML结构如下：

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

CSS样式如下：

.container {
  position: relative;
  width: 520px;
  height: 280px;
  margin: 0 auto; /* 水平居中 */
  background-color: #ccc;
}

.left, .right {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 30px;
  background-color: #fff;
  transform: translateY(-50%);
}

.left {
  left: 0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.right {
  right: 0;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 70px;
  height: 13px;
  background-color: #fff;
  border-radius: 7px;
  transform: translateX(-50%);
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 6px;
  background-color: #ccc;
}

.active {
  background-color: orange;
}

解释一下：

- `.container` 是整个图形的容器，使用相对定位。
- `.left` 和 `.right` 是左右两个小方块，使用绝对定位来垂直居中，左边的使用 `left: 0`，右边的使用 `right: 0`。
- `.bottom` 是下方的整体，使用绝对定位来底部对齐，使用 `left: 50%` 和 `transform: translateX(-50%)` 来水平居中。
- `.dot` 是小圆点，使用 `display: inline-block` 让它们在一行内排列，使用 `margin: 0 6px` 来让它们之间有一定的间隔。
- `.active` 是当前激活状态的小圆点，使用 `background-color` 来设置背景色。