css怎么弹出小广告 |css noprint

大家可以使用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函数，显示和隐藏小广告。