css漂浮窗

CSS漂浮窗是指在网页上可随意移动、停靠的窗口。在Web开发中，CSS漂浮窗常被用于网站的公告、广告、客服等方面。
要创建CSS漂浮窗，需要使用一些基本的HTML和CSS代码，下面我们来详细了解一下：

<div class="floatBox">
<div class="content">漂浮窗内容</div>
<a href="#" class="closeBtn">×</a>
</div>

以上是HTML代码，其中

部分即为要漂浮的窗口内容，通过CSS样式控制窗口的位置及移动方式。下面是CSS代码：

.floatBox {
position: absolute;
top: 150px;
left: 200px;
width: 300px;
height: 200px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px #999;
z-index: 999;
cursor: move;
}
.floatBox .content {
padding: 20px;
}
.floatBox .closeBtn {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: #999;
}
.floatBox .closeBtn:hover {
color: #666;
}

其中，.floatBox代表窗口整体，.content为窗口内部内容，.closeBtn为关闭按钮。
通过控制floatBox的position、top、left以及cursor属性，可以使窗口随意移动，而border-radius、box-shadow等属性可以给窗口设置一些美观的效果。

此外，我们还可以通过JavaScript来控制漂浮窗的动作，如打开、关闭、自动消失等。以下是一个简单的JavaScript代码实现：

var floatBox = document.querySelector('.floatBox');
var closeBtn = document.querySelector('.closeBtn');
closeBtn.addEventListener('click', function() {
floatBox.style.display = 'none';
});
setTimeout(function() {
floatBox.style.display = 'none';
}, 5000);

通过querySelector选取漂浮窗和关闭按钮元素，然后使用addEventListener监听关闭按钮事件，自动消失则通过setTimeout实现。

通过上述代码实现，即可轻松创建自己的CSS漂浮窗，丰富网站内容和交互效果。

查看更多关于css漂浮窗的详细内容...