利用CSS实现固定广告效果

1、点击插入菜单-->布局对象-->Div 标签插入一个层(div),如下图所示:

2、在层里插入一张图片替换掉原来层里的文字,如下图所示:

3、在右边的CSS样式面板中点击新建CSS规则按钮,如下图所示:

4、在新建CSS规则对话框中,选择器类型为“类(可应用于任何HTML元素)”,选择器名称为.fixcontent1,如下图所示:

3、在规则定义对话框中点击定位分类,然后将Position属性设置为fixed,设置宽度(Width)和高度(Height)为60,设置Placement的Right和Bottom为50(这个设置表示距离浏览器窗口的右边界和下边界50像素),如下图所示:

4、点击位于div层中的小企鹅图片,然后通过属性面板上方的标签选择栏选中div标签,将设置为上面定义的fixcontent1规则,如下图所示:


5、保存页面后,通过浏览器显示页面,我们可以发现小企鹅图片的位置固定在浏览器窗口右下角(距离边界50像素),如果你在网页中增加大量文字内容,使得浏览时出现垂直滚动条,那在滚动内容时,你会发现小企鹅图片始终呆在右下角不动。点击查看效果

7、本例中所定义的CSS样式规则如下:

<style type="text/css">
.fixcontent1 {
  height: 60px;
  width: 60px;
  position: fixed;
  right: 50px;
  bottom: 50px;
}
</style>