小米商城html悬浮窗

### 创建悬浮窗口特效

为了实现在小米商城网站中使用的HTML和CSS创建悬浮窗口特效，可以通过定义特定的HTML结构并应用相应的CSS样式来完成。下面是一个简单的例子。

#### HTML 结构
首先构建基本的HTML框架，在页面上放置一个浮动层作为悬浮窗体：

<div class="floating-window">
    <div class="content">这里是悬浮的内容</div>
    <a href="#" class="close-btn">×</a>
</div>

此部分代码设置了悬浮窗口的基础布局[^1]。

#### CSS 样式设置
接着通过CSS控制该悬浮窗口的位置、外观以及交互行为：

.floating-window {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    z-index: 9999;
}

.content {
    padding: 15px;
    text-align: center;
}

.close-btn {
    display: block;
    margin-top: 10px;
    color: red;
    text-decoration: none;
    text-align: center;
}

上述CSS规则使得`.floating-window`类能够固定于浏览器视口右下角，并给予其一定的视觉风格；同时提供了关闭按钮链接用于隐藏或移除悬浮窗。

对于更复杂的场景，比如希望悬浮窗仅当滚动到一定距离时才出现，则需引入JavaScript逻辑处理事件监听与DOM操作。不过基于当前需求描述，以上方法已经足够展示基础功能[^2]。