在網頁設計中，手風琴是一種常用的布局效果。通過CSS的樣式，可以實現手風琴效果，讓網頁更加美觀和易于導航。本文將介紹如何使用CSS寫一個簡易手風琴。

HTML代碼：
<div class="accordion">
<div class="accordion-header">標題1</div>
<div class="accordion-content">內容1</div>
<div class="accordion-header">標題2</div>
<div class="accordion-content">內容2</div>
</div>
CSS代碼：
.accordion {
width: 100%;
max-width: 800px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #ddd;
}
.accordion-header {
background-color: #f3f3f3;
padding: 10px;
margin-bottom: 1px;
cursor: pointer;
font-weight: bold;
}
.accordion-content {
padding: 10px;
display: none;
}
.accordion-header.active {
background-color: #ddd;
}
.accordion-header.active + .accordion-content {
display: block;
}
JS代碼：
var headers = document.querySelectorAll('.accordion-header');
headers.forEach(function(header) {
header.addEventListener('click', function() {
headers.forEach(function(header) {
header.classList.remove('active');
header.nextElementSibling.style.display = 'none';
});
this.classList.add('active');
this.nextElementSibling.style.display = 'block';
});
});

以上CSS樣式和JS代碼將創建一個簡單的手風琴。當用戶點擊標題時，相應的內容將展開或收起，切換效果流暢，用戶體驗良好。通過調整樣式和設置內容，該手風琴可以適應不同的設計需求。