CSS是網頁設計中必不可少的一部分，可以用來控制網頁中的文本、圖片、排版等。今天我們來學習一下如何使用CSS制作一個折疊按鈕。

/* HTML結構 */
<div class="collapse">
<h3>標題</h3>
<p>內容...</p>
</div>
/* CSS樣式 */
.collapse h3 {
cursor: pointer;
}
.collapse p {
display: none;
}
.collapse.active p {
display: block;
}

以上是一個基本的折疊按鈕的HTML結構和CSS樣式。首先，我們在一個<div>元素中添加一個標題和一個內容，然后通過CSS控制我們的內容是否可見。

下面是代碼中的一些重點解釋：

• 我們給標題添加了一個鼠標樣式，當用戶鼠標懸停在標題上時，光標會變成指針。
• 我們將內容的顯示方式設置為none，這樣內容就不會顯示在頁面中。
• 當用戶點擊折疊按鈕時，我們會向元素添加一個.active類，這時候我們通過CSS將內容的顯示方式設置為block，內容就會顯示在頁面中。

通過這些簡單的CSS樣式，我們就可以制作出一個折疊按鈕，使用戶可以展開或折疊內容。

總結：

• CSS是網頁設計中必不可少的一部分，可以用來控制網頁中的文本、圖片、排版等。
• 使用CSS制作折疊按鈕，可以使用戶可以展開或折疊內容。
• 通過添加.active類，可以在CSS中控制折疊按鈕的展開和折疊狀態。