頁(yè)面懸浮層是現(xiàn)在最常用的一種交互方式，可以用來(lái)展示一些重要的信息或執(zhí)行一些重要的操作。CSS懸浮層是一種通過(guò)CSS實(shí)現(xiàn)的懸浮層，具有結(jié)構(gòu)簡(jiǎn)單，方便實(shí)現(xiàn)的優(yōu)點(diǎn)。

/* 懸浮層的樣式 */
.popup {
position: fixed;  /* 相對(duì)于整個(gè)窗口的位置 */
top: 50%; /* 向下偏移50% */
left: 50%; /* 向右偏移50% */
transform: translate(-50%, -50%); /* 讓層水平垂直居中，也可以使用margin */
z-index: 100; /* 控制層級(jí)關(guān)系，使懸浮層在前面 */
width: 300px; /* 設(shè)置寬度 */
height: 200px; /* 設(shè)置高度 */
background-color: #fff; /* 設(shè)置背景顏色 */
box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3); /* 添加陰影效果 */
border-radius: 4px; /* 添加圓角效果 */
}
/* 懸浮層關(guān)閉按鈕的樣式 */
.close-btn {
position: absolute; /* 相對(duì)于懸浮層進(jìn)行定位 */
top: 10px; /* 向下偏移10px */
right: 10px; /* 向左偏移10px */
cursor: pointer; /* 鼠標(biāo)移上去變成手型 */
}
/* 給關(guān)閉按鈕添加圖標(biāo) */
.close-btn:before {
content: '\2715'; /* 添加一個(gè)叉號(hào)的Unicode碼 */
font-size: 20px; /* 設(shè)置字體大小 */
font-weight: bold; /* 設(shè)置粗體 */
color: #ccc; /* 設(shè)置顏色 */
}
/* 鼠標(biāo)移到關(guān)閉按鈕上的樣式 */
.close-btn:hover:before {
color: #555; /* 設(shè)置顏色變化 */
}
/* 遮罩層的樣式 */
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,.7); /* 設(shè)置帶透明度的背景色 */
z-index: 99; /* 控制層級(jí)關(guān)系，使遮罩層在懸浮層下面 */
}

以上是一個(gè)基本的CSS懸浮層樣式，可以在需要使用時(shí)進(jìn)行調(diào)用。需要注意的是，在實(shí)際的開(kāi)發(fā)中還需要在彈出懸浮層時(shí)添加顯示遮罩層的代碼，并在關(guān)閉懸浮層時(shí)關(guān)閉遮罩層。