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

<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">

      

    </div>

    <div class="neon-animated">

      <a href="/" target="_blank">

        

      </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>