详情
评论
问答

子比-N多个网站好看且自适应的广告代码合集

广告代码一:

好看的网站自适应文字加横幅html广告代码,代码上面是图片横幅广告位,(默认一条横幅,可自行增加或删除横幅广告)下边是文字广告位,也是可以增加和删减的,页面相当美观,代码是自适应的,适合市面上大部分网站程序。使用方法:可调用网站任何一个地方,只需把代码放到需要展示的页面即可,可以直接复制在一起,也可以把html和css分开来用,请自行研究。

效果展示:图片[1] - 网站好看且自适应文字加横幅html广告代码的教程 - 鹿泽笔记

CSS代码:

<div class="ad">
<!--图片横幅广告-->
<a href="链接地址" target="_blank" ><img src="图片横幅广告地址"></a>
<!--自适应文字广告-->
<li><a href="链接地址" target="_blank" style="line-height:60px;height:60px;color:#fff;background:#01AAED;text-align:center;font-size:24px;">广告招商 虚位以待</a></li>
<li> <a href="链接地址"  target="_blank" style="line-height:60px; height:60px ;color:#fff; background:#2F4056; text-align:center; font-size:24px;" >广告招商 虚位以待</a></li>
</div>
 
<div class="txtguanggao">
<a href="链接地址" target="_blank" class="dh">自定义文字广告位</a>
<a href="链接地址" target="_blank" class="dh">自定义文字广告位</a>
<a href="链接地址" target="_blank" class="dh">自定义文字广告位</a>
<a href="链接地址" target="_blank" class="dh">自定义文字广告位</a>
<a href="链接地址" target="_blank" class="dh">自定义文字广告位</a>
<a href="链接地址" target="_blank" class="dh">自定义文字广告位</a>
<a href="链接地址" target="_blank" class="dh">自定义文字广告位</a>
<a href="链接地址" target="_blank" class="dh">自定义文字广告位</a>
 
</div>
<style>
/**广告位**/
.ad{background:#fff;overflow:hidden;clear:both;border-radius: 6px;}
.ad a{margin:5px;display:block;border-radius:3px;}
.ad img{max-width:100%;}
.ad li{float:left;width:50%;list-style:none;}
@media(max-width:999px) {
.ad{margin: 0 0 10px 0;}
.ad li{width:100%;}
}
/**新增文字广告**/
.txtguanggao{
    width: 100%;
    overflow: hidden;
    display: block;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}
.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;
    background-color: rgb(255, 153, 159);
    margin: 2.5px;
    
    transition-duration: .3s;
}
.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:nth-child(5) {
    background-color: #28a745;
}
.txtguanggao a:nth-child(6) {
    background-color: #ffc107;
}
.txtguanggao a:nth-child(7) {
    background-color: #dc3545;
}
.txtguanggao a:nth-child(8){
    background-color: #007bff;
}
.txtguanggao a:hover{
background:#FF2805;color:#FFF
}
@media screen and (max-width: 1000px) {
.txtguanggao 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) {
    .txtguanggao a{
    width: calc((100% - 20px) / 4);
    }}
</style>

html代码:

