Мне нужен более простой и эффективный способ, который работает для форматирования моего сайта (использует формы в CSS и HTML)

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