<div> CSS演示是一種用于創建各種布局和樣式的技術。通過使用<div>元素和CSS樣式，可以輕松地分割和布局網頁的不同部分。這種技術是構建現代網站和Web應用程序的基礎。以下是幾個代碼案例，展示了如何使用<div>元素和CSS樣式來創建不同的布局和樣式效果。
第一個案例展示如何使用<div>和CSS樣式創建一個簡單的兩欄布局。通過設置<div>的寬度和浮動屬性，可以將其分割成兩個相鄰的列。其中一個列可用于導航菜單，另一個列可用于內容顯示。以下是代碼示例：

<style>
.container {
width: 800px;
}
<br>
    .nav {
width: 200px;
float: left;
background-color: #f2f2f2;
}
<br>
    .content {
width: 600px;
float: left;
background-color: #fff;
}
</style>
<br>
<div class="container">
<div class="nav">
<p>這里是導航菜單</p>
</div>
<div class="content">
<p>這里是內容</p>
</div>
</div>

第二個案例展示如何使用<div>和CSS樣式創建一個響應式網格布局。通過設置<div>的display屬性為grid，并使用grid-template-columns屬性定義列數和寬度，可以創建一個自適應的網格布局。以下是代碼示例：

<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
<br>
    .item {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
</style>
<br>
<div class="grid-container">
<div class="item">
<p>項目1</p>
</div>
<div class="item">
<p>項目2</p>
</div>
<div class="item">
<p>項目3</p>
</div>
</div>

第三個案例展示如何使用<div>和CSS樣式來創建一個折疊式菜單。通過為<div>元素添加一個toggle類，使其在點擊時切換顯示和隱藏，從而實現菜單的折疊和展開效果。以下是代碼示例：

<style>
.menu {
display: none;
}
<br>
    .toggle {
cursor: pointer;
}
<br>
    .toggle::after {
content: '+';
display: inline-block;
}
<br>
    .toggle.open::after {
content: '-';
}
</style>
<br>
<div class="toggle">點擊這里</div>
<div class="menu">
<p>菜單項1</p>
<p>菜單項2</p>
<p>菜單項3</p>
</div>
<br>
<script>
const toggleBtn = document.querySelector('.toggle');
const menu = document.querySelector('.menu');
<br>
    toggleBtn.addEventListener('click', function() {
menu.classList.toggle('open');
});
</script>

以上是幾個使用<div>和CSS樣式的案例，演示了如何創建不同的布局和樣式效果。通過靈活運用<div>元素和CSS樣式，可以實現豐富多樣的網頁布局和交互效果。希望這些案例能對您有所幫助！</div>