帮我写一个一直悬浮在页面右侧的广告
时间: 2023-08-28 09:13:17 浏览: 53
当然可以,请参考以下示例代码,这是一个悬浮在页面右侧的广告示例:
```
<!DOCTYPE html>
<html>
<head>
<title>悬浮广告窗口</title>
<style>
.container {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 200px;
height: 100px;
background-color: #ccc;
transition: right 0.5s ease-in-out;
}
.container:hover {
right: 50px;
}
.ad {
position: absolute;
top: 50%;
left: -50px;
transform: translate(-50%, -50%);
width: 50px;
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>
```
这个示例代码中,我们把广告容器的定位方式设置为 fixed,然后设置 top 和 right 属性来使其悬浮在页面的右侧。当鼠标悬停在容器上时,我们使用 CSS transition 属性来实现容器的平滑移动。广告内容容器的定位方式设置为 absolute,然后使用 transform 属性来使其垂直居中并水平偏移,实现悬浮效果。你可以根据需要调整容器的大小和位置,以及广告内容的样式和位置。