<div>全屏CSS是一種用于將網頁元素擴展至整個屏幕的技術。通過使用<div>元素，并應用適當的CSS樣式，我們可以輕松地實現網頁的全屏效果。本文將介紹幾個代碼案例，詳細解釋如何使用<div>全屏CSS來創建各種各樣的全屏效果。

案例一：全屏背景圖像

將一張背景圖像全屏顯示是一個常見的需求。我們可以通過以下代碼來實現：

<div class="fullscreen-background">
<!-- 頁面內容 -->
</div>
<br>
<style>
.fullscreen-background {
background-image: url('背景圖像的URL');
background-size: cover;
background-position: center;
height: 100vh;
}
</style>

以上示例中，我們創建了一個帶有類名為fullscreen-background的<div>元素，并為其設置背景圖像。通過CSS樣式，我們將背景圖像的大小設置為cover，以適應屏幕大小，并將其居中對齊。同時，通過設置高度為100vh（視窗高度），我們確保<div>元素鋪滿整個屏幕。

案例二：全屏滾動頁面

創建一個全屏滾動頁面可以帶來獨特的用戶體驗。下面是一個簡單的示例：

<div class="fullscreen-scroll">
<section>第一屏內容</section>
<section>第二屏內容</section>
<section>第三屏內容</section>
</div>
<br>
<style>
.fullscreen-scroll {
height: 100vh;
overflow-y: scroll;
}
<br>
  section {
height: 100vh;
}
</style>

在以上代碼中，我們創建了一個帶有類名為fullscreen-scroll的<div>元素，并將其高度設置為100vh。通過設置overflow-y屬性為scroll，我們可以啟用垂直滾動。每個頁面段落被定義為<section>元素，并將其高度設置為100vh，以使其鋪滿整個屏幕。

案例三：全屏模態框

使用全屏模態框可以吸引用戶的注意力并提供更好的用戶體驗。以下是實現全屏模態框的示例：

<div class="fullscreen-modal">
<div class="modal-content">
<!-- 模態框內容 -->
</div>
</div>
<br>
<style>
.fullscreen-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}
<br>
  .modal-content {
width: 80%;
height: 80%;
background-color: white;
}
</style>

以上代碼中，我們創建了一個帶有類名為fullscreen-modal的<div>元素，并為其設置了固定定位（position: fixed），使其始終位于屏幕頂部。通過設置top、left、width和height屬性，我們確保<div>元素鋪滿整個屏幕。通過背景顏色透明度，我們實現了黑色半透明的背景效果。使用flex布局屬性，我們將模態框內容居中對齊。

結論

通過使用<div>全屏CSS，我們可以輕松地實現各種各樣的全屏效果，如全屏背景圖像、全屏滾動頁面和全屏模態框。這些效果提供了更好的用戶體驗和呈現方式，可以用于各種網頁設計。希望本文的示例能夠幫助你更好地理解和應用<div>全屏CSS技術。