分享一段好看的网站自适应文字加横幅html广告代码,代码上面是图片横幅广告位,(默认一条横幅,可自行增加或删除横幅广告)下边是文字广告位,也是可以增加和删减的,页面相当美观,代码是自适应的,适合市面上大部分网站程序。使用方法:可调用网站任何一个地方,只需把代码放到需要展示的页面即可,可以直接复制在一起,也可以把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>
效果展示:
![图片[1] - 网站好看且自适应文字加横幅html广告代码的教程 - 鹿泽笔记](https://www.bailuze.com/wp-content/uploads/2024/05/20240508154154.png)
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>

👋 感谢您的观看!
© 版权声明
THE END