影子江湖分享的打賞贊助文件提取二段代碼怎么實現效果，代碼高手指點下

TaC

這二天把使用教程中影子江湖分享的打賞贊助文件的首頁文件，提取二段代碼可怎么也實現不了效果，請代碼高手指點下。

第一段，我是直接放在會員邊欄會員圖像那個位置：
<div class="jitheme_slide_d_m">
                            <div class="mini-stats-desc b2-radius">
                                       <li> <a href="#" class="jitheme-dt"><img src="images/xinxi.svg" width: "58" height: "45" />
                                                    <p>
                                                        點評
                                                    </p>
                                                </a>
                                            </li><li><a href="#" class="jitheme-dt"><img src="images/gonggao.svg" width: "58" height: "45" />
                                                    <p>
                                                        打賞
                                                    </p>
                                                </a>
                                            </li><li><a href="#" class="jitheme-dt"><img src="images/huiyuan.svg" width: "58" height: "45" />
                                                    <p>
                                                        簽到
                                                    </p>
                                                </a></li>
                                            </div>
                        </div>
對應添加到CSS文件的代碼：

.mini-stats-desc.b2-radius li:not(article):hover{opacity: 1;z-index: 99;border-radius: 20px;transform: translateY(-5px);box-shadow: 0 3px 10px rgba(0, 0, 0, .25);animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards;}@keyframes index-link-active {0%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(0);}16%{transform: perspective(2000px) rotateX(10deg) rotateY(5deg) translateZ(32px);}100%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(65px);}}
.wzw-programme-content .wzw-money-wrap{display:flex;flex-direction:row;flex-wrap:wrap}
.jitheme_slide_d_m {
margin-left: 15px!important;
margin-right: 15px!important;
}
.jitheme_slide_d {
    padding-left: 20px;
    flex: 0 0 100%;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
.jitheme-dt:hover {
transform: translateY(-3px);
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px);
}


實現的效果圖片：


求教的問題：
1，代碼中有一個li，CSS文件翻譯過來是：不是標題，透明度啥的。從代碼或CSS里去掉這個li，陰影效果，動態效果就沒有了。
2，圖片無法設置大小，圖片后面添加的高寬度無效。怎么設置？

我知道答案 回答被采納將會獲得1 貢獻 已有20人回答

TaC

第二段，同樣也是添加在會員邊欄：

<div class="wzw-donate-programme mb20 main-bg main-shadow radius8">
                    <div class="wzw-programme-title">
                        <section data-id="124069" class="wzweditor style_1" powered-by="902d.com" draggable="true" data-md5="023bb"><section style="text-align: center;" powered-by="902d.com" data-md5="023bb" class="style_2"><section style="display: inline-block;vertical-align:middle;" powered-by="902d.com" data-md5="023bb" class="style_3"><section style="display: flex;align-items: center;justify-content: space-between;" powered-by="902d.com" data-md5="023bb" class="style_4"><section style="width: 7px;height: 7px;border:1px solid #ffcd59;border-radius: 50%;box-sizing: border-box;transform: translate(52px,5px);" powered-by="902d.com" data-md5="023bb" class="style_5"></section><section style="width:21px;margin: 0 -9px 8px auto;line-height:2px;" powered-by="902d.com" data-md5="023bb" class="style_6"><img src="images/zu3.webp" style="vertical-align:middle;width:100%;" class="small_image style_7" _src="images/zu3.png" data-isstyleimage="1" draggable="false" data-md5="023bb"></section></section><section style="display: flex;align-items: center;justify-content: center;" powered-by="902d.com" data-md5="023bb" class="style_8"><section style="width: 28px;height: 28px;background-color: #85d6ac;border-radius: 4px;margin:0 8px;transform-origin: right bottom;transform: rotate(16deg);" powered-by="902d.com" class="wzw-banone style_9" data-md5="023bb"><section class="wxqq-Color style_10" style="color: #fff;letter-spacing: 1px;line-height: 28px;text-align:center;font-size: 16px;font-weight: bold;" powered-by="902d.com" data-md5="023bb"><p class="wzwbrush style_11" style="padding: 0px;margin: 0px;" data-md5="023bb">贊</p></section></section><section style="width: 28px;height: 28px;background-color: #ff8566;border-radius: 4px;margin:0 8px;transform-origin: left bottom;transform: rotate(-16deg);" powered-by="902d.com" class="wzw-banone style_12" data-md5="023bb"><section class="wxqq-Color style_13" style="color: #fff;letter-spacing: 1px;line-height: 28px;text-align:center;font-size: 16px;font-weight: bold;" powered-by="902d.com" data-md5="023bb"><p class="wzwbrush style_14" style="padding: 0px;margin: 0px;" data-md5="023bb">助</p></section></section><section style="width: 28px;height: 28px;background-color: #ffcd59;border-radius: 4px;transform-origin: right top;transform: rotate(16deg);" powered-by="902d.com" class="wzw-banone style_15" data-md5="023bb"><section class="wxqq-Color style_16" style="color: #fff;letter-spacing: 1px;line-height: 28px;text-align:center;font-size: 16px;font-weight: bold;" powered-by="902d.com" data-md5="023bb"><p class="wzwbrush style_17" style="padding: 0px;margin: 0px;" data-md5="023bb">一</p></section></section><section style="width: 28px;height: 28px;background-color: #7fceff;border-radius: 4px;margin:0 2px;transform-origin: left top;transform: rotate(-16deg);" powered-by="902d.com" class="wzw-banone style_18" data-md5="023bb"><section class="wxqq-Color style_19" style="color: #fff;letter-spacing: 1px;line-height: 28px;text-align:center;font-size: 16px;font-weight: bold;" powered-by="902d.com" data-md5="023bb"><p class="wzwbrush style_20" style="padding: 0px;margin: 0px;" data-md5="023bb">個</p></section></section></section><section style="display: flex;align-items: center;justify-content: space-between;margin-top: -7px;" powered-by="902d.com" data-md5="023bb" class="style_21"><section style="width: 7px;height: 7px;border:1px solid #ffab4c;border-radius: 50%;box-sizing: border-box;transform: translate(7px,-11px);" powered-by="902d.com" data-md5="023bb" class="style_22"></section><section style="width: 7px;height: 7px;border:1px solid #85d6ac;border-radius: 50%;box-sizing: border-box;transform: translate(-27px,5px);" powered-by="902d.com" data-md5="023bb" class="style_23"></section></section></section></section></section>
                    </div>
                    <div class="wzw-programme-content">
                        <ul class="wzw-money-wrap">
                            <li data-pay="10" class="wzwco wzw-money-item main-shadow radius8">
                                <span class="wzw-money-label">￥1</span>
                                <img class="wzw-money-icon" src="images/1.svg" alt="贊助一個雞腿錢" draggable="false">
                                <b class="wzw-money-name">一個雞腿</b>
                            </li>
                           
                            <li data-pay="zdy" class="wzwco wzw-money-item main-shadow radius8">
                                <span class="wzw-money-label">自定義</span>
                                <img class="wzw-money-icon" src="images/6.webp" alt="愛心紅包" draggable="false">
                                <b class="wzw-money-name dsjb">愛心紅包</b>
                            </li>
                        </ul>
                    </div>      
                </div>

