|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
网上冲浪无论你用InternetExplorer还是NetscapeNavigator,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。
网页制造Poluoluo文章简介:兼容ie6,ie7,ff的fixed,元素高低端流动定位办法.
效果地点:
lt;!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>fixedie6</title><styletype="text/css">body{background-image:url(about:blank);background-attachment:fixed;/*需要,防发抖*/}.head,.foot{position:fixed!important;/*ie7ff*/position:absolute;z-index:21;background:#999;height:30px;width:500px;}.foot{bottom:0!important;/*ie7ff*/}.main{height:2000px;}</style><!--[ifIE6]><styletype="text/css">/*ie6fix顶端元素*/.head{top:expression(eval(document.documentElement.scrollTop));}/*ie6fix底端元素*/.foot{top:expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1:document.body.scrollTop+document.body.clientHeight-this.clientHeight-1));}</style><![endif]--></head><body><divclass="head">header</div><divclass="main"><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p></div><divclass="foot">foot</div></body></html>
[Ctrl+A全体选择提醒:你可先修正部分代码,再按运转]
出处:http://xiebiji.com/2009/09/fixed
为了兼容ie6(万恶的器材),用的是expression的办法
在页头到场:- <styletype="text/css">body{background-image:url(about:blank);background-attachment:fixed;/*需要,防发抖*/}.head,.foot{position:fixed!important;/*ie7ff*/position:absolute;z-index:21;background:#999;height:30px;width:500px;}.foot{bottom:0!important;/*ie7ff*/}.main{height:2000px;}</style><!--[ifIE6]><styletype="text/css">/*ie6fix顶端元素*/.head{top:expression(eval(document.documentElement.scrollTop));}/*ie6fix底端元素*/.foot{top:expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?
- documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1:document.body.
- scrollTop+document.body.clientHeight-this.clientHeight-1));}</style><![endif]-->
复制代码 HTML:- <body><divclass="head">header</div><divclass="main"><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p>
- <p>main</p><p>main</p>
- <p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p>
- <p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p>
- <p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p>
- <p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p></div><divclass="foot">foot</div></body>
复制代码 </p>
对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。 |
|