图片广告位代码

代码简介:

之前写过很多各式各样的文字广告位代码,也都给大家免费分享了,也得到大家的一致好评,本次站长微信群一位站长需要图片广告位代码,就是长图一排展示或者一排展示两个的,这个刚好之前就写好了 ,不过一直懒得发布,今天勤快一下吧。

相关图片:

图片[1]筑梦博客-专注于技术分享图片广告位代码筑梦博客-专注于技术分享筑梦博客

代码展示:

 

HTML代码:

<div class="tp-ads">

  <div class="tp-ads-list">
    <a href="跳转链接" target="_blank" title="" >
      <img src="图片链接" >
    </a>
  </div>

  <div class="tp-ads-list tp-ads-flex">
    <a href="跳转链接" target="_blank" title="" >
      <img src="图片链接" >
    </a>
    <a href="跳转链接" target="_blank" title="" >
      <img src="图片链接" >
    </a>
  </div>

  <div class="tp-ads-list tp-ads-flex">
    <a href="跳转链接" target="_blank" title="" >
      <img src="图片链接" >
    </a>
    <a href="跳转链接" target="_blank" title="" >
      <img src="图片链接" >
    </a>
  </div>

</div>

CSS代码:

<style type="text/css">
  .tp-ads{
    width: 100%;
    margin-top: 6px;
  }
  .tp-ads-list{
    width: 100%;
  }
  .tp-ads-list a{
    display: block;
    width: 100%;
  }
  .tp-ads-list img{
    width: 100%;
    height: 70px;
    margin: 4px 0;
  }
  .tp-ads-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tp-ads-flex a{
    width: 49.8%;
  }

  @media screen and (max-width: 1000px){
    .tp-ads-list img{
      width: 100%;
      height: 25px;
    }
  }
</style>

使用方法:将HTML和CSS代码复制后放置需要展示的地方,然后更换图片与广告链接即可,需要几行广告复制几行即可!

温馨提示:本文最后更新于2024-05-08 08:55:36,某些文章具有时效性,若有错误或已失效,请在下方留言
© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容