今天分享一期资源附件下载美化,围绕今天的主题:独立页面下载样式美化 资源下载看着舒服了,心情也自在;废话不说了。
下载样式美化演示
下载美化代码
<style> .phidebox{padding:3px;box-shadow:0 0 15px 5px #1e9fff30;font-size:14px} .lcphidebox .lcphidebox-contner{background-color:#fff} .lcphidebox{background-color:#1e9fff;background-size:40px 40px} .lcphidebox-ani{-webkit-animation:ogress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite} @-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}} @-moz-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}} @keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}} .lcp-button{background-color:#1e9fff;color:#fff!important;margin:0 5px;border-radius:2px;padding:2px 5px;display:inline-block;} .lcp-button:hover{background-color:#0092ff;color:#fff} .lcphidebox .lcphidebox-container>div{padding:5px 10px} .lcphidebox .lcp-{background-image:-webkit-linear-gradient(45deg,#003963 1%,#9cb0d2 64%,#f2f2f2 97%);color:#fff} .lcphidebox .lcp-body{background-color:#f2f2f2} .lcphidebox .price span{font-weight:700;color:#f60} .lcphidebox .price .oprice{color:#333;font-weight:400} .lcphidebox .lcp-buy-button{color:#fff;} .lcp_download_index{margin-top:10px;padding:0 10px;background-color:#a2a2a2;color:#fdfdfd;} .lcp_download_field{margin-bottom:10px;padding:0;margin:0;padding:10px;background-color:#e8e8e8;border:solid 1px #a2a2a2;font-size:14px} .lcp_download_field:hover{background-color:#e4e4e4} .lcp_download_field label{display:inline-block;width:100px} .lcp_download_field [class^=lcp_download_]:not(:last-ild){border-bottom:dashed 1px #d2d2d2;padding:3px 0} .lcp_download_field .download{padding-top:10px} .lcp-download-subinfo{margin:20px -10px -5px;padding:5px 10px;background-color:#fff} .lcp-bar{background-image:linear-gradient(45deg,rgba(255,255,255,.3) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.3) 75%,transparent 75%,transparent)} .lcphidebox .lcp-download-vipfree-tips{color:#fff;margin:-5px -10px;margin-bottom:10px;padding:10px;background-color:#4caf50} </style> <style> .lcphidebox { background-color: #20c4ab; margin-top: 20px; } .lcphidebox .lcp-title { background-image: -webkit-linear-gradient(45deg, #009688 1%, #20c4ab 64%, #f2f2f2 97%); } .lcp-button { background-color: #20c4ab; margin: 2px; } .lcphidebox .lcp-download-vipfree-tips { background-color: #20c4ab; } .lcp-button:hover { background-color: #20c4ab; } .lcp_download_index { background-color: #20c4ab; display: none; } .lcp_download_field { background-color: #fff; margin-top: 15px; } .lcp_download_field:hover { background-color: #fff; } .lcphidebox .lcp-body { background-color: #f1f5f8; } .lcp_download_field_filename { display: none; } </style>
附件下载调用
<div class="lcphidebox lcp-bar lcphidebox-ani saletype3" style="margin-top: 10px;"> <div class="lcphidebox-container"> <div class="lcp-title"> <span><i class="iconfont icon-bag"></i> 资源下载</span> </div><div class="lcp-body"> <div class="lcp_download_field"> <div class="lcp_download_field_pwd"><label>下载链接:</label></div> <div class="download"> <a href="网盘链接" class="lcp-download-button lcp-button" target="_blank">蓝奏云</a> </div> </div> <div class="lcp-download-subinfo"><div> </div></div> </div> </div> </div>
© 版权声明
本站网站名称:追月流涟教程网
本站永久网址:https://www.zyds666.cn
网站侵权说明:
本站采用 CC BY-NC-SA 4.0 国际许可协议 进行许可,转载或引用本站文章应遵循相同协议。
1、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ进行删除处理。
2、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
3、本站禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
4、本站资源大多存储在云盘,如发现链接失效,请联系我们将会第一时间更新。
站长邮箱:abcdefghijklm1211@qq.com
1、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ进行删除处理。
2、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
3、本站禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
4、本站资源大多存储在云盘,如发现链接失效,请联系我们将会第一时间更新。
站长邮箱:abcdefghijklm1211@qq.com
还没有评论,来说两句吧...