网页右侧悬浮显示二维码

最新推荐文章于 2024-08-10 03:24:28 发布

陈大步

最新推荐文章于 2024-08-10 03:24:28 发布

阅读量2.7k

点赞数 2

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/dadada_youzi/article/details/102396743

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<style>

.sidebar {
        z-index: 100000;
        right: 0;
        position: absolute;
        top: 28%;
        padding: 0 12px 0 0;
        border-radius: 20px 0 0 20px;
    }
    .sidebar > div {
        cursor: pointer;
        text-align: center;
    }
    .sidebar > div .code {
        display: none;
        position: absolute;
        z-index: 9;
        top: 0.1%;
        right: 75px;
        border-radius: 8px;
        box-shadow: 0 6px 12px 0 rgba(106, 115, 133, 0.22);
        background-color: #ffffff;
    }
    .sidebar > div .code:after {
        position: absolute;
        top: 33%;
        left: 100%;
        content: '';
        transform: translateY(-50%);
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent transparent #ffffff;
    }
    .sidebar-wechat:hover .code {
        display: block;
    }
</style>



<aside class="sidebar">
    <div class="sidebar-wechat">


        <img src="${path}/static/images/suspension.png"
             onmouseover="this.src='${path}/static/images/suspensionClick.png'"
             onmouseout="this.src='${path}/static/images/suspension.png'"/>

        <div class="code" style="background-color: #ffffff;width: 360px;height: 200px;">
            <div style="float:left;padding: 25px 11px 20px 28px;">
                <img style="width:140px;" src="${path}/static/images/AndroidFormal.png">
                <p>下载安卓APP</p>
            </div>
            <div style="float:left;padding: 25px 20px 18px 11px;">
                <img style="width:140px;" src="${path}/static/images/iosFormal.png">
                <p>下载苹果APP</p>
            </div>
        </div>


    </div>
</aside>