子比主题 – 特效广告位样式美化
这是别人发给腾飞博客的，别人说是买来的，并且排版还有问题，腾飞博客修复了一下，修复了两个大图广告位效果不好，喜欢的自行部署吧！代码部署
定位：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>
页:
[1]