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