利用div标记实现下图的五环效果，提示：可以利用border-radius绘制圆利用position属性和margin属性实现定位

好的，我来为您解答。下面是实现五环效果的 HTML 代码和 CSS 样式代码：

<div class="outer">
  <div class="inner red"></div>
  <div class="inner blue"></div>
  <div class="inner yellow"></div>
  <div class="inner black"></div>
  <div class="inner green"></div>
</div>

.outer {
  width: 300px;
  height: 300px;
  position: relative;
}

.inner {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.red {
  background-color: red;
  margin-left: -100px;
}

.blue {
  background-color: blue;
  margin-left: -70px;
  margin-top: -70px;
}

.yellow {
  background-color: yellow;
  margin-top: -100px;
}

.black {
  background-color: black;
  margin-left: 70px;
  margin-top: -70px;
}

.green {
  background-color: green;
  margin-left: 100px;
}

在这个示例中，我们首先创建了一个外部容器 `outer`，它的宽度和高度都是 300px，使用 `position: relative` 来相对定位内部元素。

然后我们创建了五个内部元素 `inner`，它们的宽度和高度都是 200px，使用 `position: absolute` 来绝对定位，并使用 `top: 50%; left: 50%; transform: translate(-50%, -50%)` 来使它们在外部容器的中心。

接下来，我们为每个内部元素设置不同的背景颜色，并使用 `border-radius: 50%` 来绘制圆形。

最后，我们使用 `margin` 属性来调整每个内部元素的位置，以实现五环效果。

希望这个示例能够帮助您解决问题，如有疑问，请随时向我提问。