最近琢磨着给自己的网站加点东西，想来想去，觉得右下角那个位置挺不错的，既不挡着主要内容，又能放点推广信息或者小广告啥的。我就动手实践了一下，把这个过程记录下来分享给大家。

一、开始的想法

一开始就是觉得那个角落空着也是空着，不如利用起来。主要目的是想放个我们自己小产品的推广图，或者有时候接点小广告也能有点补贴。关键是不能太烦人，用户想关就能关掉的那种。

二、动手规划

确定了位置就在右下角，接下来就想具体怎么实现。

• 内容形式： 就打算用一张图片，顶多加一小行文字。太复杂了看着乱，效果也不一定图片得提前设计尺寸不能太大，不然屏幕小的用户体验就差了。
• 交互方式： 必须得有个关闭按钮，这个是底线。用户点了关闭，广告就得消失。最好是能记住用户关过一次，短时间内别再弹出来了，不然太招人烦。
• 出现时机： 不能一打开网页“啪”就跳出来，太突兀。我想的是，页面加载个差不多，或者用户往下滚动一点再出来，体验能好点。

三、具体操作过程

规划完了，就开始动手敲代码了。这块主要是前端的活儿。

第一步：写HTML结构

这个简单，就在``标签结束前，放一个`

`容器，给它个ID，比如叫 `my-corner-ad`。里面再放一个图片``标签，还有就是那个关键的关闭按钮，可以用一个``或者``标签来做，里面放个“X”或者“关闭”文字。

X

这里可以放点文字说明

注意，一开始用 `style="display: none;"`