CSS輪播圖是現代網站設計中非常常見的元素之一。在輪播圖下面一般會有一個點的導航，可以用來幫助用戶知道輪播圖當前展示的是第幾張圖片。下面我們來講一講如何使用CSS來實現這樣的點的導航。

.carousel {
position: relative;
}
.carousel .dots {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
}
.carousel .dot {
width: 10px;
height: 10px;
background-color: #ddd;
border-radius: 50%;
margin: 0px 5px;
cursor: pointer;
}
.carousel .dot.active,
.carousel .dot:hover {
background-color: #666;
}

以上就是實現輪播圖下面點的導航的代碼。首先，我們給輪播圖的容器設置相對定位，然后為導航點創建一個絕對定位的容器，并把它放在輪播圖底部，并水平居中。我們使用flex來讓導航點在這個容器里居中。接著，我們給每個點一個固定的寬度和高度，并設置背景顏色和圓角。為了讓點之間有一些間距，我們為它們設置了一個左右的外邊距。最后，我們使用:hover偽類和.active類來做樣式切換。

值得一提的是，這里使用的是CSS實現輪播圖點的導航，并沒有使用JS。相比于JS實現輪播圖，CSS實現輪播圖不需要繁瑣的代碼和邏輯，能夠更好的提高性能和用戶體驗。