根据所给素材完成页面,页面加载时打开广告页面,效果如图所示,2秒之后广告窗口自动关闭
时间: 2024-06-01 11:03:46 浏览: 10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>广告页面</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
#ad {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
width: 400px;
height: 300px;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
text-align: center;
padding: 20px;
display: none;
}
#ad img {
max-width: 100%;
max-height: 100%;
margin-bottom: 20px;
}
#close {
position: absolute;
top: 20px;
right: 20px;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="ad">
<img src="https://picsum.photos/400/300" alt="广告图片">
<h1>欢迎来到我们的网站</h1>
<p>点击下面的按钮关闭广告窗口</p>
<button id="close">关闭</button>
</div>
<script type="text/javascript">
window.onload = function() {
var ad = document.getElementById('ad');
ad.style.display = 'block';
setTimeout(function() {
ad.style.display = 'none';
}, 2000);
var close = document.getElementById('close');
close.onclick = function() {
ad.style.display = 'none';
}
}
</script>
</body>
</html>
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)