制作Web页面广告

编程基础 • 2024-12-30 23:40 • 阅读 12

要求

制作简单页面，作为广告载体。页面高度至少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>

运行效果：

今天的文章制作Web页面广告分享到此就结束了，感谢您的阅读。

制作Web页面广告

要求

相关推荐