CSS代碼網頁彈窗廣告是互聯網上常見的一種廣告形式,它可以在用戶打開網站時以彈窗的方式呈現在頁面上。下面我們一起來看一下實現這一效果的CSS代碼。
/* 首先定義一個彈出框的div元素 */ #popup { position: fixed; /* 設置為固定定位,不會隨著頁面滾動而改變位置 */ top: 50%; /* 使彈出框垂直居中 */ left: 50%; /* 使彈出框水平居中 */ transform: translate(-50%, -50%); /* 通過偏移值將彈出框完全居中 */ background-color: #FFF; /* 設置背景顏色為白色 */ padding: 20px; /* 設定內邊距 */ box-shadow: 0px 0px 10px rgba(0,0,0,0.4); /* 為彈出框添加陰影效果 */ z-index: 999; /* 將彈出框設置為最高層級 */ } /* 定義關閉按鈕樣式 */ .close { position: absolute; /* 絕對定位 */ top: 10px; right: 10px; font-size: 20px; color: #000; cursor: pointer; /* 將鼠標光標設為手型 */ } /* 點擊關閉按鈕,隱藏彈出框 */ .close:hover { color: #F00; /* 鼠標懸停時改變按鈕顏色 */ } /* 彈出框的背景遮罩層 */ #mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); /* 背景顏色設為半透明黑色 */ z-index: 998; /* 將遮罩層設為彈出框下一層 */ }
以上代碼定義了一個固定定位的彈出框元素和一個背景遮罩層元素,同時增加了一個關閉按鈕,使用戶能夠手動關閉彈出框,避免影響用戶體驗。
上一篇php i 例題
下一篇python畫王思聰