【转】不用JS的漂浮层

原文:http://ued.taobao.com/blog/2007/01/24/css_float_banner/

CSS部分:

*{
margin:0;
padding:0;
}
* html{
height:100%;
overflow-y:hidden;
}
* html body{
height:100%;
overflow-y:auto;
}
#TargetTOP{
position:fixed;
bottom:10px;
right:10px !important;
right:27px;
border:1px #f00 solid;
}
* html #TargetTOP{
position: absolute;
}

HTML部分:

< a name="Top">< /a>
< div style="border: 1px solid #ff0000; height: 1000px">< /div>
< div id="TargetTOP">< a h ref=" # Top">跳转到页面顶部< /a>< /div>
在FF,ie6,ie7下测试有效,现在发现的缺点是页面中不可以再出现其余带有position属性的元素了.
这些个代码没怎么用,难免有纰漏. 欢迎批评. 代码很简单就不加注释了.
拷贝代码注意下html中空格,实在抱歉,对付编辑器的时间太少.

 

 

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2  <html xmlns="http://www.w3.org/1999/xhtml">
3  <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>EQQ Proxy</title>
6
7  <style type="text/css">
8 *{
9 margin:0;
10 padding:0;
11  }
12 * html{
13 height:100%;
14 overflow-y:hidden;
15 }
16 * html body{
17 height:100%;
18 overflow-y:auto;
19 }
20 #TargetTOP{
21 position:fixed;
22 bottom:10px;
23 right:10px !important;
24 right:27px;
25 border:1px #f00 solid;
26 }
27 * html #TargetTOP{
28 position: absolute;
29 }
30 </style>
31 </head>
32 <body>
33 <a name="Top"></a>
34 <div style="border: 1px solid #ff0000; height: 1000px"></div>
35 <div id="TargetTOP"><a href="#Top">跳转到页面顶部</a></div>
36
37 </body>
38 </html>

 

posted @ 2010-11-16 12:51  wingle  阅读(254)  评论(1编辑  收藏  举报