首页 > 开发 > CSS > 正文

CSS+JS+Cookie实现页脚固定广告展示(支持关闭、一段时间内不显示)

2024-07-11 09:06:25
字体:
来源:转载
供稿:网友

经常看到有些网站为了吸引用户注意,在页面底部放置固定横幅广告,用户滚动页面时,横幅广告一直固定在页底,并不随页面滚动而滚动,当然一般允许用户可以关闭广告条,并设置一定时间内不再显示此广告条。本文将介绍使用CSS+Cookie来实现这一效果。

HTML

首先,我们将横幅广告的html代码放到页面最底部,因为是最后加载的。也可以使用外部js动态插入到页面底部。整个HTML结构由遮罩层.float_layer,内容层.float_content组成,其中.float_bg为广告部分,内容可以是图片、文字等任意形式的html元素,.float_close是关闭按钮,用户不喜欢广告可以关闭展示。
 

复制代码
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表