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

迪巴拉 · 发表于昨天 16:54

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

哈喽，大家好，今天源开站长请鹏仔喝杯奶茶，定制了此款网站图片广告代码分享给大家，广告代码可自由搭配，一行可设置为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>

复制代码

欢迎定制各类css样式，鹏仔QQ/微信：344225443

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！