通用定时到期广告网格 HTML 代码｜单元格合并兜底-服务器测评_云 VPS 推荐_运维技术教程与源码分享

很多站长搭建网站广告位、活动展示位时，常会遇到广告到期忘记替换、无效链接堆积、广告布局死板、间距难看，无法自由大小混排等问题。

免责声明：本文仅为前端代码科普教程，环球云域不提供广告投放中介、广告售卖业务，代码开源通用，站长可自行部署到任意支持自定义HTML的网站。

一、功能介绍

这套纯前端广告网格代码，基于CSS Grid + JavaScript实现，PC/移动端自适应，支持单元格合并、广告到期自动替换兜底图片、关闭跳转链接，前台不展示到期时间，适配静态网站、WordPress、Typecho、ZBlog，子比主题可自动适配暗色模式。

核心功能清单：

✅ 定时到期自动切换兜底广告图：每一格广告独立设置到期时间，到期后自动替换为兜底图片，并且移除点击跳转链接。
✅ 网格自由布局，支持单元格合并
- 单格：1列独立广告卡片
- 跨2列：合并2个单元格，适合宽横幅广告
- 跨3列：整行通栏全屏大图Banner
✅ 几乎无间隙广告墙：图片之间间隙极小，视觉上接近连续广告矩阵，正常状态底部提示文字不占用高度，不会产生多余空白。
✅ 暗色模式完美兼容：浅色/深色主题自动切换背景、文字颜色。
✅ 移动端自动单列布局：手机端自动切换为1列，自动调整间隙，不会挤压变形。
✅ 图片自动裁切不变形：object-fit:cover，图片比例不一致也不会拉伸扭曲，自动居中裁切。
✅ 低性能消耗：30秒轮询一次广告时间状态，不会持续占用浏览器资源。
✅ 独立配置：每一块广告单独配置：广告图、兜底图、跳转链接、到期时间、到期提示文字。

原理说明：代码完全前端渲染，不需要后端数据库，所有时间判断在访客浏览器本地执行；适合站长用来搭建活动矩阵、促销横幅、公告广告墙。

二、图片素材尺寸推荐

统一高度60px，方便对齐，可自行修改CSS里height参数调整高度

单列单格广告：推荐图片 300×60px，比例 5:1
跨2列广告：推荐图片 600×60px，比例10:1
整行通栏跨3列广告：推荐图片900×60px，比例15:1

图片格式支持：JPG / PNG / WebP / GIF

三、部署教程完整 HTML广告代码

广告效果：

20260916174436176-广告代码效果演示

部署方法:

静态HTML网站：直接复制全部代码粘贴到页面body内即可。
WordPress / Typecho / ZBlog：新建自定义HTML模块，粘贴完整代码保存。

暗色模式自动适配；其他主题，暗色相关样式会自动忽略，不影响正常展示

<style>
.ad-grid-wrap{width:100%;margin:8px 0;}
.ad-grid-container{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:1px;
}
.ad-item-col2{grid-column: span 2;}
.ad-item-col3{grid-column: span 3;}

