前端实战：CSS 实现经典对联式悬浮广告

一、效果介绍对联广告是网页中非常经典的广告布局特点左右两侧各一个广告栏像对联一样悬挂页面上下滚动广告固定不动、悬浮跟随屏幕中间是网站主体内容互不遮挡、互不影响核心技术CSS fixed 固定定位二、实现思路页面结构分为左侧广告、中间主体、右侧广告三部分中间主体正常居中布局属于标准文档流左右广告使用 fixed 固定定位脱离文档流悬浮在页面两侧通过 top、left、right 精准控制广告悬挂位置三、完整实现步骤步骤1搭建HTML结构结构非常简单三块内容左广告、中间主体、右广告。!-- 左侧对联广告 -- div classad ad-leftad1 左侧对联广告/div !-- 中间页面主体内容 -- div classmain页面主体内容/div !-- 右侧对联广告 -- div classad ad-rightad2 右侧对联广告/div步骤2初始化全局样式清除默认边距统一盒模型防止布局错乱。* { margin: 0; padding: 0; box-sizing: border-box; }步骤3设置中间主体区域样式主体居中、宽度自适应、高度拉长方便测试滚动效果。.main { width: 70%; margin: 0 auto; height: 1500px; border: 3px solid red; padding: 30px; font-size: 30px; }步骤4核心——对联广告样式fixed定位fixed 定位相对于浏览器窗口固定滚动页面不会动。/* 广告公共样式 */ .ad { position: fixed; top: 150px; width: 160px; height: 450px; background: gold; border: 2px solid red; padding: 10px; font-size: 20px; } /* 左侧广告靠左 */ .ad-left { left: 20px; } /* 右侧广告靠右 */ .ad-right { right: 20px; }