CSS 实现右下角二维码窗口页面 | 带关闭按钮

如何使用 CSS 实现右下角二维码窗口页面？

想要在网页中创建一个带有二维码图片和关闭按钮的右下角窗口，可以使用以下 CSS 代码实现：

<!DOCTYPE html>
<html>
<head>
<style>
    /* 定义右下角窗口容器 */
    .window {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 300px;
        height: 250px;
        background-color: #ffffff;
        border: 1px solid #aaaaaa;
        border-radius: 4px;
        box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    /* 定义二维码容器 */
    .qr-code-container {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    /* 定义二维码图片 */
    .qr-code {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 280px;
        height: 180px;
    }
    
    /* 定义关闭文字 */
    .close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="window">
        <div class="qr-code-container">
            <img class="qr-code" src="qr-code.png" alt="二维码">
            <div class="close">关闭</div>
        </div>
    </div>
</body>
</html>

代码解释：

• .window: 定义了窗口容器，使用 position: fixed 将其固定在页面右下角。
• .qr-code-container: 用于容纳二维码图片，设置宽高为 100% 以适应窗口大小。
• .qr-code: 定义二维码图片，使用 position: absolute 进行定位，设置图片尺寸。
• .close: 定义关闭文字，使用 position: absolute 定位在右上角，设置文字样式和鼠标指针样式。

注意：

• 需要将 qr-code.png 替换为你实际的二维码图片路径。
• 可根据需求调整窗口大小、位置、样式等。

通过以上代码和解释，你就可以轻松地创建一个带有二维码图片和关闭按钮的右下角窗口页面。