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

哈喽，大家好，今天源开站长请鹏仔喝杯奶茶，定制了此款网站图片广告代码分享给大家，广告代码可自由搭配，一行可设置为1个图、2个图、3个图。

在PC端，鼠标滑过我加了一个抖动效果，图片也加了圆角、还有广告标识。

使用教程

将css代码与HTML代码复制，粘贴到需要展示的位置即可。

推荐尺寸

广告图片高度建议统一、一致即可（如60px、70px最佳）；

一行多张的广告图的，建议长、宽尺寸保持一致效果最佳（一张图的1200*60、那么两张图的600*60、三张图的400*60）。

css代码

<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>

html代码

<div class="tp-img-ads-layer">
        <!-- 一行一个长图 -->
        <div class="tp-one-img">
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" alt="">
            </a>
        </div>
        <!-- 一行两个长图 -->
        <div class="tp-two-img">
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" alt="">
            </a>
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" alt="">
            </a>
        </div>
        <!-- 一行三个长图 -->
        <div class="tp-three-img">
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" alt="">
            </a>
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" alt="">
            </a>
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" alt="">
            </a>
        </div>
    </div>

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

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