色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css網頁彈窗

錢衛國2年前7瀏覽0評論

CSS 網頁彈窗是一個非常有用的特效,它能夠讓我們在設計網頁時添加更多的交互元素,提供更好的用戶體驗。本文將介紹如何使用 CSS 實現網頁彈窗效果。

/* CSS 代碼 */
.popup {
position: fixed;
z-index: 999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
border-radius: 5px;
padding: 20px;
max-width: 600px;
overflow: auto;
}
.popup h2 {
font-size: 24px;
color: #333;
}
.popup-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: #999;
cursor: pointer;
}
.popup-overlay {
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

以上代碼中,.popup 和 .popup-overlay 分別表示彈窗和彈窗背景層的樣式。其中,.popup 通過設置 position: fixed 和 top/left/transform 屬性使其居中顯示。border-radius 和 box-shadow 屬性用于美化彈窗。padding 屬性用于設置內邊距,overflow 屬性用于處理內容過長時的滾動。

.popup 的內部包含一個標題 h2 和關閉按鈕 .popup-close。這兩個元素的樣式分別使用了 font-size、color 和 cursor 等屬性。關閉按鈕的樣式通過設置 position: absolute、top 和 right 等屬性實現了固定位置。

最后,為了遮蓋整個頁面而不是只遮蓋彈窗本身,我們需要使用 .popup-overlay 設置顏色為半透明的黑色。

如此一來,我們就實現了一個漂亮的彈窗效果。當然,實際應用中還需要添加一些 JavaScript 代碼控制彈窗的顯示和隱藏。