子比主题添加网站图片文字广告位代码图片广告位代码自适应

这里分享一个响应式好看的网站文字广告位代码，复制下方代码后，放到网页中需要显示的位置即可。

放置位置：WordPress后台 >> 外观 >> 小工具 >> HTML代码 >> 顶部全宽度

<!--顶部自适应图片广告开始-->
<div class="huliku_imgad">
<a href="https://www.hulucom/" target="_blank" rel="noopener">
<picture>
<!--↓↓↓电脑设备尺寸：1500x141px↓↓↓-->
<source media="(min-width: 45em)" srcset="https://hulcom/image/ad/ad_1200x150.jpg" width="100%">
<!--↓↓↓手机设备尺寸：900x268px↓↓↓-->
<source media="(min-width: 18em)" srcset="https://hul.com/images/ad_bg.png" width="100%">
<!--↓↓↓当图片无法加载时显示备用图片↓↓↓-->
<img src="https://hucom/image/ad/ad_1200x150.jpg" width="100%" height="100%" alt="图片广告位">
</picture>
</a>
<!--自适应文字广告-->
<li><a href="https://hulom" target="_blank" style="background:#e73038;" class="huliku_txtad_big" rel="noopener">大文字广告位招租</a></li>
<li><a href="https://huliom" target="_blank" style="background:#ff8100;" class="huliku_txtad_big" rel="noopener">大文字广告位招租</a></li>
</div>
<!--底部小文字广告-->
<div class="huliku_txtad">
<a href="https://hulikcom" target="_blank" rel="noopener">西北文学文字广告火爆招租</a>
<a href="https://hulikcom" target="_blank" rel="noopener">西北文学文字广告火爆招租</a>
<a href="https://hulikcom" target="_blank" rel="noopener">西北文学文字广告火爆招租</a>
<a href="https://hulikuom" target="_blank" rel="noopener">西北文学文字广告火爆招租</a>
<a href="https://hulikuom" target="_blank" rel="noopener">西北文学文字广告火爆招租</a>
<a href="https://hulikuom" target="_blank" rel="noopener">西北文学文字广告火爆招租</a>
<a href="https://hulikom" target="_blank" rel="noopener">西北文学文字广告火爆招租</a>
<a href="https://hulikom" target="_blank" rel="noopener">西北文学文字广告火爆招租</a>
</div>

下方CSS代码，可放到子比主题自定义CSS或自建CSS文件

如：Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义CSS样式

a{text-decoration:none}
.huliku_imgad{background:#fff0;overflow:hidden;clear:both;border-radius:6px;}
.huliku_imgad a{margin:2px;display:block;border-radius:3px;}
.huliku_imgad img{max-width:100%;border-radius:8px;}
.huliku_imgad li{float:left;width:50%;list-style:none;}
@media(max-width:999px) {
.huliku_imgad{margin: 0 0 10px 0;}
.huliku_imgad li{width:100%;}
}
.huliku_txtad_big{
  line-height:60px;
  height:60px;
  color:#fff;
  text-align:center;
  font-size:24px;
  }
.huliku_txtad{
    width: 100%;
    overflow: hidden;
    display: block;
    margin-top: -1px;
}
.huliku_txtad 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;
    background-color: rgb(255, 153, 159);
    margin: 2.5px;
    transition-duration: .3s;
}
.huliku_txtad a:nth-child(1) { background-color: #dc3545; }
.huliku_txtad a:nth-child(2) { background-color: #007bff; }
.huliku_txtad a:nth-child(3) { background-color: #28a745; }
.huliku_txtad a:nth-child(4) { background-color: #ffc107; }
.huliku_txtad a:nth-child(5) { background-color: #28a745; }
.huliku_txtad a:nth-child(6) { background-color: #ffc107; }
.huliku_txtad a:nth-child(7) { background-color: #dc3545; }
.huliku_txtad a:nth-child(8) { background-color: #007bff; }
.huliku_txtad a:hover { background:#FF2805; color:#FFF; }
@media screen and (max-width: 1000px) {
.huliku_txtad a {
    width: calc((100% - 10px) / 2);
    float: left;
    border-radius: 2px;
    line-height: 35.35px;
    height: 35.35px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    display: inline-block;
    background-color: rgb(255, 153, 159);
    margin: 2.5px;
    transition-duration: .3s;
}
}
@media screen and (min-width: 1000px) {
.huliku_txtad a {
    width: calc((100% - 20px) / 4);
}
}