html广告悬浮窗口代码
时间: 2023-06-30 17:11:30 浏览: 140
JavaScript 悬浮窗口实现代码
以下是一个基本的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>
```
这个代码创建了一个悬浮在页面底部的广告窗口。当用户将鼠标悬停在窗口上方时,窗口会上移一定距离,显示广告内容。你可以将广告内容替换为你自己的内容。需要注意的是,悬浮窗口可能会对用户体验造成不便,因此需要谨慎使用。
阅读全文