首页html广告悬浮窗口代码

html广告悬浮窗口代码

时间: 2023-06-30 11:11:30 浏览: 142

以下是一个基本的HTML广告悬浮窗口代码： ``` <!DOCTYPE html> <html> <head> <title>悬浮广告窗口</title> <style> .container { position: fixed; bottom: 0; left: 0; width: 100%; height: 100px; background-color: #ccc; transition: bottom 0.5s ease-in-out; } .container:hover { bottom: 50px; } .ad { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 300px; height: 50px; background-color: #f00; color: #fff; line-height: 50px; text-align: center; } </style> </head> <body> <div class="container"> <div class="ad"> 这里是广告内容 </div> </div> </body> </html> ``` 这个代码创建了一个悬浮在页面底部的广告窗口。当用户将鼠标悬停在窗口上方时，窗口会上移一定距离，显示广告内容。你可以将广告内容替换为你自己的内容。需要注意的是，悬浮窗口可能会对用户体验造成不便，因此需要谨慎使用。

阅读全文