要求
制作简单页面，作为广告载体。页面高度至少3屏，以保证能展示用户上下移动滚动条时的广告效果。
制作对联广告 (1)要求 ①页面加载完成即出现左右对联广告： ②广告固定于页面上方； ③广告能够关闭. (2)思路 ①使用BOM获取浏览器信息； ②使用DOM控制广告元素的内容和行为： ③封装代码，让广告的各种参数更灵活。
制作右下角弹窗广告 (1)要求 ①弹窗广告出现于页面右下方； ②弹窗广告具有缓慢出现的动画效果； ③广告能够关闭. (2)思路 ①使用DOM控制广告元素的显示与隐藏； ②使用定时器相关知识实现动画效果。
创建4个盒子，作为广告和内容部分：
关闭
年轻人涌入道观：打太极、拜神，安顿身心
这里是文章内容
这里是文章内容
这里是文章内容
这里是文章内容
关闭
关闭
设置样式，将广告放置到对应位置：
*{
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来进行弹窗广告的动画，以及广告的删除：
运行效果：