本文介绍了一种在网站中添加广告位的方式，特别强调了如何通过点击广告位直接跳转至用户会员页面的设计。文章提供了详细的代码实现，包括HTML和CSS部分，用于创建创意横幅广告位。此外，还描述了广告横幅的样式设计，如颜色搭配、点击效果等。部署步骤涉及将代码插入子比后台的顶部全区块，并说明了如何通过点击广告位显示右上角的“联系我们”链接。文章还提到了广告横幅的动态效果和响应式布局，确保广告位在不同屏幕尺寸下正常显示。

网站创收广告位是必不可少的，今天分享一个在文章中添加广告位，可以点击直达开通会员页面，鼠标放到横幅上可以显示右上角联系我们，感觉还是比较实用的一个广告横幅代码。
使用教程： 部署：子比后台 >> 自定义 >> 顶部全区块 >> 自定义HTML，CSS代码放到自定义CSS即可

//html代码

<div >  <div >!    <div >也想出现在这里？      <a rel="nofollow noopener noreferrer" href="https://www.zxki.cn" rel="external nofollow"  rel="external nofollow"  target="_blank">联系我们</a>吧</div>  </div>  <a href="https://www.zxki.cn" rel="external nofollow"  rel="external nofollow"  target="_blank" rel="noopener noreferrer">    <div >广告</div>    <img  src="https://cdn.zxki.cn/tc/2024/04/14/661b3040039b2.png" alt="创意横幅图片广告位">  </a></div>//css代码

 .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;    }    .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;}