详情 评论 问答 子比-N多个网站好看且自适应的广告代码合集小柚子11月4日更新关注私信04510 广告代码一: 好看的网站自适应文字加横幅html广告代码,代码上面是图片横幅广告位,(默认一条横幅,可自行增加或删除横幅广告)下边是文字广告位,也是可以增加和删减的,页面相当美观,代码是自适应的,适合市面上大部分网站程序。使用方法:可调用网站任何一个地方,只需把代码放到需要展示的页面即可,可以直接复制在一起,也可以把html和css分开来用,请自行研究。 效果展示: 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,把代码复制进去,放在想要放置的地方。 效果展示: 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://fengxue.cc" target="_blank" class="dh">超低价文字广告位</a> <a href="https://https://fengxue.cc" target="_blank" class="dh">超低价文字广告位</a> <a href="https://https://fengxue.cc" target="_blank" class="dh">超低价文字广告位</a> <a href="https://https://fengxue.cc" target="_blank" class="dh">超低价文字广告位</a> <a href="https://https://fengxue.cc" target="_blank" class="dh">超低价文字广告位</a> <a href="https://https://fengxue.cc" target="_blank" class="dh">超低价文字广告位</a> <a href="https://xhttps://fengxue.cc" target="_blank" class="dh">超低价文字广告位</a> <a href="https://https://fengxue.cc" target="_blank" class="dh">超低价文字广告位</a> </div> <style> /**广告位开始-fengxue.cc**/ .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%;} } /**新增文字广告-fengxue.cc**/ .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即可 效果展示: 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充电 © 版权声明 版权声明 1 本站名称: 七九网单 2 本站网址:www.fengxue.cc 3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。 4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。 6 本站附件资源、教程等内容如因时效原因失效或不可用,请评论区留言或联系站长及时更新。 THE END子比美化 喜欢就支持一下吧点赞10打赏 分享QQ空间微博QQ好友复制链接收藏如何下载资源?您可以通过搜索或浏览分类列表来找到您期望下载的资源。随后点击资源介绍页右侧的下载链接按钮,依据提示信息进行操作即可。是否需要充值才能下载?大部分资源可积分免费下载,为了维持网站的运行小部分资源须付费才能下载。下载的资源是否有版权?本站提供的下载资源均为网络搜集,仅供个人学习和交流使用。对于版权问题,请用户自行判断并承担相应责任。 上一篇 子比主题美化 – 添加用户封禁功能小黑屋模块 下一篇 子比主题美化 – 仿B2底部页脚样式美化 评论 抢沙发 请登录后发表评论 登录 注册 暂无评论内容