DIV+CSS图片绝对底部定位且不随滚动条滚动实现代码

作者：简简单单 2012-09-05

提示：您可以先修改部分代码再运行

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>"> #lee{z-index:100;background:#F16280; width:100%; position:fixed; left:0; bottom:0;} </style> <!--[if lte IE 6]> <script type="text/javascript"> if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){ cot_t1_DOCtp="_top:expression_r_r_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression_r_r_r(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}"; }else{ cot_t1_DOCtp="_top:expression_r_r_r(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression_r_r_r(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}"; } var lee_bodyCSS='* html {}'; var leeCSS='#lee {position:fixed;'; var leeCSS=leeCSS+'_position:absolute;'; var leeCSS=leeCSS+'width:100%;'; var leeCSS=leeCSS+'bottom:0px;'; var leeCSS=leeCSS+'right:0px;'; var leeCSS=leeCSS+'clip:rect(0 100% 100% 0);'; var leeCSS=leeCSS+cot_t1_DOCtp; document.write('<style type="text/css">'+lee_bodyCSS+leeCSS+'</style>'); </script> <![endif]--> <!--[if lte IE 7]> <script type="text/javascript"> if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){ cot_t1_DOCtp="_top:expression_r_r_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression_r_r_r(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}"; }else{ cot_t1_DOCtp="_top:expression_r_r_r(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression_r_r_r(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}"; } var lee_bodyCSS='* html {}'; var leeCSS='#lee {position:fixed;'; var leeCSS=leeCSS+'_position:absolute;'; var leeCSS=leeCSS+'width:100%;'; var leeCSS=leeCSS+'bottom:0px;'; var leeCSS=leeCSS+'right:0px;'; var leeCSS=leeCSS+'clip:rect(0 100% 100% 0);'; var leeCSS=leeCSS+cot_t1_DOCtp; document.write('<style type="text/css">'+lee_bodyCSS+leeCSS+'</style>'); </script> <![endif]--> <!--[if lte IE 8]> <script type="text/javascript"> if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){ cot_t1_DOCtp="_top:expression_r_r_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression_r_r_r(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}"; }else{ cot_t1_DOCtp="_top:expression_r_r_r(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression_r_r_r(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}"; } var lee_bodyCSS='* html {}'; var leeCSS='#lee {position:fixed;'; var leeCSS=leeCSS+'_position:absolute;'; var leeCSS=leeCSS+'width:100%;'; var leeCSS=leeCSS+'bottom:0px;'; var leeCSS=leeCSS+'right:0px;'; var leeCSS=leeCSS+'clip:rect(0 100% 100% 0);'; var leeCSS=leeCSS+cot_t1_DOCtp; document.write('<style type="text/css">'+lee_bodyCSS+leeCSS+'</style>'); </script> <![endif]--> //使用方法如下 <div id="lee"><a href="#" target="_blank"><img src="这里是图片地址" /></a></div> </td> </tr> </table>

提示：您可以先修改部分代码再运行

相关文章

• HTML5+jQuery设计悬浮菜单特效

  页面特效 2017-10-28
  

• 常用交互组件介绍

  综合特效 2017-08-01

• 网页上怎么使用代码编辑图像

  页面特效 2017-06-20
  

• 6种独特的网页导航设计

  导航菜单 2017-04-07
  

• 纯css实现二级导航菜单效果

  导航菜单 2015-06-28

• JavaScript新闻式滚动一行停留数秒后再滚动到下一行

  页面特效 2015-06-26

精彩推荐

• 

  一剑斩仙

  下载
• 

  超级雷电战机

  下载
• 

  烈火一刀

  下载
• 

  天使纪元

  下载

• 

  完美修真

  角色扮演 538.52 MB

  高清画质体验，华丽场景视觉盛宴

  下载
• 

  永恒领主

  即时网游 392.00 MB

  3D魔幻MMO

  下载
• 

  九州八荒录

  角色扮演 232.56 MB

  九州八荒，一剑入魂。

  下载
• 

  航海王燃烧意志

  角色扮演 1.57 GB

  热血激战动作冒险游戏

  下载
• 

  君临传奇

  角色扮演 43.57 MB

  经典RPG战斗手游

  下载