找到
5
篇与
源码分享
相关的结果
-
好看自适应的网站维护单页html源码 今天给大家分享一个好看自适应的网站维护单页html源码，适配手机电脑，非常适合作为网站维护时使用 演示截图 图片 图片 html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网站维护公告</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://t.alcy.cc/fj') center/cover fixed; padding: 20px; } .container { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border-radius: 20px; padding: 40px; max-width: 600px; width: 90%; text-align: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.15); } h1 { color: #fff; margin-bottom: 20px; font-size: 2.2em; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); } p { color: rgba(255, 255, 255, 0.95); line-height: 1.6; margin: 15px 0; font-size: 1.1em; } .time { color: #FFD740; font-weight: 600; font-size: 1.2em; margin: 20px 0; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); } .loader { width: 50px; height: 50px; border: 4px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; border-radius: 50%; margin: 20px auto; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .refresh-btn { background: rgba(255, 255, 255, 0.25); color: #fff; border: none; padding: 12px 30px; border-radius: 30px; font-size: 1em; cursor: pointer; margin-top: 20px; transition: all 0.3s ease; backdrop-filter: blur(4px); font-weight: 500; } .refresh-btn:hover { background: rgba(255, 255, 255, 0.35); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } @media (max-width: 480px) { .container { padding: 25px; } h1 { font-size: 1.8em; } p { font-size: 1em; } } </style> </head> <body> <div class="container"> <div class="loader"></div> <h1>网站正在维护中</h1> <p>我们正在进行系统升级和维护，以确保为您提供更好的服务体验。</p> <p class="time">预计恢复时间：2025年5月5日</p> <p>地址没变，谢谢！</p> <p>感谢您的耐心等待！</p> <button class="refresh-btn" onclick="location.reload()">刷新页面</button> </div> </body> </html>
-
为网站底部设置音乐播放器 今天教大家如何在网站底部设置音乐播放器，仅需要几行代码即可实现。下面开始教学 效果图 图片 网易云歌单 <!-- require APlayer --> <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css"> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js"></script> <!-- require MetingJS --> <script src="https://cdn1.tianli0.top/npm/meting@2.0.1/dist/Meting.min.js"></script> <!-- 配置你的 背景音乐信息 --> <meting-js server="netease" type="playlist" id="5337368124" autoplay="true" preload="auto" fixed ="true" listFolded="true" order="random" > </meting-js>只需修改歌单的id即可
-
简约好看的广告位源码 一个好看自适应的文字广告位代码，如果不需要太多位置可适当刪减代码。需要的拿~ 效果图 效果图图片 html代码 <style type="text/css"> .tp-ad-text1 {width:100%;padding-top:6px;box-sizing:border-box;overflow: hidden;background: rgba(255,255,255,.2);} .tp-ad-text1 a {color:#7fba00;font-size:14px;line-height:38px;text-align:center;border:1px dashed rgba(0,0,0,.2);padding:0 3px;box-sizing:border-box;float:left;width:11.5%;height:38px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 0.5% 6px;text-decoration:none;transition:all .6s;} .tp-ad-text1 a:hover {font-weight: bold;color:#fff!important;background:#7fba00;transition: all .6s;} .tp-ad-text1 a:nth-child(2n) {color:#f74e1e;} .tp-ad-text1 a:nth-child(2n):hover {background:#f74e1e;border-color: #f74e1e;} .tp-ad-text1 a:nth-child(3n) {color:#00a4ef;} .tp-ad-text1 a:nth-child(3n):hover {background:#00a4ef;border-color: #00a4ef;} .tp-ad-text1 a:nth-child(4n) {color:#0517c2;} .tp-ad-text1 a:nth-child(4n):hover {background:#0517c2;border-color: #0517c2;} .tp-ad-text1 a:nth-child(5n) {color:#601165;} .tp-ad-text1 a:nth-child(5n):hover {background:#601165;border-color: #601165;} .tp-ad-text1 a:nth-child(6n) {color:#ffb900;} .tp-ad-text1 a:nth-child(6n):hover {background:#ffb900;border-color: #ffb900;} .tp-ad-text1 a:nth-child(7n) {color:#0fc317;} .tp-ad-text1 a:nth-child(7n):hover {background:#0fc317;border-color: #0fc317;} .tp-ad-text1 a:nth-child(8n) {color:#601165;} .tp-ad-text1 a:nth-child(8n):hover {background:#601165;border-color: #601165;} .tp-ad-text1 a:nth-child(9n) {color:#fba78f;} .tp-ad-text1 a:nth-child(9n):hover {background:#fba78f;border-color: #fba78f;} .tp-ad-text1 a:nth-child(10n) {color:#13cf8f;} .tp-ad-text1 a:nth-child(10n):hover {background:#13cf8f;border-color: #13cf8f;} .tp-ad-text1 a:nth-child(11n) {color:#f74e1e;} .tp-ad-text1 a:nth-child(11n):hover {background:#f74e1e;border-color: #f74e1e;} .tp-ad-text1 a:nth-child(12n) {color:#ffb900;} .tp-ad-text1 a:nth-child(12n):hover {background:#ffb900;border-color: #ffb900;} .tp-ad-text1 a:nth-child(13n) {color:#fba78f;} .tp-ad-text1 a:nth-child(13n):hover {background:#fba78f;border-color: #fba78f;} .tp-ad-text1 a:nth-child(14n) {color:#f74e1e;} .tp-ad-text1 a:nth-child(14n):hover {background:#f74e1e;border-color: #f74e1e;} .tp-ad-text1 a:nth-child(15n) {color:#7fba00;} .tp-ad-text1 a:nth-child(15n):hover {background:#7fba00;border-color: #7fba00;} .tp-ad-text1 a:nth-child(16n) {color:#0fc317;} .tp-ad-text1 a:nth-child(16n):hover {background:#0fc317;border-color: #0fc317;} .tp-ad-text1 a:nth-child(17n) {color:#0517c2;} .tp-ad-text1 a:nth-child(17n):hover {background:#0517c2;border-color: #0517c2;} .tp-ad-text1 a:nth-child(18n) {color:#13cf8f;} .tp-ad-text1 a:nth-child(18n):hover {background:#13cf8f;border-color: #13cf8f;} .tp-ad-text1 a:nth-child(19n) {color:#ffb900;} .tp-ad-text1 a:nth-child(19n):hover {background:#ffb900;border-color: #ffb900;} .tp-ad-text1 a:nth-child(20n) {color:#f74e1e;} .tp-ad-text1 a:nth-child(20n):hover {background:#f74e1e;border-color: #f74e1e;} @media screen and (max-width: 1198px){ .tp-ad-text1 a{ width: 24%; } } </style> 幽默的小刘吖：https://blog.lzchi.top/ <div class="tp-ad-text1"> <a href="https://blog.lzchi.top/" title="幽默的小刘吖" target="_blank">幽默的小刘吖</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">同款网站搭建</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <a href="https://www.lyszm.com/" title="广告位/10/月" target="_blank">广告位/10/月</a> <
