网站好看且自适应文字加横幅html广告代码的教程

50914

分享一段好看的网站自适应文字加横幅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广告代码的教程 - 鹿泽笔记

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广告位代码

👋 感谢您的观看！

© 版权声明
版权声明 1、文章版权归作者所有，未经允许请勿转载。
2、本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
3、咨询请联系QQ：526009505
THE END
产品项目
# 网站建设
喜欢就支持一下吧
点赞14 分享
相关推荐
搜索
开启精彩搜索
作者信息
鹿泽的头像 - 鹿泽笔记钻石会员
网站简单翻译插件Translate WordPress with GTranslate
WordPress网站添加恋爱计时小组件（情侣恋爱计时器）的教程
WordPress博客备案版权页脚美化
【广告位】侧边栏增加8+自动轮播广告位，文字版+图片版
WordPress文章内容关键词自动添加标签内链并随机颜色展示的方法
b2主题美化教程

网站出现403 Forbidden错误原因以及解决方法

DuckDuckGo搜索引擎使用方法

欢迎关注[鹿泽笔记]微信公众号

深圳SEO优化技术如何对网站进行调整

seo网页排名下降的原因是什么？

电脑显示器尺寸汇总，显示器屏幕大小一览表

小红书营销策略流量分发逻辑（CES评分流量分发模型）解析

优良中差五个等级是怎么分的？

1688关键词优化四大步骤，1688怎么优化产品排名？

SEO的优化方法和技巧，搜索引擎seo方法是什么？

标签云
谷歌Google SEO视频运营网络营销网络知识网络推广网站建设知识随笔电脑知识电商运营新媒体运营技术教程手机付费推广产品运营个人笔记WordPresswordTypechoSEO优化PythonphpMySQLlinux系统JavaScriptjavaexcel