WordPress文章頁(yè)（終端頁(yè)）局部下載資源樣式源碼
[重要通告]如您遇疑難雜癥,本站支持知識(shí)付費(fèi)業(yè)務(wù),掃右邊二維碼加博主微信,可節(jié)省您寶貴時(shí)間哦!
說(shuō)起wordpress，大家對(duì)它有愛(ài)有恨的，愛(ài)是因?yàn)楦鞣N插件，使用方便，恨的是各種插件能把站點(diǎn)拖死，想做個(gè)文章頁(yè)內(nèi)的下載，都要使用插件，簡(jiǎn)直崩潰，Wordpress頁(yè)面下載文件的樣式太實(shí)屬太丑，那我們就自己設(shè)計(jì)一個(gè)或者扒一個(gè)，目前想在網(wǎng)站上添加如下下載資料文件樣式效果，剛開(kāi)始樣式有點(diǎn)問(wèn)題，后面經(jīng)過(guò)自己調(diào)整，終于符合想要的風(fēng)格。
樣式展示如下：
WordPress 完成代碼和樣式如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>Wordpress文章頁(yè)（終端頁(yè)）局部下載資源樣式源碼</title> <link rel="stylesheet" type="text/css" href="你的外部css" /> <!--可引用外部css--> <script type="text/javascript" src="你的外部庫(kù)" ></script> <!--可引用外部JS，以及jquery等庫(kù)--> <!-- 各種JS庫(kù)的引用地址：www.bootcdn.cn --> <script> /* 自寫(xiě)js */ </script> <style> .downLi{ overflow: hidden; width: 100%; margin-bottom: 30px; float: left; } .downLi dl { overflow: hidden; float: left; width:796px; margin-bottom: 30px; height: auto; padding: 6px 6pxpx 6px; margin-top: 12px; border: 1px solid #ffc99f; background: #fffcf9; border-radius: 4px; } .downLi dl { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; } .downLi li.phonepb { float: left; list-style: none; padding-left: 5px; height: 22px; line-height: 20px; color: #f60; font-weight: bold; font-size: 14px; width: 775px; overflow: hidden; } .downLi li.sne { overflow: hidden; font-weight: normal; border-bottom: 1px dotted #e1e1e1; width: 635px; background: url(https://soft.shouji.com.cn/static/v1/images/download.gif) 5px 8px no-repeat; float: left; display: inline; font-size: 13px; line-height: 20px; padding: 5px 0 5px 25px; } .downLi li.sne span.adown strong a:link, .downLi li.sne span.adown strong a:active, .downLi li.sne span.adown strong a:visited { font-weight: bold; color: #000000; font-size: 15px; } .downLi li.sne span.adown { float: left; width: 380px; overflow: hidden; font-size: 13px; font-weight: normal; } .downLi li.sne span.bdown { font-weight: bold; font-size: 14px; float: right; width: 80px; height: 20px; overflow: hidden; text-align: right; } .bdown a:link, .bdown a:active, .bdown a:visited { margin: 0 6px 0 0; color: #1F8515; background: none; font-size: 15px; } </style> </head> <body> <div class="downLi"> <dl> <li class="phonepb">最新版本下載</li> <li class="sne"> <span class="adown"> <strong> <a target="_self" onclick="downClick(this);">老梁博客APP v8.16</a> </strong> (99.35MB / 4.0及更高固件 / 2021-8-16) </span> <span class="bdown"> <a target="_self" onclick="downClick(this);">下載到電腦</a> </span> </li> </dl> <dl> <li class="phonepb">最新版本下載</li> <li class="sne"> <span class="adown"> <strong> <a target="_self" onclick="downClick(this);">老梁博客APP v8.16</a> </strong> (99.35MB / 4.0及更高固件 / 2021-8-16) </span> <span class="bdown"> <a target="_self" onclick="downClick(this);">下載到電腦</a> </span> </li> </dl> </div> </div> </body> </html>
下面在線(xiàn)演示網(wǎng)址：
http://zouni.run/
問(wèn)題未解決？付費(fèi)解決問(wèn)題加Q或微信 2589053300 (即Q號(hào)又微信號(hào))右上方掃一掃可加博主微信
所寫(xiě)所說(shuō)，是心之所感，思之所悟，行之所得；文當(dāng)無(wú)敷衍，落筆求簡(jiǎn)潔。 以所舍，求所獲；有所依，方所成！
賞
支付寶贊助 
微信贊助
支付寶贊助微信贊助免責(zé)聲明,若由于商用引起版權(quán)糾紛,一切責(zé)任均由使用者承擔(dān)。
您必須遵守我們的協(xié)議，如您下載該資源，行為將被視為對(duì)《免責(zé)聲明》全部?jī)?nèi)容的認(rèn)可->聯(lián)系老梁投訴資源 LaoLiang.Net部分資源來(lái)自互聯(lián)網(wǎng)收集，僅供用于學(xué)習(xí)和交流，請(qǐng)勿用于商業(yè)用途。如有侵權(quán)、不妥之處，請(qǐng)聯(lián)系站長(zhǎng)并出示版權(quán)證明以便刪除。
敬請(qǐng)諒解！ 侵權(quán)刪帖/違法舉報(bào)/投稿等事物聯(lián)系郵箱：service@laoliang.net
意在交流學(xué)習(xí),歡迎贊賞評(píng)論,如有謬誤,請(qǐng)聯(lián)系指正;轉(zhuǎn)載請(qǐng)注明出處: » WordPress文章頁(yè)（終端頁(yè)）局部下載資源樣式源碼
