CSS怎么彈出小廣告？

我們可以使用CSS實現一個小廣告的彈出效果。在HTML中添加一段小廣告的代碼：

<div id="popup">
<h2>This is a small popup ad</h2>
<a href="#" class="close">Close</a>
</div>

然后在CSS中添加以下代碼：

#popup {
position: fixed;
top: 0;
left: 0;
display: none;
background-color: #f9f9f9;
padding: 20px;
border: 1px solid #e5e5e5;
width: 300px;
height: 150px;
}
#popup h2 {
font-size: 20px;
margin-top: 0;
}
#popup .close {
position: absolute;
top: 10px;
right: 10px;
}

我們定義了一個名為“popup”的DIV元素，它被設為絕對定位，靠左上角放置，并設置寬度和高度。我們還定義了一個Class為“close”的鏈接，以用于關閉彈出廣告。注意，我們最初將popup元素設為display:none，這意味著它將被隱藏。

現在我們想要彈出小廣告，可以使用JavaScript。在頁面中添加以下JS代碼：

document.getElementById("popup").style.display = "block";

這將使我們先前隱藏的彈出廣告顯示出來。

我們還需要添加一個事件偵聽器，以便點擊“Close”鏈接時關閉廣告。在頁面底部添加以下JavaScript代碼：

document.querySelector("#popup .close").addEventListener("click", function() {
document.getElementById("popup").style.display = "none";
});

這將對單擊Close鏈接進行偵聽，并在單擊時將popup元素隱藏。

現在，我們可以通過觸發JavaScript函數，顯示和隱藏小廣告。