两侧浮动广告如何实现？-网页设计-锦华智联科技

核心思路

无论使用哪种方法,实现两侧浮动广告的核心思路都是一样的：

（图片来源网络，侵删）

定位：使用CSS的定位属性（通常是 position: fixed）将广告元素从正常的文档流中“脱离”出来，并使其相对于浏览器窗口进行定位。
布局：将广告元素放置在窗口的左侧和右侧。
在广告元素内部放置广告图片、代码或第三方广告脚本。
交互（可选）：添加一个关闭按钮，让用户可以手动关闭广告。

使用 `position: fixed` (最经典、最常用)

这是最传统也是最可靠的方法,兼容性极好，几乎所有浏览器都支持。

优点：

兼容性最好。
实现简单直观。
广告会一直固定在视口中,不会随页面滚动而消失。

缺点：

如果广告内容过长,可能会遮挡页面内容。
对移动端不友好（通常会隐藏）。

代码示例

这是一个完整的、可以直接复制使用的HTML文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">两侧浮动广告示例</title>
    <style>
        /* 重置一些基本样式，让页面更美观 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .content {
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        h1, p {
            margin-bottom: 20px;
        }
        /* 1. 定义广告容器的通用样式 */
        .ad-container {
            /* 固定定位，相对于浏览器窗口 */
            position: fixed;
            /* 确保广告在内容的上层，不会被其他元素遮挡 */
            z-index: 1000; 
            /* 宽度和高度 */
            width: 120px;
            height: 600px;
            /* 背景色和边框，方便查看 */
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box; /* 让padding包含在width/height内 */
        }
        /* 2. 定义左侧广告的特定样式 */
        .ad-left {
            top: 50%; /* 垂直居中 */
            left: 20px; /* 距离左边20px */
            transform: translateY(-50%); /* 配合top: 50%实现完美垂直居中 */
        }
        /* 3. 定义右侧广告的特定样式 */
        .ad-right {
            top: 50%; /* 垂直居中 */
            right: 20px; /* 距离右边20px */
            transform: translateY(-50%); /* 配合top: 50%实现完美垂直居中 */
        }
        /* 4. 定义广告图片的样式 */
        .ad-image {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 让图片填满容器，不变形 */
        }
        /* 5. 定义关闭按钮的样式 */
        .close-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 20px;
            height: 20px;
            background-color: #ff4444;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 12px;
            line-height: 20px;
            text-align: center;
        }
        /* 6. 广告关闭后的隐藏样式 */
        .ad-container.hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>网页主要内容</h1>
        <p>这里是你网站的正文内容，当你滚动页面时，请注意两侧的广告，它们会固定在视口的左右两侧。</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nunc nisl aliquam nisl, eget ultricies nisl nunc eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nunc nisl aliquam nisl, eget ultricies nisl nunc eget nisl.</p>
        <!-- 为了演示滚动效果，这里添加很多内容 -->
        <p style="height: 2000px;">滚动区域...</p>
    </div>
    <!-- 左侧广告 -->
    <div id="adLeft" class="ad-container ad-left">
        <button class="close-btn" onclick="closeAd('adLeft')">×</button>
        <img src="https://via.placeholder.com/100x580.png?text=Left+Ad" alt="左侧广告" class="ad-image">
        <!-- 或者在这里放置广告代码，如 <script>...</script> -->
    </div>
    <!-- 右侧广告 -->
    <div id="adRight" class="ad-container ad-right">
        <button class="close-btn" onclick="closeAd('adRight')">×</button>
        <img src="https://via.placeholder.com/100x580.png?text=Right+Ad" alt="右侧广告" class="ad-image">
        <!-- 或者在这里放置广告代码，如 <script>...</script> -->
    </div>
    <script>
        // 关闭广告的JavaScript函数
        function closeAd(adId) {
            const adElement = document.getElementById(adId);
            adElement.classList.add('hidden');
        }
    </script>
</body>
</html>

使用 CSS Grid 布局 (更现代、更灵活)

如果你的网站整体布局就是使用CSS Grid，那么将广告作为Grid容器的一部分来管理会更加灵活和语义化，这种方法同样利用 position: fixed 来固定广告。

优点：

广告和主内容可以更好地集成到同一个布局系统中。
代码结构更清晰,易于维护。

缺点：

需要对整个页面布局有更好的规划。

思路：

创建一个全屏的 grid 容器。
将左侧广告、主内容区和右侧广告都作为 grid 的项目。
使用 grid-template-areas 来定义它们的位置。
给广告项目添加 position: fixed 和相应的定位属性。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">CSS Grid 布局广告示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            /* 隐藏body的默认滚动条，因为我们将在grid容器上创建 */
            overflow: hidden; 
        }
        /* 1. 创建一个全屏的Grid容器 */
        .page-layout {
            display: grid;
            /* 定义三列：左侧广告、主内容、右侧广告 */
            grid-template-columns: 120px 1fr 120px;
            /* 定义grid区域的名字 */
            grid-template-areas:
                "left-sidebar main-content right-sidebar"
                "left-sidebar main-content right-sidebar";
            /* 让容器占满整个视口高度 */
            height: 100vh;
            /* 主容器负责滚动 */
            overflow-y: auto;
        }
        /* 2. 定义主内容区 */
        .main-content {
            grid-area: main-content;
            padding: 20px;
            line-height: 1.6;
        }
        /* 3. 定义广告侧边栏 */
        .ad-sidebar {
            /* 固定定位，脱离Grid布局，但位置由Grid区域决定 */
            position: fixed; 
            width: 120px;
            height: 100vh;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
        }
        .ad-left-sidebar {
            grid-area: left-sidebar;
            left: 0;
            top: 0;
        }
        .ad-right-sidebar {
            grid-area: right-sidebar;
            right: 0;
            top: 0;
        }
        .ad-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .close-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            /* ... 其他关闭按钮样式同上 ... */
        }
    </style>
