CSS輪播圖下面的點怎么寫？

在CSS中，我們可以使用列表（List）來創(chuàng)建輪播圖下面的點，每個列表項（List Item）代表一個輪播圖，而列表項前的序號則可以通過CSS樣式來定制。

我們需要創(chuàng)建一個包含所有輪播圖的列表，并為每個列表項添加序號。

<ul class="carousel-dots">
  <li class="dot" data-index="0"></li>
  <li class="dot" data-index="1"></li>
  <li class="dot" data-index="2"></li>
  <li class="dot" data-index="3"></li>
  <li class="dot" data-index="4"></li>
  <li class="dot" data-index="5"></li>
  <li class="dot" data-index="6"></li>
  <li class="dot" data-index="7"></li>
  <li class="dot" data-index="8"></li>
  <li class="dot" data-index="9"></li>
  <li class="dot" data-index="10"></li>
  <li class="dot" data-index="11"></li>
  <li class="dot" data-index="12"></li>
  <li class="dot" data-index="13"></li>
  <li class="dot" data-index="14"></li>
  <li class="dot" data-index="15"></li>
  <li class="dot" data-index="16"></li>
  <li class="dot" data-index="17"></li>
  <li class="dot" data-index="18"></li>
  <li class="dot" data-index="19"></li>
  <li class="dot" data-index="20"></li>
  <li class="dot" data-index="21"></li>
  <li class="dot" data-index="22"></li>
  <li class="dot" data-index="23"></li>
  <li class="dot" data-index="24"></li>
  <li class="dot" data-index="25"></li>
  <li class="dot" data-index="26"></li>
  <li class="dot" data-index="27"></li>
  <li class="dot" data-index="28"></li>
  <li class="dot" data-index="29"></li>
  <li class="dot" data-index="30"></li>
  <li class="dot" data-index="31"></li>
  <li class="dot" data-index="32"></li>
  <li class="dot" data-index="33"></li>
  <li class="dot" data-index="34"></li>
  <li class="dot" data-index="35"></li>
  <li class="dot" data-index="36"></li>
  <li class="dot" data-index="37"></li>
  <li class="dot" data-index="38"></li>
  <li class="dot" data-index="39"></li>
  <li class="dot" data-index="40"></li>
  <li class="dot" data-index="41"></li>
  <li class="dot" data-index="42"></li>
  <li class="dot" data-index="43"></li>
  <li class="dot" data-index="44"></li>
  <li class="dot" data-index="45"></li>
  <li class="dot" data-index="46"></li>
  <li class="dot" data-index="47"></li>
  <li class="dot" data-index="48"></li>
  <li class="dot" data-index="49"></li>
  <li class="dot" data-index="50"></li>
</ul>

我們可以使用CSS樣式來定制這些列表項的外觀，我們可以將列表項設置為圓形，并添加顏色：

.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
}
.dot {
  display: