Come from: http://blog.sina.com.cn/s/blog_4c02e80f0100clm1.html~type=v5_one&label=rela_nextarticle
Come from: http://blog.sina.com.cn/s/blog_4c02e80f0100clm1.html~type=v5_one&label=rela_nextarticle
推荐大家一本好书《重生意义》王明道,下面是这本书的自序,附上原地址:http://www.cclw.net/soul/cszy/index.html 方便阅读,感谢主!
「重生」这个名词是大多数称为基督徒的人所熟悉的。但是真明白它的意义的人究竟有多少?真明白它的意义而且有过这种经验的人又究竟有多少?这却是一个严重的问题了。谈到重生的道理,我可以将所有称为基督徒的人分作四种:
第一种是明白重生的道理而且有过重生经验的。这种信徒是最好的。他们知道自己所站的地位,明了他们所得的恩典。他们的人生是满有指望的。他们毫不疑惑他们自己得救的事。他们过着一种与世人不同的生活。他们向别人有可作的见证,也能清楚指导别人蒙恩得救。
第二种是有过重生的经验,但不明白重生的道理的信徒。这种信徒在以往的一个时期已经得蒙重生,不过他们不明白重生的道理,他们不知道自己曾有过的那种经验就是重生的经验。一
旦有人问他们是否已经得了重生,他们或是完全不知道怎样对答,或是以为自己未曾得蒙重生。他们自己虽然有过重生的经验,但他们因为不明白的缘故,自然不免
常常怀疑自己得救的事,因而不能得着充分的平安与喜乐,也不能有坚强的盼望。他们常感忧虑,恐怕自己不能得救。他们过着一种战栗惧怕的生活。其实他们本来
不必,且不应当这样,因为他们已经有过重生的经验,他们已经得了救。他们应当因所得的救恩欢欣,应当靠主常常喜乐。可惜他们因为不明白重生的道理,所以白
白吃了许多无谓的苦。
第三种是明白重生的道理,但却未曾有过重生经验的信徒。这种人本不应当称为信徒,因为真信的人必定有过重生的经验。未曾有过这种经验的人便是未曾真信。不过他们曾加入一个教会,自以为是信徒,别人又承认他们是信徒。我们在这里姑且称他们为信徒好了。他
们听过一些人清清楚楚讲过重生的道理,或是读过什么讲解重生的道理的著作,因此明白了重生的道理。但是他们自己并末曾有过这种重生的经验。「重生」这一件
事在他们身上不是事实,乃是理论。他们明白,他们也会讲述,但他们自己总得不着其中实在的好处,也不能了解这种道理的真意思。他们不能帮助别人,这不但是
因为他们在重生的事上是门外汉,也因为别人在他们身上看不出一点重生的证据来,所以亳不羡慕他们所讲
的这种亳无实用的理论。
第四种是不明白重生的道理,也末曾有过重生经验的信徒。这种人本来也不应当称为信徒。不过他们曾加入一个教会,他们自己和别人都承认他们是信徒,我们也在这里姑且称他们为信徒就是了。
在这四种信徒中,无疑第一种是最好的,我们都肯定他们是信徒。第二种信徒虽然不及第一种,但他们究竟是重生了的人,是神的孩子,是蒙恩得敉的。不过他
们因为不明白的缘故,失去许多信徒当享的权利,也不能多帮助人就是了。他们只要有一日明白了重生的道理,便可以与第一种信徒完全相同。第三种却与前两种大
不相同。他们虽然明白重生的道理,但末曾有过重生的经验。他们是未曾得救的人,未曾得着新的生命。他们所明白的道理不但与他们亳无益处,而且反倒很容易使
他们自满自欺。他们以为明白了重生的道理便可算已经得了重生,这种错误的观念或者竟致使他们不再追求重生的经验,
这比不明白重生道理的,更多一些危险。第四种与第三种人所差无几,这两种人同是未曾重生的人,也站在同一的地位。所不同的不过是前一种人,头脑里多有一些
圣经里的知识,后一种缺少这一些知识罢了。
不知道您是否留意了,浏览http://dancewithnet.com时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉。当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{position:fixed}来实现的,通过它可以让HTML元素脱离文档流固定在浏览器的某个位置。
实现代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
......
<style type="text/css">
#fixed{position:fixed;top:5em;right:0;......} 针对IE7、Opera、Firefox一行搞定
</style>
IE6中利用容器对溢出内容的处理方式来实现的
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
fixed元素的绝对位置是相对于HTML元素来说,滚动条是body元素的,这是设置right:17px的原因
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
#fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
......
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
代码演示1(单个IE,纯粹通过条件注释区分IE浏览器)
代码演示2(多个IE,通过条件注释+CSS hack区分IE浏览器,明显的比纯粹条件注释复杂且不易读,放上来主要是便于同个PC拥有多个IE浏览器朋友[一般应该做是web开发的]可以直接看到效果,下同。)
或许有人像我一样,在!DOCTYPE 声明是XHTML1.0 Strict或者是XHTML1.1时,喜欢在声明前面加上XML Prolog(如:<?xml version="1.0" encoding="utf-8"?>),但此时IE7以下都处于quriksQuirks(兼容)模式,所以上述针对IE6的Hack失效,这个时候你可以对IE6也通过expression来实现。
当IE6处于quriks模式时,IE6和IE5.5对CSS解析方式几乎雷同,所以当看到《position:fixed for Internet Explorer》时,我找到了在quriksQuirks模式下IE6/IE5.5/IE5统一的CSS解决方案:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
......
<!--[if lt IE 7]>
<style type="text/css">
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
......
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
代码演示3(单个IE,纯粹通过条件注释区分IE浏览器)
代码演示4(多个IE,通过条件注释+CSS hack区分IE浏览器)
对比两个纯粹的CSS hack发现,两个原理似乎相同,在于html元素和body元素的应用和对CSS的{position:fixed}的支持程度上,但是这实际上是一种Hack,基本上不具备通用性,知道这个方法就可以了。需要提醒的是IE6 standards-compliant模式下HTML元素不管给它设置什么样的高度和宽度,它的大小都始终充满整个浏览器的可视区域,而IE5 以及 Quirks 模式下html元素和body元素所有宽高设置都会被忽略而保持充满浏览器的可视区域,更多内容请看《IE 中的 html 元素》
或许有人会想,现在可以引入了XML Prolog又能用纯CSS方法解决了IE7以下的问题,这下爽了,但是加上XML Prolog后突然发现IE6处于quriksQuirks模式,以前在standards-compliant模式下的设计又变形了,呵呵,这就是咱们搞IE的下场。
Come from: http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/
定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。
定位的定义:
在CSS中关于定位的内容是:position:relative | absolute | static | fixed
static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute 脱离文档流,通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
fixed 固定定位,这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
CSS中定位的层叠分级:z-index: auto | namber;
auto 遵从其父对象的定位
namber 无单位的整数值。可为负数
定位的原理:
可以位移的元素 (相对定位)
在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实的位移,因为,那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left(下称TRBL,TRBL可以折分使用。)针对一个相对定位的元素所产生的。我们看下面的图:
我们看图中是一个宽度为200px,高度为50px,margin:25px; border:25px solid #333; padding:25px; 相对定位的元素,并且位移距上50px,距左50px。而下方是一块默认定位的黑色区块。我们看到这个处在文本流的区块被上面的相对定位挡住了一部分,这说明:“当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流”。除非设置其z-index值为负值,但是在Firefox等浏览器中z-index为负值时将不会显示。并且我们发现当相对定位元素进行位移后,表现内容已经脱离了文本流,只是在本文流中还为原来的相对定位留下了原有的总宽与总高(内容的高度或是宽度加上margin\border\padding的数值)。这说明在相对定位中,虽然表现区脱离了原来的文本流,但是在文本流中还还有此相对定位的老窩。这点要特别注意,因为在实际应用中如果相对定位的位移数值过大,那么原有的区域就会形成一块空白。
并且我们注意,定位元素的坐标点是在margin值的左上边缘点,即图中的B点。那么所有的位移的计算将以这个点为基础进行元素的推动。当TRBL为正值时位移的方向是内聚的,由些可推,当TRBL为负值时位移的方向是外放的。在图片有位移的箭头指向标识,带有加号的是正值位移方向,带有减号的是负值位移方向。关于位移方位,可以延伸阅读怿飞的《由浅入深漫谈margin属性(一)》
可以在任意一个位置的元素 (绝对定位)
如上所述:相对定位只可以在文本流中进行位置的上下左右的移动,同样存在一定的局限性,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这就好比一个打工的人他到了外地,但是在老家依然有一个专属于他的位置,这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来,如果希望文本流抛弃这个部分就需要用到绝对定位,绝对定位不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位,这就好比是一个工厂里的工人,如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素处在任何一个位置。在父层position属性为默认值时,TRBL的坐标原点以body的坐标原点为起始。看下图:

