Yoo趣儿

Yoo趣儿 › Geek › 站长 › 网站添加长图广告位代码 可多张图自由搭配 ...

网站添加长图广告位代码 可多张图自由搭配

查看 12|回复 0
作者：百变鹏仔   


202507021751469039636230.png (163.92 KB, 下载次数: 0)
下载附件
保存到相册
7分钟前 上传

哈喽，大家好，今天源开站长请鹏仔喝杯奶茶，定制了此款网站图片广告代码分享给大家，广告代码可自由搭配，一行可设置为1个图、2个图、3个图。
在PC端，鼠标滑过我加了一个抖动效果，图片也加了圆角、还有广告标识。
使用教程
将css代码与HTML代码复制，粘贴到需要展示的位置即可。
推荐尺寸
广告图片高度建议统一、一致即可（如60px、70px最佳）；
一行多张的广告图的，建议长、宽尺寸保持一致效果最佳（一张图的1200*60、那么两张图的600*60、三张图的400*60）。
由于4414发代码帖 代码识别有问题，如异常 请去 https://www.fzhan.com/post/22.html 复制代码
[ol]
  •     .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); }
  •     }
  •         
  •         
  •             [url=]
  •                


    logo.png (17.38 KB, 下载次数: 0)
    下载附件
    保存到相册
    5分钟前 上传
  •             [/url]
  •         
  •         
  •         
  •             [url=]
  •                
  •             [/url]
  •             [url=]
  •                
  •             [/url]
  •         
  •         
  •         
  •             [url=]
  •                
  •             [/url]
  •             
  •                
  •             
  •             
  •                
  •             
  •         
  •     [/ol]复制代码欢迎定制各类css样式，鹏仔QQ/微信：344225443

    代码, 广告

    • 相关帖子

    返回列表
    您需要登录后才可以回帖 登录 | 立即注册

    AD1

    热门主题

    热门板块

    问与答分享发现分享创造奇思妙想分享邀请码商业推广优惠信息PythonPHPJavaJavaScriptNode.jsGo语言C++HTML

    公告

    标签|小黑屋|Yoo趣儿

    GMT+8, 2025-7-5 23:19 , Processed in 0.131259 second(s), 13 queries , Gzip On, MemCached On.

    Powered by Discuz! X3.2

    The happiest thing in the world is to strive for an ideal.

    返回顶部