輪播圖是網頁設計中常用的元素，可以大幅提高頁面的視覺效果和用戶體驗。在CSS中，使用類名來定義輪播圖的樣式是一種常見的方法。

.carousel {
width: 800px;
height: 400px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.carousel .slides {
width: 400%;
height: 400px;
position: absolute;
top: 0;
left: 0;
}
.carousel .slide {
width: 25%;
height: 400px;
float: left;
}
.carousel .slide img {
width: 100%;
height: 100%;
}

上面的代碼展示了一個基本的輪播圖樣式，分別用了.carousel、.slides和.slide三個類名來定義不同的部分。其中，.carousel為整個輪播圖容器的類名，設置了容器的寬高和位置。.slides為包裹輪播圖每個圖片的大容器，利用position: absolute;和top/left屬性來實現輪播效果。最后，.slide為每張圖片的類名，設置了圖片的寬高和位置。

通過合理的類名分類，我們可以更好地把握代碼結構，分離樣式和內容，便于日后的維護和復用，同時使得代碼易于理解和改動。