• 欢迎@方程式 @小云 加入我们
  • Register

纯CSS代码实现页面底部固定无抖动漂浮特效

在做一个东西,需要这部分代码,但总是不太理想,后来听说天涯有这东西,CP下来,总结了一下,记录并分享。

<!DOCTYPE HTML><HTML>
<HEAD>
	<TITLE>纯CSS代码实现页面底部固定无抖动漂浮特效 - 诺豆网 yangjunwei.com</TITLE>
	<style type="text/css">
		body { background-image:url(text.txt);/*text.txt防抖*/ /* for IE6 */background-attachment:fixed; }
		#bottomNav { background-color:#D5D8DE; border:1px solid #C0C3C9; text-align:center; z-index:999; position:fixed; bottom:0; left:0; width:100%; height:40px; line-height:40px;
		/* for IE6 */ _position:absolute; _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); overflow:visible; }
	</style>
	<META content="MSHTML 6.00.3790.4672" name=GENERATOR>
</HEAD>
<BODY>
<div style="height:1000px;">
	<br /><br /><br /><br /><br />滑动您的鼠标看看底部效果吧!
	<br /><br /><br /><br /><br />滑动您的鼠标看看底部效果吧!
	<br /><br /><br /><br /><br />滑动您的鼠标看看底部效果吧!
	<br /><br /><br /><br /><br />滑动您的鼠标看看底部效果吧!
</div>
<div id="bottomNav">
	<a href=http://yangjunwei.com/a/407.html>杨俊伟:纯CSS代码实现页面底部固定无抖动漂浮特效</a>
</div>
</BODY>
</HTML>
版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/407.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

11 条评论 »

  • 浮夸的晓编
    2014/12/19 at 10:52:15

    演示地址失效了。

  • 猪.island
    2011/04/07 at 18:11:42

    这个很有效果,我找了好久了。终于找到了,真是谢谢博主了.

  • daniel
    2011/03/21 at 13:43:28

    都不支持IE6 在IE6下仅凭CSS是做不出来的

    • 头像来自 腾讯QQ
      nuodou
      2011/03/31 at 09:14:44

      @daniel 不好意思才回复:一周前已经做了调整,并加上了Demo!

  • 淘宝网首页
    2010/04/19 at 14:14:17

    这代码,这样可以下面加上一些固定的内容

    nuodou 于 2010-4-19 14:16:21 回复

    哈哈,我在上面加了点促销信息

  • ikeeptrying
    2010/04/07 at 13:19:25

    会写代码的都是牛人~~

  • 减肥产品
    2010/04/06 at 17:11:57

    博主的技术确实很牛B,很是羡慕。有空交流一下。

    nuodou 于 2010-4-6 17:15:27 回复

    过奖了,我只是特别喜欢代码

  • daniel
    2010/04/05 at 07:31:45

    呃,没看明白这个效果是什么情况。

    nuodou 于 2010-4-5 10:08:39 回复

    日志发布的时候有点问题,已经修正哈哈

发表评论 

我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册