<style type="text/css">
  .tp-ad-text1 {width:100%;padding-top:6px;box-sizing:border-box;overflow: hidden;background: rgba(255,255,255,.2);}
  .tp-ad-text1 a {color:#7fba00;font-size:14px;line-height:38px;text-align:center;border:1px dashed rgba(0,0,0,.2);padding:0 3px;box-sizing:border-box;float:left;width:11.5%;height:38px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 0.5% 6px;text-decoration:none;transition:all .6s;}
  .tp-ad-text1 a:hover {font-weight: bold;color:#fff!important;background:#7fba00;transition: all .6s;}
  .tp-ad-text1 a:nth-child(2n) {color:#f74e1e;}
  .tp-ad-text1 a:nth-child(2n):hover {background:#f74e1e;border-color: #f74e1e;}
  .tp-ad-text1 a:nth-child(3n) {color:#00a4ef;}
  .tp-ad-text1 a:nth-child(3n):hover {background:#00a4ef;border-color: #00a4ef;}
  .tp-ad-text1 a:nth-child(4n) {color:#0517c2;}
  .tp-ad-text1 a:nth-child(4n):hover {background:#0517c2;border-color: #0517c2;}
  .tp-ad-text1 a:nth-child(5n) {color:#601165;}
  .tp-ad-text1 a:nth-child(5n):hover {background:#601165;border-color: #601165;}
  .tp-ad-text1 a:nth-child(6n) {color:#ffb900;}
  .tp-ad-text1 a:nth-child(6n):hover {background:#ffb900;border-color: #ffb900;}
  .tp-ad-text1 a:nth-child(7n) {color:#0fc317;}
  .tp-ad-text1 a:nth-child(7n):hover {background:#0fc317;border-color: #0fc317;}
  .tp-ad-text1 a:nth-child(8n) {color:#601165;}
  .tp-ad-text1 a:nth-child(8n):hover {background:#601165;border-color: #601165;}
  .tp-ad-text1 a:nth-child(9n) {color:#fba78f;}
  .tp-ad-text1 a:nth-child(9n):hover {background:#fba78f;border-color: #fba78f;}
  .tp-ad-text1 a:nth-child(10n) {color:#13cf8f;}
  .tp-ad-text1 a:nth-child(10n):hover {background:#13cf8f;border-color: #13cf8f;}
  .tp-ad-text1 a:nth-child(11n) {color:#f74e1e;}
  .tp-ad-text1 a:nth-child(11n):hover {background:#f74e1e;border-color: #f74e1e;}
  .tp-ad-text1 a:nth-child(12n) {color:#ffb900;}
  .tp-ad-text1 a:nth-child(12n):hover {background:#ffb900;border-color: #ffb900;}
  .tp-ad-text1 a:nth-child(13n) {color:#fba78f;}
  .tp-ad-text1 a:nth-child(13n):hover {background:#fba78f;border-color: #fba78f;}
  .tp-ad-text1 a:nth-child(14n) {color:#f74e1e;}
  .tp-ad-text1 a:nth-child(14n):hover {background:#f74e1e;border-color: #f74e1e;}
  .tp-ad-text1 a:nth-child(15n) {color:#7fba00;}
  .tp-ad-text1 a:nth-child(15n):hover {background:#7fba00;border-color: #7fba00;}
  .tp-ad-text1 a:nth-child(16n) {color:#0fc317;}
  .tp-ad-text1 a:nth-child(16n):hover {background:#0fc317;border-color: #0fc317;}
  .tp-ad-text1 a:nth-child(17n) {color:#0517c2;}
  .tp-ad-text1 a:nth-child(17n):hover {background:#0517c2;border-color: #0517c2;}
  .tp-ad-text1 a:nth-child(18n) {color:#13cf8f;}
  .tp-ad-text1 a:nth-child(18n):hover {background:#13cf8f;border-color: #13cf8f;}
  .tp-ad-text1 a:nth-child(19n) {color:#ffb900;}
  .tp-ad-text1 a:nth-child(19n):hover {background:#ffb900;border-color: #ffb900;}
  .tp-ad-text1 a:nth-child(20n) {color:#f74e1e;}
  .tp-ad-text1 a:nth-child(20n):hover {background:#f74e1e;border-color: #f74e1e;}
  @media screen and (max-width: 1198px){
    .tp-ad-text1 a{
      width: 24%;
    }
  }
</style>
 <div class="tp-ad-text1">
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank" title="同款网站搭建" target="_blank">同款网站搭建</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="同款网站搭建" target="_blank">同款网站搭建</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
<a href="网站链接" title="广告位/10/月" target="_blank">广告位/10/月</a>
            </div>

广告代码二:

上边是图片广告位,下边是文字广告位,都是自适应的。

使用方法:外观-小工具-自定义html,把代码复制进去,放在想要放置的地方。

效果展示:子比-N多个网站好看且自适应广告代码的教程合集

CSS+html代码:可分开

<div class="ad">
<!--图片横幅广告-->
<a href="https://www.wananyun.com/aff/JJRVSMDG" target="_blank" ><img src="https://www.wananyun.com/banner/wananyun-min.gif"></a>
<!--自适应文字广告-->
<li><a href="https://xiegang.wang/guanggaotoufang" target="_blank" style="line-height:60px;height:60px;color:#fff;background:#01AAED;text-align:center;font-size:24px;">广告招商 虚位以待</a></li>
<li> <a href="https://xiegang.wang/guanggaotoufang"  target="_blank" style="line-height:60px; height:60px ;color:#fff; background:#2F4056; text-align:center; font-size:24px;" >广告招商 虚位以待</a></li>
</div>
 
<div class="txtguanggao">
<a href="https://79bk.com" target="_blank" class="dh">超低价文字广告位</a>
<a href="https://https://79bk.com" target="_blank" class="dh">超低价文字广告位</a>
<a href="https://https://79bk.com" target="_blank" class="dh">超低价文字广告位</a>
<a href="https://https://79bk.com" target="_blank" class="dh">超低价文字广告位</a>
<a href="https://https://79bk.com" target="_blank" class="dh">超低价文字广告位</a>
<a href="https://https://79bk.com" target="_blank" class="dh">超低价文字广告位</a>
<a href="https://xhttps://79bk.com" target="_blank" class="dh">超低价文字广告位</a>
<a href="https://https://79bk.com" target="_blank" class="dh">超低价文字广告位</a>
 
</div>
<style>
/**广告位开始-79bk.com**/
.ad{background:#fff;overflow:hidden;clear:both;border-radius: 6px;}
.ad a{margin:5px;display:block;border-radius:3px;}
.ad img{max-width:100%;}
.ad li{float:left;width:50%;list-style:none;}
@media(max-width:999px) {
.ad{margin: 0 0 10px 0;}
.ad li{width:100%;}
}
/**新增文字广告-79bk.com**/
.txtguanggao{
    width: 100%;
    overflow: hidden;
    display: block;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}
.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;
    background-color: rgb(255, 153, 159);
    margin: 2.5px;
		
    transition-duration: .3s;
}
.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:nth-child(5) {
    background-color: #28a745;
}
.txtguanggao a:nth-child(6) {
    background-color: #ffc107;
}
.txtguanggao a:nth-child(7) {
    background-color: #dc3545;
}
.txtguanggao a:nth-child(8){
    background-color: #007bff;
}
.txtguanggao a:hover{
background:#FF2805;color:#FFF
}
@media screen and (max-width: 1000px) {
.txtguanggao 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) {
		.txtguanggao a{
		width: calc((100% - 20px) / 4);
		}}
</style>

广告代码三:

我按照子比主题的教程来,直接将代码放到:后台-外观-小工具-自定义HTML即可

效果展示:子比-N多个网站好看且自适应广告代码的教程合集

CSS+html代码:

<style>
    @media screen and (max-width: 1000px) {
        .pc-wobbt {
            display: none;
        }
    }
    /* pc-wobbt 仅PC端显示 根据需求改放图片盒子代码 
    <div class="wobbt-img pc-wobbt">  */
        @media screen and (min-width: 1000px) { .m-wobbt{display:none; }}
        /* m-wobbt 仅移动端显示 根据需求该放图片盒子代码 
        <div class="wobbt-img m-wobbt">  */
        .zib-widget{
        padding: 10px;}
        /*设置zibll主题内容整体间距*/
        .wobbt{
        width: 100%;}
        .wobbt::after{
        content: '';
        display: block;
        height: 0;
        visibility:hidden;
        clear: both;
        }
        /*解决float的浮动问题,方便,因为直接在父级div的css这里添加如下样式*/
        .wobbt-left{
        width: 49.5%;
        float: left;  /*盒子左对齐*/
        margin-right: 1%;
        }
        /*大盒子里面左边盒子*/
        .wobbt-right{
        width: 49.5%;
        float: left;  /*盒子右对齐*/
        }
        /*大盒子里面右边盒子*/
        .wobbt-img{
        width: 100%;
        height: auto;
        max-height: 80px;
        min-height: 45px;
        margin-bottom: 8px;  /*图片盒子上下间隔*/
        overflow: hidden;  /*设置图片放大不超过图片盒子*/
        }
        /*放图片专用盒子*/
        .wobbt-img img{
        width: 100%;
        height: auto;
        max-height: 80px;
        min-height: 45px;
        border-radius: 6px;  /*圆角角度*/
        transition: all .2s ease .1s;  /*光标放到图片上的放大时间*/
        }
        /*对放图片盒子配置样式*/
        .wobbt-img img:hover{
        transform: scale(1.03);
        }
        .wobbt-img-dapeng img:hover{
        transform: scale(1.03);
        }
        /*设置光标放到图片放大的倍数*/
        td{
         width: 20%;
        }
        /*单元格宽度*/
</style>
<!--图片广告-->
<div class="wobbt">
<div class="wobbt-img">
<a href="https://网站地址
" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="横幅广告图1" height="100px"></a>
</div>
<div class="wobbt-left">
<div class="wobbt-img">
<a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="左边广告图1" height="100px"></a>
</div>
<div class="wobbt-img">
<a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="左边广告图2" height="100px"></a>
</div>
</div>
<!--左右小图-->
<div class="wobbt-right">
<div class="wobbt-img">
<a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="右边广告图1" height="100px"></a>
</div>
<div class="wobbt-img">
<a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="右边广告图2" height="100px"></a>
</div>
</div> 
<!--文字广告-->
<table style="text-align:center;width:100%;margin-bottom: 10px;" cellspacing="0" cellpadding="0" bordercolor="#99999" border="1" bgcolor="#F8F8FF" align="center"><tbody><tr><td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#0000FF;">文字广告位招租中</span></a></td>
<td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span> </a> </td>  
<td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#0000FF;">文字广告位招租中</span></a></td>
</tr>
<!--第一列-->
<tr>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#006400;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#970de1;">文字广告位招租中
</span> </a></td>  
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
</tr>
<!--第二列-->
<tr>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#006400;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#000000;">文字广告位招租中</span> </a></td>  
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
</tr>
</tbody></table>
</div>

广告代码四:

广告代码可自由搭配,一行可设置为1个图、2个图、3个图。

在PC端,鼠标滑过我加了一个抖动效果,图片也加了圆角、还有广告标识。

广告图片高度建议统一、一致即可(如60px、70px最佳);

一行多张的广告图的,建议长、宽尺寸保持一致效果最佳(一张图的1200*60、那么两张图的600*60、三张图的400*60)。

效果图:长图广告位代码

CSS代码:

<style>
    .tp-img-ads-layer {
        width: 100%;
        margin: 0 auto;
    }
    .tp-img-ads-layer a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 2px;
        box-sizing: border-box;
    }
    .tp-img-ads-layer a img {
        display: block;
        width: 100%;
        min-height: 40px;
        max-height: 80px;
        border-radius: 6px;
        transition: transform 0.2s ease;
    }
    .tp-img-ads-layer a:hover img {
        animation: tpshake 0.4s infinite;
    }
    .tp-img-ads-layer a::after {
        content: '广告';
        display: block;
        color: rgba(255,255,255,.5);
        font: 600 12px/18px sans-serif;
        background: rgba(0,0,0,.3);
        border-top-left-radius: 6px;
        padding: 3px 6px;
        box-sizing: border-box;
        position: absolute;
        bottom: 2px;
        right: 2px;
    }
    .tp-one-img a,
    .tp-two-img,
    .tp-three-img {
        width: 100%;
    }
    .tp-two-img,
    .tp-three-img {
        display: flex;
        justify-content: space-between;
    }
    .tp-two-img a { width: 49.7%; }
    .tp-three-img a { width: 33%; }
    @keyframes tpshake {
        0% { transform: translate(0, 0); }
        25% { transform: translate(-2px, 0); }
        50% { transform: translate(2px, 0); }
        75% { transform: translate(-2px, 0); }
        100% { transform: translate(2px, 0); }
    }
</style>

HTML代码:

<div class="tp-img-ads-layer">
        <!-- 一行一个长图 -->
        <div class="tp-one-img">
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" >
            </a>
        </div>
        <!-- 一行两个长图 -->
        <div class="tp-two-img">
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" >
            </a>
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" >
            </a>
        </div>
        <!-- 一行三个长图 -->
        <div class="tp-three-img">
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" >
            </a>
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" >
            </a>
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" >
            </a>
        </div>
    </div>

 

文章很赞,支持一下吧~ 还没有人为TA充电
为TA充电
还没有人为TA充电
© 版权声明
THE END
喜欢就支持一下吧
点赞10打赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容