CSS彈窗廣告是一種常見的網(wǎng)頁設(shè)計特效,它能夠吸引用戶的注意力,提高廣告的點(diǎn)擊率。以下是一段基于CSS實(shí)現(xiàn)的彈窗圖片廣告代碼:
/* 彈窗背景樣式 */ .popup-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ display: flex; justify-content: center; align-items: center; } /* 彈窗內(nèi)容樣式 */ .popup-content { background-color: white; width: 400px; height: 300px; padding: 20px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* 彈窗圖片樣式 */ .popup-image { width: 200px; height: 200px; margin-bottom: 20px; } /* 關(guān)閉按鈕樣式 */ .popup-close { position: absolute; top: 10px; right: 10px; font-size: 24px; font-weight: bold; color: gray; cursor: pointer; } /* HTML代碼 */ <div class="popup-bg"> <div class="popup-content"> <img src="popup-image.png" alt="彈窗圖片" class="popup-image"> <p>這是一個彈窗廣告</p> <span class="popup-close">x</span> </div> </div> /* JavaScript代碼 */ document.querySelector('.popup-close').addEventListener('click', function() { document.querySelector('.popup-bg').style.display = 'none'; });
以上代碼中,.popup-bg和.popup-content分別表示彈窗的背景和內(nèi)容。.popup-image用于設(shè)置廣告圖片的樣式,.popup-close是關(guān)閉按鈕的樣式,可以通過JavaScript實(shí)現(xiàn)點(diǎn)擊關(guān)閉按鈕后彈窗消失的功能。