html广告悬浮窗口代码
时间: 2023-11-14 10:30:59 浏览: 125
以下是一个简单的HTML广告悬浮窗口代码:
```html
<div class="ad-container">
<div class="ad-close">X</div>
<a href="http://example.com"><img src="ad-image.jpg" alt="Advertisement"></a>
</div>
<style>
.ad-container {
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
height: 250px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.ad-close {
position: absolute;
top: 5px;
right: 5px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.ad-container img {
display: block;
width: 100%;
height: 100%;
}
</style>
<script>
document.querySelector('.ad-close').addEventListener('click', function() {
document.querySelector('.ad-container').style.display = 'none';
});
</script>
```
此代码使用CSS将广告容器定位在页面右下角,并使用JavaScript添加了一个“关闭”按钮,当用户单击它时,广告容器将被隐藏。注意,此代码只是一个简单的示例,实际使用时需要根据需要进行修改和调整。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![application/msword](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)