查看代码

<div class="advertisement" id="centered-ad">
    <button class="close-btn">×</button>
    <a href="https://www.diligo.asia" target="_blank">
        <img src="https://clcxz.cn/wp-content/uploads/2024/10/1659938036.jpg" alt="正常居中的广告" />
    </a>
    <p>正常居中的广告示例，适合重要信息展示。</p>
</div>

右下角广告示例，包含倒计时功能。

查看代码

<div class="advertisement" id="countdown-ad">
    <button class="close-btn">×</button>
    <a href="https://www.diligo.asia" target="_blank">
        <img src="https://clcxz.cn/wp-content/uploads/2024/10/1659938036.jpg" alt="右下角广告" />
    </a>
    <div class="timer" id="timer">10秒后可以关闭</div>
    <p>右下角广告示例，包含倒计时功能。</p>
</div>

查看代码

<div class="advertisement" id="top-banner">
    <button class="close-btn">×</button>
    <a href="https://www.diligo.asia" target="_blank">
        <img src="https://clcxz.cn/wp-content/uploads/2024/10/1659938036.jpg" alt="顶部广告" />
    </a>
    <p>固定在顶部的广告，适合长期展示的信息。</p>
</div>

查看代码

<div class="advertisement" id="left-side">
    <button class="close-btn">×</button>
    <a href="https://www.diligo.asia" target="_blank">
        <img src="https://clcxz.cn/wp-content/uploads/2024/10/1659938036.jpg" alt="左侧广告" />
    </a>
    <p>左侧固定广告示例，适合重要链接展示。</
    
    </p>
</div>

查看代码

<div class="advertisement" id="right-side">
    <button class="close-btn">×</button>
    <a href="https://www.diligo.asia" target="_blank">
        <img src="https://clcxz.cn/wp-content/uploads/2024/10/1659938036.jpg" alt="右侧广告" />
    </a>
    <p>右侧固定广告示例，适合推荐产品展示。</p>
</div>

查看代码

<div class="advertisement" id="rounded">
    <button class="close-btn">×</button>
    <a href="https://www.diligo.asia" target="_blank">
        <img src="https://clcxz.cn/wp-content/uploads/2024/10/1659938036.jpg" alt="圆角广告" />
    </a>
    <p>圆角广告示例，适合柔和的视觉效果。</p>
</div>

查看代码

<div class="advertisement" id="with-gradient">
    <button class="close-btn">×</button>
    <a href="https://www.diligo.asia" target="_blank">
        <img src="https://clcxz.cn/wp-content/uploads/2024/10/1659938036.jpg" alt="渐变背景广告" />
    </a>
    <p>渐变背景广告示例，增强视觉吸引力。</p>
</div>

查看代码

<div class="advertisement" id="shadowed">
    <button class="close-btn">×</button>
    <a href="https://www.diligo.asia" target="_blank">
        <img src="https://clcxz.cn/wp-content/uploads/2024/10/1659938036.jpg" alt="阴影广告" />
    </a>
    <p>阴影广告示例，增加层次感。</p>
</div>

查看代码

<div class="advertisement" id="highlighted">
    <button class="close-btn">×</button>
    <a href="https://www.diligo.asia" target="_blank">
        <img src="https://clcxz.cn/wp-content/uploads/2024/10/1659938036.jpg" alt="高亮广告" />
    </a>
    <p>高亮广告示例，突显重要信息。</p>
</div>

查看代码

<div class="advertisement" id="fixed-ad">
    <button class="close-btn">×</button>
    <a href="https://www.diligo.asia" target="_blank">
        <img src="https://clcxz.cn/wp-content/uploads/2024/10/1659938036.jpg" alt="固定底部广告" />
    </a>
    <p>固定在底部的广告示例，适合持续展示的信息。</p>
</div>