子比美化 图片广告位样式代码

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

AI Summary

后台-自定义-顶部全区块-自定义HTML

<div class="n_banner_inner">
  <div class="img-info">!
    <div class="info">也想出现在这里？
      <a rel="nofollow noopener noreferrer" href="转跳Url" target="_blank">联系我们</a>吧</div>
  </div>
  <a href="前往Url" target="_blank" rel="noopener noreferrer">
    <div class="Banner-adTag">广告</div>
    <img class="tirr" src="https://www.haigs.cc/wp-content/uploads/2023/06/2023061715004338.png" 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;
        }
    }
  .container {
    width: 100%;
}
.zib-widget {
    clear: both;
    background: var(--main-bg-color);
    padding: 0px;
    box-shadow: 0 0 0px var(--main-shadow);
    border-radius: var(--main-radius);
    margin-bottom: 20px;
}
</style>

新增引入会员购买页弹窗

<div class="n_banner_inner">
  <div class="img-info">!
    <div class="info">也想出现在这里？
      <a rel="nofollow noopener noreferrer" href="https://wpa.qq.com/msgrd?v=3&uin=82719519&site=qq&menu=yes&jumpflag=1" target="_blank">联系我们</a>吧</div>
  </div>
  <a class="pay-vip" href="javascript:;">
    <div class="Banner-adTag">广告</div>
    <img class="tirr" src="https://www.haigs.cc/wp-content/uploads/2023/06/2023061715004338.png" 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;
        }
    }
  .container {
    width: 100%;
}
.zib-widget {
    clear: both;
    background: #fff0;
    padding: 0px;
    box-shadow: 0 0 0px var(--main-shadow);
    border-radius: var(--main-radius);
    margin-bottom: 20px;
}
</style>