折疊頁是一種常用的網頁布局，可以將頁面的內容分成多個部分，讓用戶可以按照自己的需求來展開或收縮內容。在實現折疊頁的時候，CSS可以幫我們實現頁面的樣式和交互效果。接下來，我們就來看看如何用CSS來實現折疊頁。

/* CSS代碼開始 */
/* 先定義一個包含所有內容的容器 */
.container {
width: 100%;
}
/* 然后設置標題和內容的樣式 */
.title, .content {
padding: 10px;
cursor: pointer;
}
.title {
background-color: #eee;
font-weight: bold;
}
.content {
display: none;
}
/* 最后設置交互效果 */
.title.active {
background-color: #ccc;
}
.content.active {
display: block;
}
/* CSS代碼結束 */

在上面的代碼中，我們首先定義了一個包含所有內容的容器，并設置了標題和內容的樣式。其中，標題的樣式為粗體，背景顏色為灰色，而內容的樣式設置為不可見。然后，我們通過設置.active類來實現交互效果。當用戶點擊標題時，我們將為標題和內容分別加上.active類，從而實現展開或收縮的效果。

下面是一個示例折疊頁的HTML代碼：

<div class="container">
<div class="title">標題1</div>
<div class="content">內容1</div>
<div class="title">標題2</div>
<div class="content">內容2</div>
<div class="title">標題3</div>
<div class="content">內容3</div>
</div>

在結構上，我們將標題和內容分別放在容器中，并通過設置title和content類來設置樣式。最后，我們可以通過使用JavaScript來實現點擊標題自動展開或收縮內容的需求。

總之，CSS提供了一種簡單而有效的方式來實現折疊頁效果。在實現時，我們需要設置標題和內容的樣式，以及交互效果的細節。當然，在使用CSS實現折疊頁時，我們需要考慮到兼容性和可訪問性等方面的問題，從而提高頁面的使用和體驗效果。