去评论
dz插件网

分享一个之前写的好东西 （打赏、分享、手机看、收藏、反馈）

婷姐
2024/04/17 20:24:51
鎸哄ソ鐢ㄧ殑涓涓姛鑳斤紝鍔犲埌缃戠珯鏂囩珷搴曢儴锛屾椂涓嶆椂杩樻湁浜烘墦璧忋

鏁堟灉鎴浘


婕旂ず鍦板潃锛堟枃绔犲簳閮級 https://www.sharedbk.com/post/272.html
鍙湪PC绔樉绀

CSS
  1. <style>        @media screen and (max-width: 1198px){                .footer-tool{                        display: none!important;                }        }        .footer-tool{                width: 100%;                height: 48px;                background: #f3f7fb;                border: 1px solid #d6e6f5;                display: flex;                justify-content: center;                align-items: center;                margin: 5px 0;        }        .tool-list{                position: relative;                width: 20%;                height: 36px;        }        .tool-list a{                color: #555666;                font-size: 16px;                line-height: 36px;                text-decoration: none;                padding: 0 12px;                box-sizing: border-box;                border-radius: 4px;                display: block;                text-align: center;        }        .tool-list a:hover{                background: rgba(39,124,204,0.1);        }        .tool-list:hover .tool-prompt{                display: block;        }        .tool-prompt{                display: none;                width: 180px;                background: #fff;                border-radius: 10px;                box-shadow: 0 0 5px rgba(0,0,0,.4);                padding: 5px 10px;                box-sizing: border-box;                text-align: center;                position: absolute;                bottom: 36px;                left: 50%;                margin-left: -90px;        }        .tool-prompt img{                max-width: 100%;                max-height: 160px;        }        .tool-prompt p{                color: #555666;                font-size: 16px;        }</style>

HTML
  1. <div class="footer-tool">        <div class="tool-list">                <a href="javascript:;">馃グ鍒嗕韩</a>                <div class="tool-prompt">                        <p>鍒嗕韩娴锋姤</p>                        <img class="ewmurl" src="" alt="">                        <p>鎵竴鎵 - 鍒嗕韩鏈枃</p>                </div>        </div>        <div class="tool-list">                <a href="javascript:;">馃槏鎵撹祻</a>                <div class="tool-prompt">                        <p>寰俊</p>                                                <p>鎵竴鎵 - 鎵撹祻楣忎粩</p>                </div>        </div>        <div class="tool-list">                <a href="javascript:;">馃ぉ鏀惰棌</a>                <div class="tool-prompt">                        <p>璇锋寜涓  Ctrl + D</p>                        <p>鍗冲彲鏀惰棌褰撳墠鏂囩珷</p>                </div>        </div>        <div class="tool-list">                <a href="javascript:;">馃ズ鎵嬫満鐪</a>                <div class="tool-prompt">                        <p>鍒嗕韩鍒板井淇℃湅鍙嬪湀</p>                        <img class="ewmurl" src="" alt="">                        <p>鎵竴鎵 - 鎵嬫満闃呰</p>                </div>        </div>        <div class="tool-list">                <a  target="_blank">馃檮渚垫潈鎶曡瘔</a>                <div class="tool-prompt">                        <p>渚垫潈銆佷妇鎶ャ佸缓璁</p>                        <p>鈫</p>                </div>        </div></div>
JS
  1. <script>        // 鑾峰彇褰撳墠 url 鍦板潃        var siteurl = window.location.href;        // 閫氳繃姝ｅ垯灏唘rl鐨 & 鏇挎崲涓 %26        var siteurlres = siteurl.replace(/&/g,"%26");        // 鑾峰彇鍥剧墖id        var ewmurl = document.getElementsByClassName("ewmurl");        // 鐢熸垚浜岀淮鐮佸浘鐗囪矾寰        ewmurl[0].src = ewmurl[1].src = 'https://www.sharedbk.com/api/qr/qr.php?content=' + siteurlres;</script>
进入原文参与互动