.ad-item{
    overflow:hidden;
    border-radius:0;
    border:none;
    background:#fff;
}
body.dark-theme .ad-item{background:#111;}

.ad-item-img{
    width:100%;
    height:60px;
    object-fit:cover;
    display:block;
}

.ad-item-desc{
    display:none;
    text-align:center;
    padding:2px 4px;
    font-size:12px;
    color:#666;
    background:#fafafa;
}
.ad-item.is-expired .ad-item-desc{
    display:block;
}
body.dark-theme .ad-item-desc{color:#bbb;background:#1a1a1a;}

@media(max-width:768px){
    .ad-grid-container{
        grid-template-columns:1fr;
        gap:2px;
    }
    .ad-item-col2,.ad-item-col3{
        grid-column:span 1;
    }
}
</style>

<div class="ad-grid-wrap">
    <div class="ad-grid-container">
        <!-- ========== 第一组：三列均分 ========== -->
        <div class="ad-item"
             data-end-time="2056-12-31 23:59:59"
             data-ad-url="https://cloudidc.vip"
             data-ad-img="https://picsum.photos/600/120?random=1"
             data-fallback-img="https://picsum.photos/id/1/600/120"
             data-fallback-text="广告已结束">
            <a class="ad-link">
                <img class="ad-item-img" alt="单格广告1">
            </a>
            <div class="ad-item-desc"></div>
        </div>
        <div class="ad-item"
             data-end-time="2056-12-31 23:59:59"
             data-ad-url="https://cloudidc.vip"
             data-ad-img="https://picsum.photos/600/120?random=2"
             data-fallback-img="https://picsum.photos/id/2/600/120"
             data-fallback-text="广告已结束">
            <a class="ad-link">
                <img class="ad-item-img" alt="单格广告2">
            </a>
            <div class="ad-item-desc"></div>
        </div>
        <div class="ad-item"
             data-end-time="2056-12-31 23:59:59"
             data-ad-url="https://cloudidc.vip"
             data-ad-img="https://picsum.photos/600/120?random=3"
             data-fallback-img="https://picsum.photos/id/3/600/120"
             data-fallback-text="广告已结束">
            <a class="ad-link">
                <img class="ad-item-img" alt="单格广告3">
            </a>
            <div class="ad-item-desc"></div>
        </div>

        <!-- ========== 第二组：跨2列 + 单格 ========== -->
        <div class="ad-item ad-item-col2"
             data-end-time="2056-12-31 23:59:59"
             data-ad-url="https://cloudidc.vip"
             data-ad-img="https://picsum.photos/600/120?random=4"
             data-fallback-img="https://picsum.photos/id/4/600/120"
             data-fallback-text="广告已结束">
            <a class="ad-link">
                <img class="ad-item-img" alt="跨两列广告">
            </a>
            <div class="ad-item-desc"></div>
        </div>
        <div class="ad-item"
             data-end-time="2056-12-31 23:59:59"
             data-ad-url="https://cloudidc.vip"
             data-ad-img="https://picsum.photos/600/120?random=5"
             data-fallback-img="https://picsum.photos/id/5/600/120"
             data-fallback-text="广告已结束">
            <a class="ad-link">
                <img class="ad-item-img" alt="搭配单格广告">
            </a>
            <div class="ad-item-desc"></div>
        </div>

        <!-- ========== 第三组：整行通栏3列 ========== -->
        <div class="ad-item ad-item-col3"
             data-end-time="2056-12-31 23:59:59"
             data-ad-url="https://cloudidc.vip"
             data-ad-img="https://picsum.photos/600/120?random=6"
             data-fallback-img="https://picsum.photos/id/6/600/120"
             data-fallback-text="广告活动已结束">
            <a class="ad-link">
                <img class="ad-item-img" alt="通栏全屏广告">
            </a>
            <div class="ad-item-desc"></div>
        </div>

        <!-- ========== 第四组：第二行三栏均分 ========== -->
        <div class="ad-item"
             data-end-time="2056-12-31 23:59:59"
             data-ad-url="https://cloudidc.vip"
             data-ad-img="https://picsum.photos/600/120?random=7"
             data-fallback-img="https://picsum.photos/id/7/600/120"
             data-fallback-text="广告已结束">
            <a class="ad-link">
                <img class="ad-item-img" alt="第二行广告A">
            </a>
            <div class="ad-item-desc"></div>
        </div>
        <div class="ad-item"
             data-end-time="2056-12-31 23:59:59"
             data-ad-url="https://cloudidc.vip"
             data-ad-img="https://picsum.photos/600/120?random=8"
             data-fallback-img="https://picsum.photos/id/8/600/120"
             data-fallback-text="广告已结束">
            <a class="ad-link">
                <img class="ad-item-img" alt="第二行广告B">
            </a>
            <div class="ad-item-desc"></div>
        </div>
        <div class="ad-item"
             data-end-time="2056-12-31 23:59:59"
             data-ad-url="https://cloudidc.vip"
             data-ad-img="https://picsum.photos/600/120?random=9"
             data-fallback-img="https://picsum.photos/id/9/600/120"
             data-fallback-text="广告已结束">
            <a class="ad-link">
                <img class="ad-item-img" alt="第二行广告C">
            </a>
            <div class="ad-item-desc"></div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded',function(){
    const adItems = document.querySelectorAll('.ad-item');
    adItems.forEach(item=>{
        const endTimeStr = item.dataset.endTime;
        const adUrl = item.dataset.adUrl;
        const adImg = item.dataset.adImg;
        const fallbackImg = item.dataset.fallbackImg;
        const fallbackText = item.dataset.fallbackText;
        const linkDom = item.querySelector('.ad-link');
        const imgDom = item.querySelector('.ad-item-img');
        const tipDom = item.querySelector('.ad-item-desc');
        const endTimestamp = new Date(endTimeStr).getTime();
        function checkAdStatus(){
            const now = Date.now();
            if(now >= endTimestamp){
                imgDom.src = fallbackImg;
                linkDom.removeAttribute('href');
                linkDom.style.cursor = 'default';
                tipDom.innerText = fallbackText;
                item.classList.add('is-expired');
                return;
            }
            tipDom.innerText = "";
            item.classList.remove('is-expired');
            imgDom.src = adImg;
            linkDom.href = adUrl;
            linkDom.target = "_blank";
        }
        checkAdStatus();
        setInterval(checkAdStatus,30000);
    })
})
</script>