子比主题丨添加创意横幅图片广告位

AI文摘 此内容由AI根据文章内容自动生成

AI Summary

代码教程

代码位置 WordPress后台—外观—小工具—自定义HTML，位置想放哪就放哪

<div class="n_banner_inner">
  <div class="img-info">
    <div class="info">也想出现在这里？
      <a rel="nofollow noopener noreferrer" href="https://link3.cc/train03" target="_blank">联系我们</a>吧</div>
  </div>
  <a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=KNa1NK-QcFBZAdGy3Vpf6inidGeVafVA&authKey=bnjkZysSKP313zBOcMv7MCpe5%2Ffp4E0Fgl56fWfHdXs%2BraQmB%2F0KHRYYFSccw4vG&noverify=0&group_code=902992548" target="_blank" rel="noopener noreferrer">
    <div class="Banner-adTag">广告</div>
    <img class="tirr" src="https://vip.lzzcc.cn/wp-content/uploads/2024/04/20240415122951908-1713155391-20240415042951280906.gif" alt="信息">
  </a>
</div>
<style>
    /*定位*/    .n_banner_inner {
        position: relative;
    }
    /*提示信息*/    .n_banner_inner .img-info {
        position: absolute;
        right: 12px;
        top: 9px;
        padding: 0;
        text-align: right;
        color: #fff;
    }
    .n_banner_inner .img-info i {
        position: relative;
        display: inline-block;
        color: #007bff;
        font-size: 20px;
        line-height: 19px;
        text-align: center;
        z-index: 9;
        font-style: inherit;
    }
    .n_banner_inner .img-info .info {
        position: absolute;
        bottom: 5px;
        right: 0;
        width: 0;
        padding: 5px 0;
        overflow: hidden;
        background: #007bff;
        border-radius: 10px;
        line-height: 10px;
        text-align: center;
        font-size: 10px;
        color: #fff;
        white-space: nowrap;
        -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
    }
    .n_banner_inner .img-info .info a {
        color: #fff;
    }
    .n_banner_inner .tirr {
        max-width: 100%;
        height: auto;
        transition: 0.5s;
        border-radius: 5px;
    }
    /*触发Hover*/    .n_banner_inner:hover .info {
        width: auto;
        padding: 5px 23px 5px 12px;
        -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        font-size: 12px;
        z-index: 1;
    }
    .n_banner_inner img:hover {
        filter: brightness(50%);
    }
    /*出发声明hover*/    .n_banner_inner .info:hover a {
        color: red;
        text-decoration: none;
    }
    /*左下角广告*/    .n_banner_inner .Banner-adTag {
        position: absolute;
        left: 5px;
        bottom: 5px;
        width: 50px;
        border: 1px solid #ebebeb;
        border-radius: 3px;
        color: #ebebeb;
        opacity: 0.5;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
    }
    @media screen and (max-width: 768px) {
        .n_banner_inner .img-info {
            display: none;
        }
    }
</style>
</br>