Question

我想设计一个页面，该页面的每个下象限中有24个圆圈，以两个为一叠（因此，左下角的顶部行各有12个圆圈，右下角的行相同）

有人可以告诉我，即使我对前几个圈子的兴趣超过4次，为什么它却不允许我做更多的圈子？如果有人知道更简单的方法，请告诉我。还有任何进一步的学习资源，可以进一步降低HTML + CSS + JSS的格式。谢谢。

这是我的代码：

HTML： {

  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>
  <span class="BottomLeftseat"></span>

 <span2 class = "TopLeftseat" ></span2>
 <span2 class = "TopLeftseat" ></span2>
 <span2 class = "TopLeftseat" ></span2>
 <span2 class = "TopLeftseat" ></span2>
 <span2 class = "TopLeftseat" ></span2>
 <span2 class = "TopLeftseat" ></span2>

}

CSS：

body {

  background-color: white;

}


.TopLeftseat {
  height: 27px;
  width: 27px;
  position: relative;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  left: 50%;
  top: 50%;


}

.BottomLeftseat {
  height: 27px;
  width: 27px;
  position: relative;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  left: 0%;
  top: 600px;


}

.TopLeftseat {
  height: 27px;
  width: 27px;
  position: relative;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  left: -400px;
  top: 500px;


}

.TopRightseat {
  height: 27px;
  width: 27px;
  position: relative;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  left: 0%;
  top: 600px;

}

.BottomRightseat {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;

}

Answer 1

HTML并不是这项工作的真正工具。我建议使用SVG，这是一种类似于HTML的标记语言，但带有用于矢量图形的元素。例如：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50"/>
</svg>

另请参阅：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes

我需要一种更轻松，更有效的方法来进行网站格式化（在CSS和HTML中使用形状）

1 个答案: