多语言展示
当前在线:1567今日阅读:26今日分享:39

DIV+CSS 网页如何制作固定底部的漂浮广告

DIV+CSS 网页如何制作固定底部的漂浮广告,在页面上固定显示,起到醒目的作用。
工具/原料
1

电脑

2

PS、文本文档

方法/步骤
1

第一步:通过PS做好广告的图片,当然也可以是全文字的

2

第二步:建立HTML文件,及需要的广告图片

3

第三步:在html中建立漂浮广告Div及其他元素DIV 标签 、 链接标签 、图片标签

4

第四步:在html样式中写入CSS 主要属性:position: fixed;、 bottom: 100px; left: 49.1%; 、 margin-left: -620px;  在这里用到固定位置固定在游览器底部100像素处,根据页面宽度设置固定左侧的位置这个根据页面而定,如果要放在右侧可调整 margin-left:的值来设置

5

第五步:在这里制作简单的页面实例来展示漂浮广;                                       全部html dIv+css代码如下:    DIV+CSS 网页如何制作固定底部的漂浮广告       

       
           
                                   
   
   
       

DIV+CSS 网页如何制作固定底部的漂浮广告,在页面上固定显示,起到醒目的作用。       

       

1.这是网页内容部份:

       

DIV+CSS 网页如何制作固定底部的漂浮广告,在页面上固定显示,起到醒目的作用。DIV+CSS 网页如何制作固定底部的漂浮广告,在页面上固定显示,起到醒目的作用。

       

2.这是网页内容部份:

       

DIV+CSS 网页如何制作固定底部的漂浮广告,在页面上固定显示,起到醒目的作用。DIV+CSS 网页如何制作固定底部的漂浮广告,在页面上固定显示,起到醒目的作用。

       

3.这是网页内容部份:

       

DIV+CSS 网页如何制作固定底部的漂浮广告,在页面上固定显示,起到醒目的作用。DIV+CSS 网页如何制作固定底部的漂浮广告,在页面上固定显示,起到醒目的作用。

       

4.这是网页内容部份:

       

DIV+CSS 网页如何制作固定底部的漂浮广告,在页面上固定显示,起到醒目的作用。DIV+CSS 网页如何制作固定底部的漂浮广告,在页面上固定显示,起到醒目的作用。

   
   
       

这是网页底部页脚部份:

       

DIV+CSS 网页如何制作固定底部的漂浮广告,在页面上固定显示,起到醒目的作用。DIV+CSS 网页如何制作固定底部的漂浮广告,在页面上固定显示,起到醒目的作用。

   

6

第六步:在这里制作显示Html效果;可看见不管鼠标上下如何滚动该广告位置都是在固定位置显示并不会消失;在页面上部时候的效果:

7

第七步:在这里制作显示Html效果;可看见不管鼠标上下如何滚动该广告位置都是在固定位置显示并不会消失;在页面底部时候的效果:

注意事项
1

要在广告的左右显示的时候设置好位置,本页面使用的是LEFT:49.1%这个是居中;

2

再设置margin-left:来固定位置;是左还是右;当然在bottom也可以改写为Top 顶部固定

推荐信息