效果图

代码

<div class="da-copyright"> <div class="hai-side"> <div class="hai-line"></div> <div class="hai-dot"></div> <div class="hai-dot"></div> <div class="hai-line"></div> </div> <div class="hai-main"> <div class="hai-title"> <span class="hai-tag">NOTICE</span> <div class="hai-right"> <span class="hai-mail" data-toggle="tooltip" title="点击复制邮箱" data-clipboard-text="15704423@qq.com" data-clipboard-tag="邮箱">15704423@qq.com</span> <span class="hai-divider">|</span> <span class="hai-year">Copyright © 2023~2026</span> </div> </div> <div class="hai-blocks"> <div class="hai-block"> <div class="hai-num">01</div> <div class="hai-info"> <span class="hai-key">DISCLAIMER</span> <p>本站资源大多来自网络，如有侵犯权益请联系管理员，我们会第一时间审核删除。站内资源仅供学习测试，未经许可禁止商用，请在24小时内删除。</p> </div> </div> <div class="hai-block"> <div class="hai-num">02</div> <div class="hai-info"> <span class="hai-key">VIP PRIVILEGE</span> <p>遇到付费内容？升级终身VIP即可全站免费畅享所有资源，可以联系我的微信进行开通。<br>大海聊天 QQ 3群：<a href="https://qm.qq.com/q/BZkgPi4obm" target="_blank" class="hai-link">478065589</a></p> </div> </div> </div> </div></div><style>.da-copyright{display:flex;background:#fff;border:2px solid #000;border-radius:var(--main-radius);overflow:hidden;margin-top:12px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}.dark-theme .da-copyright{background:#000;border-color:#fff}.hai-side{width:20px;background:#000;display:flex;flex-direction:column;align-items:center;padding:20px 0;gap:8px;flex-shrink:0}.dark-theme .hai-side{background:#fff}.hai-line{width:2px;flex:1;background:#fff}.dark-theme .hai-line{background:#000}.hai-dot{width:2px;height:6px;background:#fff}.dark-theme .hai-dot{background:#000}.hai-main{flex:1;padding:16px 20px}.hai-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #000}.dark-theme .hai-title{border-color:#fff}.hai-tag{background:#000;color:#fff;padding:3px 10px;font-size:11px;letter-spacing:2px;font-weight:700}.dark-theme .hai-tag{background:#fff;color:#000}.hai-right{display:flex;align-items:center;gap:10px;font-size:12px;color:#000}.dark-theme .hai-right{color:#fff}.hai-mail{cursor:pointer;transition:.2s;padding:2px 6px;border-radius:3px}.hai-mail:hover{background:#000;color:#fff}.dark-theme .hai-mail:hover{background:#fff;color:#000}.hai-divider{color:#ccc}.dark-theme .hai-divider{color:#666}.hai-blocks{display:flex;gap:20px}.hai-block{flex:1;display:flex;gap:12px}.hai-num{font-size:28px;font-weight:800;color:#000;line-height:1;font-style:italic}.dark-theme .hai-num{color:#fff}.hai-info{flex:1}.hai-key{display:inline-block;font-size:9px;letter-spacing:1.5px;color:#000;font-weight:700;padding:2px 6px;border:1px solid #000;margin-bottom:8px}.dark-theme .hai-key{color:#fff;border-color:#fff}.hai-info p{margin:0;font-size:13px;line-height:1.65;color:#444}.dark-theme .hai-info p{color:#bbb}.hai-link{color:inherit;text-decoration:none}@media(max-width:768px){.hai-title{flex-wrap:wrap;gap:10px}.hai-tag{order:-1}.hai-right{width:100%;justify-content:space-between;font-size:11px}.hai-blocks{flex-direction:column;gap:16px}.hai-num{font-size:24px;min-width:32px}.hai-info p{font-size:12px}}</style>

隐藏文章页面的标签和版权说明