【转】不用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 >

 

转载于:https://www.cnblogs.com/wingle/archive/2010/11/16/1878413.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值