上图可知,文本流中的内容会顶替绝对定位无素的位置,一点都不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中,定位元素将会跑到网页的左上角,因为那里是他们的被绝对定位后的坐标原点。
被关联的绝对定位
上面说的是单一的绝对定位,而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性,但是又希望绝对定位的坐标原点可以固定在网页中的某一个点,当这个点被移动时绝对位定元素希望能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动,而并且是因定在网页的某一个固定位置。通常当网页是居中形式的时候这种效果就会显得特别的重要。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位。那么绝对定位的坐标就会以父级为坐标起始点。
虽然是如此,但是这个坐标原点却并不是父级的坐标原点,这是一个很奇怪的坐标位置。我们看一下模型图示:

我们看到,这个图中父级为黑灰色区块,子级为青色区块。父级是相对定位,子级是绝对定位。子级设置了顶部位移50个像素,左倾位移50个像素。那么我们看,子级的坐标原点并不是从父级的坐标原点位移50个像素,而是从父级块的padding左上边缘点为坐标起始点(即A点)。而父级这里如果要产生位置移动,或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。
这是一种很特别并且也是非常实用的应用方式。如果你之前对于定位的控制并不自如的话,相信看完对这里对定位的解释一定可以把定位使用得随心所欲。
总在视线里的元素 (固定定位)
由于广告的滥用,使得一些浏览器软件都开始有了广告内容拦截,使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果,这个元素属性就是曾经不被支持的position:fixed; 他的含义就是:固定定位。这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。
虽然原来的浏览器并不支持过个属性,但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性。并且通过CSS HACK来让IE6都可以实现这样的效果(目前无法使IE5.x)实现这种效果。为了不使本文变成冗长的大论这里只给出这个实例算是这篇文章的结束。关于这个实例的一些问题大家可以自行分析。有不理解的地方可以给我留言!
Come from: http://andymao.com/andy/post/70.html
Come from: http://www.jkme.cn/post/64.html
Come from: http://bokee.shinylife.net/blog/article.asp?id=455
<script>
function ClassA()

