要求
制作简单页面，作为广告载体。页面高度至少3屏，以保证能展示用户上下移动滚动条时的广告效果。
制作对联广告
(1)要求
①页面加载完成即出现左右对联广告：
②广告固定于页面上方；
③广告能够关闭.
(2)思路
①使用BOM获取浏览器信息；
②使用DOM控制广告元素的内容和行为：
③封装代码，让广告的各种参数更灵活。
制作右下角弹窗广告
(1)要求
①弹窗广告出现于页面右下方；
②弹窗广告具有缓慢出现的动画效果；
③广告能够关闭.
(2)思路
①使用DOM控制广告元素的显示与隐藏；
②使用定时器相关知识实现动画效果。
创建4个盒子，作为广告和内容部分：
<body>
<!-- 广告1 -->
<div class="ad-container" id="ad1">
<!-- 关闭按钮 -->
<span class="close-btn" onclick="closeAd('ad1')">关闭</span>
<!-- 广告图片 -->
<img src="./img/ad1.png" width="150px">
</div>
<!-- 正文内容 -->
<div class="top">
<h2>年轻人涌入道观：打太极、拜神，安顿身心</h2>
<p>这里是文章内容</p>
<img src="./img/taiji.png" width="500px">
<p>这里是文章内容</p>
<img src="./img/baishen.png" width="500px">
<p>这里是文章内容</p>
<p>这里是文章内容</p>
</div>
<!-- 广告2 -->
<div class="ad-container" id="ad2">
<span class="close-btn" onclick="closeAd('ad2')">关闭</span>
<img src="./img/ad2.png" width="150px">
</div>
<!-- 广告3：弹出广告 -->
<div class="ad-container" id="ad3">
<span class="close-btn" onclick="closeAd('ad3')">关闭</span>
<img src="./img/ad3.png" width="300px">
</div>
</body>设置样式，将广告放置到对应位置：
*{
margin: auto;
padding:0px;
}
.top{
margin: auto;
padding:0px;
width:800px;/* 盒子宽度 */
height: 1800px;/* 盒子高度 */
border: solid 3px #8b8b8b;/* 设置边框 */
background-color: #cecece;/* 背景颜色 */
}
h2{
font-size:30px;
font-weight: 500;
text-align: center;
color: #333;
}
#ad1{
position: fixed;/* 设置位置 */
top: 10px;/* 顶部间距 */
left: 0;/* 靠左 */
z-index: 1000;
}
#ad2{
position: fixed;
top: 10px;
right: 0;/* 靠右 */
z-index: 1000;
}
#ad3 {
position: fixed;
bottom: -300px; /* 广告3初始位置设置在屏幕外 */
right: 0;
z-index: 1000;
}
.ad-container {
position: relative;
transition: bottom 0.5s ease; /* 添加过渡效果 */
}
.close-btn {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
color: #cb2d01;
font-weight: 1000;
}写js来进行弹窗广告的动画，以及广告的删除：
<script>
// 延迟显示广告3
setTimeout(function() {
let ad3 = document.getElementById('ad3');
ad3.style.bottom = "10px"; // 广告3显示在屏幕底部
}, 3000); // 3秒后显示广告3
function closeAd(adId) {
let ad = document.getElementById(adId);
ad.style.display = "none"; // 隐藏广告
}
</script>运行效果：
