飘窗广告需html+css+javascript协同实现，缺一不可：html提供结构，css控制定位与样式（如position:fixed、z-index），js处理交互行为（如关闭、定时显示）。
飘窗广告不是靠“学会HTML”就能做出来的，它本质是 HTML + CSS + JavaScript 的协同效果，纯 HTML 标签（比如 <div>）本身不会动、不会弹、不会遮挡——你直接写个 <code><div>广告内容</div>，它就老老实实躺在页面里，跟段落一样安静。
为什么只写HTML永远出不来飘窗效果
HTML 负责结构，CSS 负责样式和定位，JavaScript 负责行为（比如页面滚动时保持悬浮、点击关闭、定时出现）。缺一不可。常见错误是：复制了一段带 <div class="popup"> 的代码，但没引入对应 CSS 或 JS，结果广告根本不动、不显示、或者盖不住其他内容。
<ul>
<li>
<code>position: fixed 或 position: absolute 必须由 CSS 设置，否则无法脱离文档流“飘”起来
onclick 或事件监听器，纯 HTML 的 <button></button> 点了也没反应display: none 控制显隐，没 JS 就没法在合适时机切回来最简可用的三件套代码怎么配
下面这段是能跑通的最小闭环，复制粘贴到一个 .html 文件里直接双击打开就能看到右下角飘窗（含关闭按钮）：
<style>
#ad-popup {
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 2px 10px rgba(0,0,0,.1);
z-index: 9999;
}
#ad-popup.closed {
display: none;
}
</style><div id="ad-popup">
这是飘窗广告
<button onclick="this.parentElement.classList.add('closed')">×</button>
</div>
注意几个关键点：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
z-index: 9999很重要，否则可能被轮播图、导航栏盖住 -
position: fixed让它随滚动始终固定在视口右下角；换成absolute就会随页面滚动消失 - 关闭逻辑用的是
classList.add('closed')，依赖 CSS 中的.closed { display: none }，比直接操作style.display = 'none'更干净
移动端适配和自动关闭容易漏掉什么
PC 上好好的飘窗，放到手机上常出现：遮住关键按钮、宽度超出屏幕、关不掉。这不是代码写错了，而是默认没考虑响应式：
- 加一句
@media (max-width: 768px) { #ad-popup { width: 90%; right: 5px; bottom: 5px; } }防止超宽 - 避免用
onclick写在 HTML 里——iOS Safari 对内联事件处理偶尔有延迟，改用document.getElementById('ad-popup').querySelector('button').addEventListener('click', ...) - 如果希望 5 秒后自动淡出，不能只靠
setTimeout加display: none，得配合 CSS 过渡：transition: opacity .3s; opacity: 0;，否则会“啪”一下消失，体验生硬
真正卡住人的从来不是某一行代码，而是没意识到飘窗是个“行为组件”——它要响应滚动、点击、视口变化、加载时机。哪怕只是加个“首页加载 3 秒后弹出”，就得判断 document.readyState === 'complete'，而不是等 DOMContentLoaded 就开弹。
