幻燈片是一種常見的展示方式，可以在網頁中實現視覺上的動態效果，吸引用戶的關注。下面我們來介紹如何用CSS制作一個簡單的幻燈片。

首先，我們需要準備一些HTML代碼來定義幻燈片中的內容，如下所示：

<div class="slider">
<ul>
<li><img src="slide-1.jpg" alt=""></li>
<li><img src="slide-2.jpg" alt=""></li>
<li><img src="slide-3.jpg" alt=""></li>
</ul>
</div>

上面的代碼中，我們使用了一個帶有class屬性的div元素來包裹整個幻燈片，使用了一個ul元素來包裹所有的幻燈片圖片。接下來，我們可以使用CSS來定義這些元素的樣式。

.slider {
overflow: hidden; /* 隱藏超出顯示區域的內容 */
width: 600px;
height: 400px;
position: relative; /* 設置為相對定位 */
}
ul {
list-style: none; /* 去掉列表標記 */
margin: 0;
padding: 0;
width: 300%;
height: 100%;
position: absolute; /* 設置為絕對定位，并設置初始left值 */
left: 0;
transition: left 0.5s ease; /* 使用過渡效果實現圖片的滑動 */
}
li {
width: 33.33%;
height: 100%;
float: left;
}

上面的代碼中，我們為slider元素設置了寬度、高度和相對定位屬性，并使用了overflow:hidden屬性來隱藏超出顯示區域的內容。我們還為ul元素設置了絕對定位屬性，并使用了一個比原始寬度寬出三倍的寬度來放置所有的幻燈片圖片，同時使用了一個過渡效果來實現圖片的滑動。我們還為li元素設置了寬度、高度和浮動屬性。

最后，我們可以為幻燈片添加一些交互效果，使其更加動態。比如，我們可以添加一個定時器來自動切換幻燈片圖片，或者添加一些控制按鈕來讓用戶手動切換圖片。

綜上所述，以上就是如何用CSS制作幻燈片的簡單教程。當然，具體實現方式還需要結合實際需求進行調整和優化，希望能夠對您有所幫助。