在現代網頁設計中，CSS技術已經成為不可或缺的一部分。通過CSS，設計師可以自由地控制頁面布局、顏色、字體等樣式，從而創造出美觀、易用的網頁。而其中一種應用比較廣泛的技術就是CSS網頁飄窗。

CSS網頁飄窗是指在網頁上可以隨著頁面滾動而浮動的小窗口，通常用于展示一些重要的信息、廣告等內容。這種效果可以通過CSS的position屬性和z-index屬性來實現。

/* 設置飄窗樣式 */
#floatDiv{
position: fixed; /* 絕對定位 */
top: 50%; /* 離頁面頂部的距離 */
left: 50%; /* 離頁面左側的距離 */
margin-top: -100px; /* 飄窗高度的一半 */
margin-left: -150px; /* 飄窗寬度的一半 */
z-index: 9999; /* 顯示在其他元素之上 */
background-color: #fff; /* 背景顏色 */
border: 1px solid #333; /* 邊框樣式 */
box-shadow: 0 0 10px #333; /* 陰影效果 */
padding: 10px; /* 內邊距 */
}
/* 設置關閉按鈕樣式 */
#floatDiv a.closeBtn{
position: absolute; /* 相對定位 */
top: 5px; /* 離飄窗頂部的距離 */
right: 5px; /* 離飄窗右側的距離 */
color: #333; /* 字體顏色 */
text-decoration: none; /* 去掉下劃線 */
font-size: 16px; /* 字體大小 */
}
/* 鼠標懸停關閉按鈕效果 */
#floatDiv a.closeBtn:hover{
color: #f00; /* 點亮顏色 */
}

上面的CSS代碼中，我們定義了一個id為floatDiv的飄窗，在網頁中可以通過標簽<div id="floatDiv"></div>來創建。其中position屬性被設置為fixed，這樣飄窗就會一直保持在頁面的固定位置。top和left屬性用來設置飄窗距離頁面頂部和左側的距離，margin-top和margin-left屬性用來調整飄窗的位置居中顯示。此外，我們還可以通過background-color、border、box-shadow和padding等屬性來設置飄窗的樣式。

此外，我們還定義了一個關閉按鈕，用來關閉飄窗。該按鈕使用了絕對定位，距離飄窗頂部和右側都有一定的距離。通過鼠標懸停樣式的設置，可以讓用戶感知到按鈕的可操作性。

當然，CSS網頁飄窗的應用遠不止于此。有些網站還會通過JavaScript來實現飄窗的滑動、漸變等動畫效果，讓飄窗更加生動、有趣。但無論如何，CSS網頁飄窗已經成為了網站設計的一個不可或缺的效果，為網站增加了不少用戶體驗和品牌形象的點睛之筆。