{
this.a='a';
}
function ClassB()

{
this.b='b';
}
ClassB.prototype=new ClassA();
var objB=new ClassB();
for(var p in objB)document.write(p+"<br>");
</script>
<script>
function ClassA()

{
this.a='a';
}
function ClassB()

{
this.b='b';
}
ClassB.prototype=new ClassA();
var objB=new ClassB();
alert(objB.a);
ClassB.prototype.a='changed!!';
alert(objB.a);
</script>
<script>
function ClassA()

{
this.a='a';
}
function ClassB()

{
this.b='b';
}
ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
objB1.a='!!!';
alert(objB1.a);
alert(objB2.a);
</script>
<script>
function ClassA()

{
this.a=function()
{alert();};
}
function ClassB()

{
this.b=function()
{alert();};
}
ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
alert(objB1.a==objB2.a);
alert(objB1.b==objB2.b);
</script>
<script>
function ClassA()

{
alert("a");
this.a=function()
{alert();};
}
function ClassB()

{
alert("b");
this.b=function()
{alert();};
}
ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
</script>
<script>
function ClassA()

{
this.a=[];
}
function ClassB()

{
this.b=function()
{alert();};
}
ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
objB1.a.push(1,2,3);
alert(objB2.a);
//所有b的实例中的a成员全都变了!!
</script>
//类的继承-海浪版
Function.prototype.Extends = function (parentClass)

{
var Bs = new Function();
Bs.prototype = parentClass.prototype;
this.prototype = new Bs();
this.prototype.Super = parentClass;
this.prototype.constructor = this;
}Come from: http://www.cnblogs.com/goody9807/archive/2007/04/16/715109.html