這個代碼真與DZ不一樣，一點也看不懂。不過實現的 效果倒是可以。
對應的CSS代碼：

.wzw-programme-content .wzw-money-wrap{display:flex;flex-direction:row;flex-wrap:wrap}
.wzw-programme-content .wzw-money-item{position:relative;width:50px;height:100px;margin:5px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;border:1px solid transparent;overflow:hidden;-webkit-transition:transform .5s;transition:transform .5s;box-shadow:8px 8px 20px 0 rgb(55 99 170 / 10%), -8px -8px 20px 0 #fff;}
.wzw-programme-content .wzw-money-item:hover{border-color:#ed6d83;-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-transition:transform .5s;transition:transform .5s}
.wzw-donate-programme .wzw-money-label{width:50px;height:20px;line-height:20px;background: #fe85ca;;border-radius:0 5px 0 10px;font-weight:80;color:var(--main-bg-color);font-size:12px;text-align:center;position:absolute;top:-2px;right:-2px}
.wzw-donate-programme .wzw-money-icon{width:40px;height:40px}
.wzw-donate-programme .wzw-money-name{font-size:12px}
.wzw-programme-content .wzw-money-item{width:calc(100% / 2 - 20px)}
}
.wzw-programme-content .wzw-money-item{width:calc(100% / 3 - 20px)}
.wzw-donate-modal-title{margin:1rem;border-bottom:.25rem dashed var(--main-border-color)}
.wzw-donate-modal-title b{font-size:2rem}


效果圖片：


求教問題：
彈窗不出來，影子江湖文件中，有個彈窗代碼，如果放上去了，直接在邊欄顯示。
彈窗代碼：

<div class="wp-block-zibllblock-modal wzwi-donate-modal">
                    <div class="modal fade" id="wzw_donate-modal" aria-hidden="true" data-bkg1="false" aria-bkg2="false" role="dialog" tabindex="-1">
                        <div class="modal-dialog modal-mini" data-kd="modal-mini">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <strong class="modal-title">掃碼贊助</strong>
                                    <button class="close" data-dismiss="modal"><div data-class="ic-close" data-svg="close" data-viewbox="0 0 1024 1024"></div></button>
                                </div>
                                <div class="wzw-modal-body modal-body">
                                    <div class="wzw-donate-modal-zfm modal-body">
                                        <div class="wzw-donate-modal-title dsjb">
                                            <b>贊助發電?支持</b>
                                            <p class="wzwi_pay-title">加載中...</p>
                                        </div>
                                         <img class="wzw-money-icon" src="img/vx2.png" alt="贊助" draggable="false">
                                            <img src="" draggable="false">
                                                                                        <div class="wzw-donate-modal-ewm">
                                        </div>
                                        <p>長按保存支付二維碼</p>
                                        <div class="wzw-donate-modal-btn">
                                            <div class="wzw-donate-btns">
                                                <button data-type="wx" class="btn wzw-zf-btn wzw-active">微信支付</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                    var pay_money='zdy',pay_type = "wx";
                    function actv_zf_func(pay_ty){
                        $(".wzw-zf-btn").each(function() {
                            $(this).attr("data-type") === pay_ty ? $(this).addClass('wzw-active') : $(this).removeClass('wzw-active');
                        });
                        $(".wzw-donate-modal-ewm>img").attr("src","https://#/pay/"+ pay_ty +"/"+ pay_money +".png");
                    }
                    $(".wzw-programme-content").on("click", ".wzw-money-item", function() {
                        pay_money = $(this).attr("data-pay");
                        pay_type = "wx";
                        var pay_title = $(this).find('.wzw-money-name').text();
                        var pay_text = pay_money === 'zdy' ? '請掃碼自定義金額' : "￥ " + pay_money;
                        $(".wzw-donate-modal-title>.wzwi_pay-title").html(pay_title+"（"+pay_text+"）");
                        actv_zf_func(pay_type);
                        $('#wzw_donate-modal').modal('show');
                    });
                    $(".wzwi-donate-modal").on("click", ".wzw-zf-btn", function() {
                        pay_type = $(this).attr("data-type");
                        actv_zf_func(pay_type);
                    });
                </script>

抓這二段， 搞了一整天。最終效果還是不理想。
如果影子江湖看到了，請指點一二。代碼高手看到了，也請解惑。

TaC

代碼中有一個li，程序默認上是一個小圓點，在DZ上。就像標題前面帶一個點一樣，圖片里帶這個點，非常不好看。
在會員下面的代碼和CSS代碼，把li修改成一個 i，問題解決。
另外，CSS代碼中，圖片一直設置大小無效，可能這些代碼跟DZ的表達方式不一樣。
試了一通宵，在CSS代碼中加上：
.jitheme_slide_d_m .mini-stats-desc a img {
display:block;
width:58px;  <!-- 這二排高寬設置大小好似無效，但有它，圖片就變小許多 -->
height:45px;
margin:0 auto 5px
}
.jitheme_slide_d_m .mini-stats-desc {
display:inline-block;
position:relative;
bottom:22px;
height:100%;
-webkit-box-shadow:0 0 1.25rem rgba(108,118,134,0.1);
box-shadow:0 0 1.25rem rgba(108,118,134,0.1);
background-color:var(--body-bg-color) !important;
padding: 10px!important;
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
border-radius: var(--main-radius);
}
一樓CSS代碼中，下面二段，好似可要可不要的。

TaC

昨晚整到4點，出來的目測效果還不錯，分享下。
目前就點擊的鏈接還在找，誰知道的，指點一下：點評，打賞，簽到，這三個鏈接放置什么網址代碼。
另外，贊助這二個圖片，彈窗效果怎么實現。

TaC

TaC 發表于 2024-4-1 22:25
第二段，同樣也是添加在會員邊欄：

這第二段代碼注意一下，“贊助一下”四個字是放在一堆代碼里面，這一堆代碼里有十個902d.com，記得修改。我是看不出來啥用，修改成你自己的網址即可。

TaC

接著索性分享下影子江湖這個文件的網站關于鼠標顯示的CSS代碼，下面代碼放在頭部文件</head>上面即可：

<link rel="stylesheet" id="wzwaco-css" href="改成你自己的路徑/CSS/wzwaco.css" type="text/css" media="all">

下面附件，就按上面代碼路徑放置，即可。要解壓。
wzwaco.zip (9.23 KB, 下載次數: 146)

2024-4-2 08:27 上傳

點擊文件名下載附件

CSS里，有些樣式代碼我不知道怎么使用，所以，我精減了很多。目測，文件放置后立馬產生效果：
1，標題或標簽彩色漸變。原來我標題本就有漸變，也不知道哪個影響的。
2，鼠標多了二種顯示，顯示小手，箭頭透明效果。
大家試試，文件里的背景代碼我是刪了的，因為站上是透明底色。其它的怎么使用我還在折磨著。如果有人使用分享下方法。

海哥

這個需要專業人士，樓下大佬來

jane520

想法不錯，贊一個

TaC

海哥 發表于 2024-4-2 13:47
這個需要專業人士，樓下大佬來

近時間，我發現，如果不是我們這些小白成天在這里叫著，估計論壇沒人氣了。
我觀察到每天的求助，回復數在五十左右。可惜啊。

TaC

jane520 發表于 2024-4-2 16:35
想法不錯，贊一個

不是想法，是看到這個分享的文件確實有些東西還可以，是默認程序沒有的。
整理下來，會給網站添加點不同的東西罷了。