这是一篇制作一个简单的右下角广告的方法。

先将广告放置在页面中

利用 position:fixed; 可以将我们想要的对象放置在页面中,可以是一张图片、一个 gif 动画、一个 flash 视频等等,这里我用的是一张图片。

AD图片

它的 html 代码如下:

CSS 代码也很简单:

设置好之后,这个图片就固定在页面的右下方无论怎么拖动页面,它都会在在右下角不滚动。

添加AD

添加关闭按钮

由于该图片一直在右下角,我们希望可以在它的右上角设置一个关闭按钮,点击它之后就让广告乖乖消失了。

和上一篇的那个回到顶部按钮类似,在 rightAd 里图片的后面添加一个 a 标签,指向空 JavaScript

关闭按钮我从一堆 icon 里抠出来这个:

logo
CSS 样式:

JavaScript 只管给按钮设置广告区 display:none 就行:

}

结论

这样一个简单的广告就制作好了,利用定位,可以设置在页面上下左右甚至中间等不同的位置!
关闭效果

发表评论

电子邮件地址不会被公开。 必填项已用*标注