</head>
<body>
    <div class="page-layout">
        <aside class="ad-sidebar ad-left-sidebar">
            <button class="close-btn" onclick="this.parentElement.style.display='none'">×</button>
            <img src="https://via.placeholder.com/100x1000.png?text=Left+Ad" alt="左侧广告" class="ad-image">
        </aside>
        <main class="main-content">
            <h1>网页主要内容</h1>
            <p>这里是使用CSS Grid布局的示例，主内容区可以独立滚动，而两侧的广告则固定不动。</p>
            <p>Lorem ipsum dolor sit amet...</p>
            <!-- 滚动内容 -->
            <p style="height: 2000px;">滚动区域...</p>
        </main>
        <aside class="ad-sidebar ad-right-sidebar">
            <button class="close-btn" onclick="this.parentElement.style.display='none'">×</button>
            <img src="https://via.placeholder.com/100x1000.png?text=Right+Ad" alt="右侧广告" class="ad-image">
        </aside>
    </div>
</body>
</html>

响应式设计 (移动端友好)

我们必须考虑移动端,在手机上，120px宽度的广告会占用太多屏幕空间，体验很差，最佳实践是在移动端隐藏这些广告。

（图片来源网络，侵删）

如何实现？

只需在CSS中添加一个媒体查询（@media）即可。

/* 在你的CSS文件末尾添加以下代码 */
/* 当屏幕宽度小于768px时（典型的移动端断点） */
@media (max-width: 768px) {
    /* 隐藏所有广告容器 */
    .ad-container {
        display: none !important;
    }
    /* 或者如果你使用的是Grid布局方法 */
    .ad-sidebar {
        display: none !important;
    }
}

!important 的使用说明：在这里使用 !important 是为了确保媒体查询的样式能够覆盖掉可能存在的其他显示广告的样式，确保在移动端广告一定会被隐藏，虽然通常不推荐滥用 !important，但在这种明确的覆盖场景下是合理的。

重要注意事项和最佳实践

用户体验：
- 不要滥用：不要在页面上放太多广告，尤其是弹出式或全屏覆盖的，这会引起用户反感。
- 尺寸适中：广告尺寸不宜过大，以免严重影响用户阅读。
- 避免闪烁：如果广告是第三方加载的（如Google AdSense），确保它们不会导致页面内容跳动。

广告关闭功能：

（图片来源网络，侵删）

必须提供：一个好的浮动广告必须有关闭按钮，这是基本的用户尊重。

持久化关闭：更好的体验是，用户关闭广告后，在本次访问（甚至未来一段时间内）不再显示，这需要使用 localStorage 或 cookies 来记录用户的操作。

// 示例：使用localStorage记录用户是否关闭了广告
function closeAd(adId) {
    const adElement = document.getElementById(adId);
    adElement.classList.add('hidden');
    // 将关闭状态存储在localStorage中
    localStorage.setItem('adClosed_' + adId, 'true');
}
// 在页面加载时检查
window.onload = function() {
    if (localStorage.getItem('adClosed_adLeft') === 'true') {
        document.getElementById('adLeft').classList.add('hidden');
    }
    if (localStorage.getItem('adClosed_adRight') === 'true') {
        document.getElementById('adRight').classList.add('hidden');
    }
};

第三方广告脚本：
- 如果你使用的是Google AdSense等第三方广告服务，他们会提供专门的代码，你只需要将他们生成的 <script> 或 <iframe> 标签放入你的 .ad-container 中即可，CSS样式基本不变。

方法	适用场景	优点	缺点
`position: fixed`	快速实现，兼容性要求高，任何布局	简单、直接、兼容性好	代码耦合度稍高，需手动处理响应式
CSS Grid	网站整体采用Grid布局，追求代码整洁	布局统一，结构清晰	需要对Grid布局有一定理解
响应式方案	所有现代网站必备	提升移动端用户体验，是行业标准	需要额外编写媒体查询代码

对于大多数情况,方法一 (position: fixed) + 响应式设计 是最常用和最推荐的组合，它简单、有效，并且能满足绝大多数需求。

两侧浮动广告如何实现？

核心思路

使用 position: fixed (最经典、最常用)

优点：

缺点：

代码示例

使用 CSS Grid 布局 (更现代、更灵活)

优点：

缺点：

思路：

代码示例

响应式设计 (移动端友好)

如何实现？

重要注意事项和最佳实践

使用 `position: fixed` (最经典、最常用)