子比主题 – 特效广告位样式美化

飞流 1 · 发表于 2025-10-10 18:24:38

交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

这是别人发给腾飞博客的，别人说是买来的，并且排版还有问题，腾飞博客修复了一下，修复了两个大图广告位效果不好，喜欢的自行部署吧！

tengfei_down - 2025-10-10T182402.843.webp

代码部署

定位：WP后台–>>外观–>>小工具–>>自定义HTML，将下面的代码放到里面然后放到自己喜欢的位置吧！

<style>
.main-images{display:flex;gap:10px;margin-bottom:10px;width:100%}.neon-animated{position:relative;flex:1;min-height:0}.neon-animated img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px;min-height:200px}.neon-animated::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border:4px solid #fff;border-radius:6px;box-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #0ff,0 0 70px #0ff,0 0 80px #0ff,0 0 100px #0ff;animation:neon-glow 2s linear infinite;pointer-events:none}@keyframes neon-glow{0%,100%{box-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #0ff,0 0 70px #0ff,0 0 80px #0ff,0 0 100px #0ff}50%{box-shadow:0 0 10px #0ff,0 0 20px #0ff,0 0 30px #0ff,0 0 40px #fff,0 0 70px #fff,0 0 80px #fff,0 0 100px #fff}}.ad{background:#fff;overflow:hidden;clear:both;border-radius:6px;margin-bottom:10px;padding:5px}.ad ul{display:flex;list-style:none;gap:5px}.ad li{flex:1}.ad a{display:block;border-radius:3px;text-decoration:none}.ad img{max-width:100%;border-radius:3px}.ad li a{line-height:60px;height:60px;color:#fff;background:#2f4056;text-align:center;font-size:24px}.txtguanggao{width:100%;overflow:hidden;display:block;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);margin-bottom:10px}.txtguanggao a{width:calc((100% - 20px)/ 4);float:left;border-radius:2px;line-height:35.35px;height:35.35px;text-align:center;font-size:14px;color:#fff;display:inline-block;margin:2.5px;transition-duration:.3s;text-decoration:none}.txtguanggao a:nth-child(1){background-color:#dc3545}.txtguanggao a:nth-child(2){background-color:#007bff}.txtguanggao a:nth-child(3){background-color:#28a745}.txtguanggao a:nth-child(4){background-color:#ffc107}.txtguanggao a:hover{background:#ff2805;color:#fff}@media(max-width:999px){.main-images{flex-direction:column}.ad ul{flex-direction:column}.ad li{width:100%}.txtguanggao a{width:calc((100% - 10px)/ 2)}}@media screen and (min-width:1000px){.txtguanggao a{width:calc((100% - 20px)/ 4)}}
</style>
<div class="main-images">
<div class="neon-animated">
<img src="https://www.tfbkw.com/wp-content/uploads/2025/03/20250714220647415-1-800x341.webp" alt="子比主题美化教程">
</div>
<div class="neon-animated">
<a href="/" target="_blank">
<img src="https://www.tfbkw.com/wp-content/uploads/2025/03/20250714220647415-1-800x341.webp" alt="广告图片">
</a>
</div>
</div>
<div class="ad">
<ul>
<li>
<a href="#" target="_blank" rel="noopener">广告招商腾飞博客</a>
</li>
<li>
<a href="#" target="_blank" rel="noopener">广告招商腾飞博客</a>
</li>
</ul>
</div>
<div class="txtguanggao">
<a href="#" target="_blank" class="dh" rel="noopener">腾飞博客炫酷广告位</a>
<a href="/" target="_blank" class="dh" rel="noopener">腾飞博客炫酷广告位</a>
<a href="#" target="_blank" class="dh" rel="noopener">腾飞博客炫酷广告位</a>
<a href="#" target="_blank" class="dh" rel="noopener">腾飞博客炫酷广告位</a>
</div>

复制代码

	系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。	02-21 02:22
	麦麦管家：请遵守版规社律，保护信息安全，请勿脱离平台交易，谨防网络诈骗！#帮助中心#	01-24 12:40

[代码技巧] 子比主题 – 特效广告位样式美化

交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

代码部署

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

浏览过的版块

累计签到LV.3

任务·年会员

幸运抽奖·皇

幸运抽奖·尊

幸运抽奖·豪

起源之星

摩羯座

推广LV.2

钻石LV.1

注册一周年

关于我们

常用功能

服务引导