WordPress文章页（终端页）局部下载资源样式源码
[重要通告]如您遇疑难杂症,本站支持知识付费业务,扫右边二维码加博主微信,可节省您宝贵时间哦!
说起wordpress，大家对它有爱有恨的，爱是因为各种插件，使用方便，恨的是各种插件能把站点拖死，想做个文章页内的下载，都要使用插件，简直崩溃，Wordpress页面下载文件的样式太实属太丑，那我们就自己设计一个或者扒一个，目前想在网站上添加如下下载资料文件样式效果，刚开始样式有点问题，后面经过自己调整，终于符合想要的风格。
样式展示如下：
WordPress 完成代码和样式如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>Wordpress文章页（终端页）局部下载资源样式源码</title> <link rel="stylesheet" type="text/css" href="你的外部css" /> <!--可引用外部css--> <script type="text/javascript" src="你的外部库" ></script> <!--可引用外部JS，以及jquery等库--> <!-- 各种JS库的引用地址：www.bootcdn.cn --> <script> /* 自写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 href="https://306t.com/file/28426853-454707605" target="_self" onclick="downClick(this);">老梁博客APP v8.16</a> </strong> (99.35MB / 4.0及更高固件 / 2021-8-16) </span> <span class="bdown"> <a href="https://306t.com/file/28426853-454707605" target="_self" onclick="downClick(this);">下载到电脑</a> </span> </li> </dl> <dl> <li class="phonepb">最新版本下载</li> <li class="sne"> <span class="adown"> <strong> <a href="https://pan.laoliang.net" target="_self" onclick="downClick(this);">老梁博客APP v8.16</a> </strong> (99.35MB / 4.0及更高固件 / 2021-8-16) </span> <span class="bdown"> <a href="https://pan.laoliang.net" target="_self" onclick="downClick(this);">下载到电脑</a> </span> </li> </dl> </div> </div> </body> </html>
下面在线演示网址：
http://zouni.run/
问题未解决？付费解决问题加Q或微信 2589053300 (即Q号又微信号)右上方扫一扫可加博主微信
所写所说，是心之所感，思之所悟，行之所得；文当无敷衍，落笔求简洁。 以所舍，求所获；有所依，方所成！
赏
支付宝赞助 
微信赞助
支付宝赞助微信赞助免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。
您必须遵守我们的协议，如您下载该资源，行为将被视为对《免责声明》全部内容的认可->联系老梁投诉资源 LaoLiang.Net部分资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。
敬请谅解！ 侵权删帖/违法举报/投稿等事物联系邮箱：service@laoliang.net
意在交流学习,欢迎赞赏评论,如有谬误,请联系指正;转载请注明出处: » WordPress文章页（终端页）局部下载资源样式源码
