七小木东

iframe的一些css效果

Mon, 30 Nov 2009 05:28:37 +0000

SCROLLBAR-FACE-COLOR: #2A024D;
SCROLLBAR-HIGHLIGHT-COLOR: #0042FF;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR:#FDFDFD;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #0042FF;
SCROLLBAR-DARKSHADOW-COLOR: #000000;（颜色当然还是换自己喜欢的了...^^）

        一、滚动条的轨迹，记作：scrollbar-track。所谓“轨迹”，指滚动条的滑动块运行时所必经的路线。
        二、滚动条的滑动块，即在它上面按下鼠标左键不放可上下或左右移动的滑动块以及滚动条两头的小方块，记作：scrollbar-face。face即滚动条的“脸”，注意它有三张“脸”：滑动条和两头的小方块。
        三、滚动条亮边框部分，记作：scrollbar-highlight。这个亮边框，和表格的亮边框概念是一样的，即左边和上边部分，滚动条的亮边框部分是指滚动条的“脸”（即滑动块和两头小方块）的亮边框。
        四、滚动条亮边框部分的外围还有一个立体修饰部分，记作scrollbar-3dlight。3d即立体的意思，它将包围在滚动条亮边框部分的外边。
        五、滚动条阴影部分，指主滑块和两头方块的阴影，位于左边和左下，记作：scrollbar-shadow。
        六、滚动条阴影部分还有一个强阴影部分，记作scrollbar-darkshadow，它包围在阴影部分的外边。
        七、滚动条两头方志标志箭头，记作：scrollbar-arrow，箭头方向为向下、向上、向左、向右。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/hellolife/archive/2006/10/08/1326028.aspx

一：几个例子——演示iframe的基本用法
例1：

不用多说了，iframe的各个属性含义如下：
width插入页的宽；height插入页的高；scrolling 是否显示页面滚动条（可选的参数为 auto、yes、no，如果省略这个参数，则默认为auto）；frameborder  边框大小；
注意：URL建议用绝对路径；传说中百DU用：
黑了88*8。。。
例2：
如果一个页面里面有框架。。随便点页面里的连接，要求在这个里打开。在iframe 中加入name=** （**自己设定）.

然后在修改默认打开模式，：网页HEAD中加上或部分连接的目标框架设为（**）.
例3:
要插入一个页面。要求只拿中间一部分。其他的都不要，代码如下：
http://www.webjx.com/"  frameborder=no scrolling=no  width=776  height=2500>
控制插入页被框架覆盖的深度 marginwidth=0 marginheight=0；控制框架覆盖上部分的深度 vspace=-170
scrolling滚动条要否（auto、yes、no）   frameborder框架的边框大小，width=776  height=2500此框架的大小。
例4:
    1、页面内加入iframe
，
scrolling表示是否显示页面滚动条，可选的参数为auto、yes、no，如果省略这个参数，则默认为auto。
　　2、超链接指向这个嵌入的网页，只要给这个iframe命名就可以了。方法是，例如我命名为aa，写入这句HTML语言，然后，网页上的超链接语句应该写为：
　　3、如果把frameborder设为1，效果就像文本框一样
　　透明的IFRAME的用法
　　必需IE5.5以上版本才支持
　　在transparentBody.htm文件的标签中，我已经加入了style="background- color=transparent" 通过以下四种IFRAME的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解：

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/BiologyPianoProgram/archive/2009/04/23/4103062.aspx

二：（难点）设置iframe框架的背景色
a.htm




本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/BiologyPianoProgram/archive/2009/04/23/4103062.aspx

三：（难点）窗口与浮动帧之间的相互控制
在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。
　　    1、在父窗体中访问并控制子窗体中的对象
　　在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。
　　现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。
　　比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：
　　
    test.htm文件代码为:
　　
　　　
　　　　

hello,my boy

　　　
　　
　　如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
　　document.myH1.innerText="hello,my dear"(其中，document可省)
　　在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
　　 2、在子窗体中访问并控制父窗体中对象
　　在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
　　如example.htm：
　　
　　　
　　　　
　　　　

hello,my wife

　　　
　　
　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
　　parent.myH2.innerText="hello,my friend"
    或者parent.document.getElementById("myH2").innerText="hello,my friend"
　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

        3:frame的一个子元素访问frame的另一个子元素
    例如：框架文件frame.html中嵌入了另外两个html文件

那么现在要在DirectoryTree.html文件中访问Search.html文件中的一个id为section的标签的innerHTML属性，则可以这样：
alert(parent.document.search.section.innerHTML),其中search是“搜索”div的id，或者：
alert(parent.document.getElementById("search").section.innerHTML),
或者也可以这样：
alert(parent.document.frames["frameSublist"].name)(这是直接访问iframe)
但是以上这些方法都不怎么好用，因为iframe不是标准HTML标签，因此这些方法总是时不时地失灵，因此最好使用下面的方法：
                                        obj = parent.document.getElementById("frameSearch").contentWindow
          obj=obj.document.getElementById("section")
                                        obj.innerHTML="大家好！"
这种方法屡试不爽，关于具体的介绍，见下面的第四节（用JS访问操作iframe里的dom完全攻略！）
　　Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。
        4:最适用的iframe内部和外部元素的访问方法（在各个浏览器中都适用，并且不会失灵，而上面介绍的那些方法中，很多用过一两次后就失灵了）
     请见下一个文本框。　　

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/BiologyPianoProgram/archive/2009/04/23/4103062.aspx

：（重重之点）用JS访问操作iframe里的dom完全攻略！
两个页面，一个页面是iframe所在页面(页面名称：iPage.html)，另一个页面是iframe属性src指向页面（页面名称：srcPage.html）。
iPage.html，里dom：

srcPage.html，里dom：

妹妹的一天

早上吃早点，中午约会吃饭，下午K歌，晚上和哥哥瞎折腾

下面讨论ie下JS是怎么操作以上两个页面，再讨论firefox的做法，最后给出兼容ie,firefox浏览器操作iframe对象的方法。
一、ie下访问操作iframe里内容
大家都知道iframe是非标准html标签，它是由ie浏览器推出的多布局标签, 随后Mozilla也支持了这个标签。(闲话，嘿嘿)
1. ie通过document.frames["IframeName"]获取它，例子：我们在iPage.html里输出srcPage.html里h1的内容，JS如下，firefox下document.frames 没有定义错误提示：
window.onload = (function () {
  alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);});
2. ie另一种方法contentWindow获取它，代码：
window.onload = (function () {
var iObj = document.getElementById(‘iId‘).contentWindow;
alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);
});
此方法经过ie6,ie7,firefox2.0,firefox3.0测试都通过，好事啊！嘿嘿。（网上一查，发现Mozilla Firefox iframe.contentWindow.focus缓冲区溢出漏洞，有脚本注入攻击的危险。
后来听说可以在后台防止这样的事情发生，算是松了口气。不过还是希望firefox新版本可以解决这样的危险。）
3.改变srcPage.html里h1标题内容，代码：
iObj.document.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘;
通过contentWindow后访问里面的节点就和以前一样了。
二、firefox下访问操作iframe里内容
Mozilla支持通过IFrameElmRef.contentDocument访问iframe的document对象的W3C标准，通过标准可以少写一个document,代码：
var iObj = document.getElementById(‘iId‘).contentDocument;
alert(iObj.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘);
alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data);
兼容这两种浏览器的方法，现在也出来了，就是使用contentWindow这个方法。
嘿嘿！操作iframe是不是可以随心所欲了呢？如果还觉得不爽，你甚至可以重写iframe里的内容。
三、重写iframe里的内容
通过designMode（设置文档为可编辑设计模式）和contentEditable（设置内容为可编辑），你可以重写iframe里的内容。代码：
var iObj = document.getElementById(‘iId‘).contentWindow;
iObj.document.designMode = ‘On‘;
iObj.document.contentEditable = true;
iObj.document.open();
iObj.document.writeln(‘‘);
iObj.document.writeln(‘‘);
iObj.document.writeln(‘‘);
iObj.document.close();
这两个对象的资料可参考：http://msdn.microsoft.com/en-us/library/ms533720(VS.85).aspx
四、iframe自适应高度
有了上面的原理要实现这个相当简单，就是把iframe的height值设置成它里面文档的height值就可以。代码：
window.onload = (function () {
var iObj = document.getElementById(‘iId‘);
iObj.height =  iObj.contentWindow.document.documentElement.scrollHeight;});
现在对JS操作iframe你已经有了全新的认识，说不定那天会因为这个有什么新的web技术名词，嘿嘿，臭美下！
PS:
1. Document.designMode ,Document.contentEditable在你这里的使用场景错了,他一般是应用在在线编辑器上的,如果你并不是开放给用户操作的话,根本没必要设置这个属性!
2. 另外之所以要用 window.onload,是因为页面加载中,iframe的加载顺序是在最后的,也就是说,在没用window.onload的情况下,在执行你那段js的时候iframe里的dom都还没加载到,这样自然是无输出的了
3. 如果是在两个不同的子域下，上面的代码需要做小的改动。
调用iframe的页面和被iframe的页面需要增加设置 document.domain 的代码，指明同一个根域即可。
参考资料：
https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla
http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx
http://www.kuqin.com/webpagedesign/20080516/8536.html
http://www.nohack.cn/jsj/safe/2006-10-05/8156.html
此外，用DOM方法与jquery方法结合的方式：
1.在父窗口中操作选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
2.在IFRAME中操作选中父窗口中的所有单选钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");
iframe框架的：
3.Try this:
$("#myid", top.document);
the top.document tells the selector to target the myid element which
exists in the topmost document (your parent page).  In order for this
to work, jquery must be loaded in the file which is viewed through the
iframe.
我的代码
$('#parentElem', top.document).append('

');
--end--

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/BiologyPianoProgram/archive/2009/04/23/4103062.aspx

五：用图片代替iframe的滚动条

用了iframe后发现滚动条不漂亮想用2个图片来代替↑↓应该怎么实现呢？
回答：用下列代码替换网页的..

文字文字文字文字文字

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
下面这段代码可以实现IFrame自适应高度，即随着页面的长度，自动适应以免除页面和IFrame同时出现滚动条。
源代码如下:

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/BiologyPianoProgram/archive/2009/04/23/4103062.aspx

transitional.dtd">

iframe css 滚动条颜色要这样定义:
------------
html {
font-size: 14px;
margin-left: 0px;
margin-top: 0px;
font-family: 宋体, Arial, Helvetica, sans-serif;

    scrollbar-face-color:#A7C4EA;
    scrollbar-base-color:#F5F5F5;
    scrollbar-arrow-color:black;
    scrollbar-track-color:#F5F5F5;
    scrollbar-shadow-color:#EBF5FF;
    scrollbar-highlight-color:#F5F5F5;
    scrollbar-3dlight-color:#8EAFE1;
    scrollbar-darkshadow-Color:#9D9D9D;

}
---------
即body改为html

Quote
HTML
Hyper Text Markup Language --超文件标记语言超文件标记语言广泛应用于国际互联网上.HTML描述了文本基准如何进行呈现,以及超级连接如何连接到另外的页面.
Quote
XHTML (Extensible Hypertext Markup Language，可扩展的超文件标记语言)，是一种标记语言，表现方式与 HTML类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于SGML的应用，非常灵活，而XHTML则基于XML，XML是SGML的一个子集。XHTML 1.0 在2000年1月26日成为 W3C 的推荐标准。
从字面上来看，xhtml比html多一个x,那么这个x其实也就是xml,为什么要加一个xml在里面？其实最根本的原因就是要让html更加结构化
标准化（因为html实在是太烂）。
ok我们回来看上面的结构树，我们在html里面定义的是body，因为html不是很标准所以这样可以生效，而在xhtml里面这样就不行了，
我看看那个图很明显，body标签本身不是根元素，只有html才是根元素，而页面的滚动条也是属于根元素的，所以这就是我们为什么
定义body没有效果的原因，因为我们定义的只是一个子原素。ok，我们知道了原理，来做一个试验如果把定义"body"或"xhtml"换成"*"，

*{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
  scrollbar-highlight-color:#fff; /*- 左二 -*/
  scrollbar-face-color:#E4E4E4; /*- 面子 -*/
  scrollbar-arrow-color:#666; /*- 箭头 -*/
  scrollbar-shadow-color:#808080; /*- 右二 -*/
  scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
  scrollbar-base-color:#D7DCE0; /*- 基色 -*/
  scrollbar-track-color:#;/*- 滑道 -*/
}

在html和xhtml都通过，因为*就是定义页面上的任何标签当然也包括了“html”这个标签。

(ps:其实与其说是html与xhtml的区别到不如说是有无XHTML 1.0 transitional doctype的区别，但是如果你把页面的
XHTML 1.0 transitional doctype去掉的话，那么这个页面就没有doctype，默认的显示方式就是html4.01,不过
你要把XHTML 1.0 transitional doctype修改成HTML 4.01 doctype同样页面定义body也不会有效果的，虽然
这个页面的标准是html 4.01)

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ikmb/archive/2009/02/24/3932813.aspx

理解position:relative 与 position:absolute

Wed, 18 Nov 2009 01:54:44 +0000

position 有三个值，static（静态）、relative（相对）、absolute（绝对）；由于static是所有页面元素的默认值，因此设置元素的定位类型时几乎不用这个值，除非用于覆盖之前的定义。对于后两者，一般应用：在一个相对定位的元素里面放置一个绝对定位的元素，
　　子元素B可以通过top、right、bottom、left来精确定位，定位的参考目标就是其具有相对定位属性的父级元素A；并且设置这些偏移后，产生的空隙会被后面的元素填充（如果后面的元素足够尺寸的话）。由于B元素具有absolute定位属性，相当于从文档流中抽取出来，浮动在原平面排版上，形成“层”，如果有多个“层”，层与层之间就必然会有谁覆盖谁，谁在上谁在下的竞争关系，因此，为解决这个竞争，就产生了 z-index（空间坐标系的Z轴）属性，谁的值大，谁就在上面。另外，如果父级元素A没有设置relative，那么B元素就会以body标签当作参考点。

　　对于具有position:relative属性的元素A，其top、right、bottom、left四个方向的位置偏移就会以该元素的原来位置作为参考点，而不是像上面说的，以具有relative定位属性的父级元素或body作为参考点。在设置了偏移后产生了空隙，其周围的元素并不会填充这些空隙，即使它们足够尺寸(演示)。

　　值得注意的是，此时元素A的margin，margin将作用于该元素的原来位置，由于原位置产生偏移，该元素的最终位置将是margin与top、right、bottom、left共同作用后的位置，并且其周围元素的位置也将产生影响。

　　回过头来再看看 relative 里面的 absolute，比如上面的A、B两个元素，如果两个元素都设置了top、right、bottom、left，对于元素B来说，其位置偏移的参考点是元素A偏移后的位置，不是元素A的原位置，同样，如果元素B有margin，其参考点也是元素A偏移后的位置，这点很重要，这才是absolute的概念 (演示)。

=======================================================

用Div+CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。 Position属性有四个值： static、fixed、absolute和relative，后面两个在布局中的定位里是经常用到的，顾名思义，absolute是指绝对定位，即将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位，而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。ralative是指相对定位，就是依据left，right，top，bottom等属性在正常文档流中偏移位置。
　　但是，怎么个绝对法，又怎么个相对法呢？以前我一直没有仔细去研究它，到具体应用时有时会有点迷糊，我相信很多朋友也会有这样的问题。今天我特意测试了一下，得出了以下结论：
1、当Position属性值为Relative时
对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置
Top的值表示对象相对原位置向下偏移的距离
bottom的值表示对象相对原位置向上偏移的距离
两者同时存在时，只有Top起作用。
left的值表示对象相对原位置向右偏移的距离
right的值表示对象相对原位置向左偏移的距离
两者同时存在时，只有left起作用。
2、当Position属性值为absolute时
对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来
Top的值表示对象上边框与浏览器窗口顶部的距离
bottom的值表示对象下边框与浏览器窗口底部的距离
两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。
left的值表示对象左边框与浏览器窗口左边的距离
right的值表示对象右边框与浏览器窗口右边的距离
两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。
　　在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。

内嵌框架—X轴隐藏方法

Wed, 22 Jul 2009 06:53:54 +0000

内嵌框架—X轴隐藏方法

最近在用dreamwear做网页时,用到内嵌框架时,发现不能达到隐藏水平滚动条而保留垂直滚动条的效果.

于到到网上查找相关的资料,发现这方面的都没有一个完美的解决方案,于是只好自己结合一下他们说的一

些知识,后来还是做出来了.

第一步,在相要加入内嵌框架的表格中,插入以下的html标签.

marginheight=5 marginwidth=2 scrolling=yes>

简单说明一下吧
…… 这是框架的html标签
src="链接的网页的路径" 链接的网页的路径，是站点的话，就用相对路径（推荐，做网页先建个

站点）。
name="main" 说明框架的名字叫main，你也可以自己取其它的名字。

frameborder=no
vspace=0
hspace=0
width=585 这几个是对框架的宽度和高度的一些设置，大家根据须要，自行修改
height=562
marginheight=5
marginwidth=2

scrolling=yes 这个是滚动条的设置项，软件只有三个参数。no yes auto （或用数字

表示），效果分别为不用滚动条，一定用滚动条，系统自行调节是否用

滚动条

可是当我们，在框架的链接指向我们做好的网页后，把scrolling=auto,发现不能达到隐藏水平滚动条而

保留垂直滚动条的效果，通过把内嵌的网页宽度像素改小了也不行。

好，下面就告诉大家如何来实现这个效果。

在中加入以下的属性值：
，这样就可以达到了我们想要的效果了，会点

英语的都应该用看懂的，这里把—X轴隐藏了，大家还可以把-Y轴也隐藏了，大家自己试一下就行了

我的最终的代码如下：（大家可以参考）

vspace=0 hspace=0 width=585 height=562 marginheight=5 marginwidth=2 scrolling=yes>

因为不可以抓图。就写了一大段的文字，希望大家的耐性比车轮好。OK，完成

两个idv并排列

Tue, 10 Mar 2009 08:25:38 +0000

两个层并列显示，是同底对齐的，应说明是上底对齐还是下底对齐。
上底对齐要用：float:left;

ererererer

gfgfgfgfgf

下底对齐要用：display:inline;

ererererer

gfgfgfgfgf

而且display:inline;的用法似乎是IE ONLY的。

ie与ff获得对象上的区别

Thu, 11 Dec 2008 01:57:55 +0000

1. 对象问题

1.1 Form对象
现有问题：
现有代码这获得form对象通过document.forms("formName")，这样使用在IE 能接受，MF 不能。
解决方法：
改用作为下标运算。改为document.forms["formName"]
备注
上述的改用作为下标运算中的formName是id而name

1.2 HTML对象
现有问题：
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
document.all("itemName")或者document.all("itemId")
解决方法：
使用对象ID作为对象变量名
document.getElementById("itemId")
备注
document.all是IE自定义的方法，所以请大家尽量不使用。
还有一种方式，在IE和MF都可以使用
var f = document.forms["formName "];
var o = f. itemId;

1.3 DIV对象
现有问题：
在 IE 中，DIV对象可以使用ID作为对象变量名直接使用。在 MF 中不能。
DivId.style.display = "none"
解决方法：
document.getElementById("DivId").style.display = "none"
备注
获得对象的方法不管是不是DIV对象，都使用getElementById方法。参见1.2

1.4 关于frame
现有问题
在 IE中可以用window.testFrame取得该frame，mf中不行
解决方法
在frame的使用方面MF和IE的最主要的区别是：
如果在frame标签中书写了以下属性：

那么IE可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
IE： window.top.frameId或者window.top.frameName来访问这个window对象
MF：只能这样window.top.frameName来访问这个window对象
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容

1.5 窗口
现有问题
IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是MF不支持。
解决办法
直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要传递参数，可以使用frame或者iframe。

2. 总结
2.1 在JS中定义各种对象变量名时，尽量使用id，避免使用name。
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能，所以在平常使用时请尽量使用id，避免只使用name，而不使用id。

2.2 变量名与某 HTML 对象 id 相同的问题
现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。

1. document.all
Firefox可以兼容document.all，但会生成一条警告。可以用getElementById("*") 或者 getElementByTagName("*)来代替
不过对于document.all.length等属性，则完全不兼容。
2. parentElement
这个也不兼容。比方说， obj.parentElement.name 则应改成 obj.parentNode.attributes.getNamedItem("name").nodeValue （不知道如何写得更简洁些）
3. event
W3C不支持windows.event
比方说:
在IE里面

.....

function onMenuClick()
{
collapseMenu(event.srcElement);
}
工作正常。不过在Firefox中，则改成：

function onMenuClick(evt)
{
if(evt == null)
evt = window.event; // For IE
var srcElement = evt.srcElement? evt.srcElement : evt.target; // IE使用srcElement, 而Firefox使用target
collapseMenu(srcElement);
}

IE和FIREFOX在解析CSS方面的区别
对高度的解析
IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度

Firefox：没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。

结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！

img对象alt和title的解析
alt：当照片不存在或者load错误时的提示；

title：照片的tip说明。

在IE中如果没有定义title，alt也可以作为img的tip使用，但是在MF中，两者完全按照标准中的定义使用

结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用

其他的细节差别

当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。

其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。

非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。

后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。

这只是一些简单的区别,在做布局和CSS设计时候可以综合考虑,但最为有效与简单的解决兼容问题还是用TABLE表格,表格在兼容性方面有着不错的表现.

另外在模版的JS设计的时候也需要考虑两者对代码的兼容

一段简单的图片不间断向左移动代码

Tue, 25 Nov 2008 12:27:26 +0000

新建网页 1

CSS 设计中的黄金分割率应用

Thu, 13 Nov 2008 07:35:22 +0000

希腊Web 设计师Christos Chiotis 发表在 CssGlobe 的一篇文章，讲述了黄金分割率在 CSS 中的应用。黄金分割率是一个应用广泛的数学常数，大约为 1.6180339887。黄金分割率用在 Web 设计中，可以为设计带来更多视觉上的和谐。

在一个简单的两栏式页面布局中，使用两个容器，第一个容器用来显示主要内容，第二个容器显示侧条。比如，页面宽度为 960 px，使用黄金分割率，主内容容器的宽度应该为 960 / 1.62 = 593 px，而侧条的宽度为 960-593=367 px。

作者建议，在 Web 排版与布局中可以使用以下基本 CSS 设置
line-height = font-size * 1.62
paragraph margin = paragraph line-height * 1.62 / 2
header’s margin-top = headers line-height * 1.62
不过对中文而言，至少 font-size 和 line-height 之间使用黄金分割率是不适合的，假如中文字体使用 12px 的话，最佳行高是 22px，如果字体使用 14px 的话，行高应该使用 24px 。

另一个例子，在表单中，输入框的宽度应该是标签文字的宽度乘以 1.62。而对于显示在 Web 上矩形来说，它的宽度应该是高度乘以 1.62。

这样一来，Web 设计师同时需要很好的计算能力，至少要在旁边放一台计算器，为了节省时间，作者建议在设计中随时记住一个 62/38 原则，在任何需要分割的地方，都使用 62% 和 38% 作比例。

对于需要分割成三份的场合，可以先按 62%，38%原则分成两份，再将那份大的按 62% 和 38% 的比例分割

11个设计资源和灵感的必备网站

Thu, 30 Oct 2008 14:03:01 +0000

核心提示：在这个互联网，并不是的有人都掏心掏肺让你可以真正学到东西。所以，找到一个有高质量，有内容的资源和灵感网站并不是一件容易的事。自从自己学习网页设计以来，收集了不少网站，这里，分享11必备设计资源和灵感的网站，或许，会有你一直寻找，但并未真正找到的。

1. CSS Globe - 你可以不看A list Apart，但这个我想是必备的。这样的说法多少有些争议，毕竟ALA是受大部分人推崇的。不过，这个网站总能收集到你需要的CSS技巧、JS教程、用户体验，甚至WordPress资源。

2. Smashing Magazine - 估计她的名声之大到了可以不用介绍的地步。以收集出名。当然，我是在夸奖，这个网站的质量无可质疑，可以说是篇篇精品，涉及CSS/JS/平面设计等。

3. Nettuts - 关于CSS/JS/PHP，各种关于网页设计和网页功能实现的技巧，有时候，即使你不认识CSS或者PHP，这个网站的文章都会让你实现某个功能/效果，所有讲解都非常详细。

4. Web Designer Wall - 跟Nettuts相似，内容没有Nettuts多，不过，绝对每篇精品，大多为作者自己写的，原创性比较高。主要关注网页设计与平面设计。

5. Noupe - 又一个相对比较多收集内容的网站，貌似是因为一个关于Wordpress教程系列而出名，不过，其内容远远不及这些，关注的内容大多关于网页设计的技巧。

上面介绍的都是综合性比较强的，下面介绍一些内容比较专注的网站，你想找到的，这里都有相关的顶尖资源在这里，他们要做的就是顶尖的内容：

6. Fonts500 - 500种字体，还怕找不到你想要的？不过，都是英文字体。一般情况下，需要比较特别的中文字体，都需要自己制作。

7. ColourLover - 有没有总听人说，这个主题的配色很sofish? 对，颜色可以建立一个品牌，就像一个商标一样，给网站找一套合适的配色可以让你的品牌更深入人心，而ColourLover可以帮到你。

8. LogoPond - 主题像你的衣服，而LOGO就像你的脸孔，一个成功的LOGO总是让人印象深刻，不需要多华丽，但至少要有自己的特色。看看LogoPond吧，她会给你灵感。

9. CSS Mania - 像A List Apart一样，她备受推崇，她被视为灵感的汇集地。当然，并没有那么神圣，但CSS Mania总能带来漂亮的、独具创意的网站，让你耳目一新。

10. ZCOOL -这个对于国内的设计师来说，可能相对比较熟悉。提供PNG/PSD/ESP/AI等素材，主要关注平面设计，还有JS以及一些的酷站。个人在图片素材上，经常在上面淘宝。

11. Web Design List - 最后，让我们来个大集合吧，你还想要什么呢？JS/CSS/XHTML/IE Hack/Blog程序/等，关于标准化网页设计的内容，这里有很多权威的链接提供给我。

QQ,MSN,skype,goolge TALK,雅虎通,贸易通,淘宝旺旺在线客服代码

Wed, 29 Oct 2008 09:47:48 +0000

QQ,MSN,skype,goolge TALK,雅虎通,贸易通,淘宝旺旺在线客服代码

1.如何在网页上显示腾讯QQ在线洽谈?

QQ在线咨询代码(qq在线交谈代码/qq在线客服代码/qq在线状态代码/qq在线客服代码)

(将8989215换成你的号码,site后面换成你的网站就可以了)

更多的生成显示QQ在线状态的代码,请查看腾讯官方网站

http://imis.qq.com/webpresence/code.shtml

你只需要填写你的号码,网站名称以及提示就可以点击生成就可以生成QQ在线状态的代码,拷贝生成的代码加入网页即可

2.阿里巴巴贸易通在线状态代码生成,dreamer改成你的ID就行了,还有ALT改成你的内容

更多的阿里巴巴贸易通在线状态代码生成样式,请查看阿里巴巴官方网站

http://club.china.alibaba.com/club/block/alitalk/alitalkfire.html

3.skype在线状态代码生成

将dreamer换成你的skype ID就可以了,需要在skype个人账户里设置对任何人显示状态

更多的skype在线状态代码生成样式,请查看skype的官方网站

http://www.skype.com/share/buttons/

4.生成MSN在线状态代码,替换dreamer@live.com即可

dreamer@live.com

5.雅虎通,把dreamer@yahoo.com替换成你的

6.淘宝旺旺,把dreamer替换成你的

查看官方生成代码http://www.taobao.com/help/wangwang/wangwang_0628_04.php

7. Google Talk

查看官方生成代码http://www.google.com/talk/service/badge/New

使用热门选择：元标记(Meta tags)和网页搜索

Tue, 09 Sep 2008 08:54:08 +0000

原文：Answering more popular picks: meta tags and web search
发表于：2007年12月4日，星期二，上午11时53分
http://www.googlechinawebmaster.com/2008/01/meta-tags.html

如果你能写好和维持准确的元标记（例如，描述性标题和为搜索机器人提供的信息），Google就可以更准确地爬行、索引并在搜索结果中显示你的网站。元标记为各种各样的客户端（例如浏览器和搜索引擎）提供信息。请记住，每一个客户端可能只解析对该客户端有用的元标记，而忽略了其他元标记（虽然它们有其他用处）。

下面是Google如何解析以下HTML页的元标记：

传统瑞士奶酪火锅食谱<title> Google使用此标记，网站管理员应非常注意它的准确性 <meta name="description" content="奶酪火锅是 …"> Google使用此标记，我们的搜索结果会显示它 <meta name="revisit-after" content="14 days"> Google不使用此标记，其他主要搜索引擎也不使用 <META name="verify-v1" content="e8JG…Nw=" /> 可选，Google网络管理员工具用到此标记 <meta name="GoogleBot" content="noOdp"> 可选 <meta …> <meta …> </head> <meta name="description" content="对本页的描述"> 此标记提供了对当前页面一个简短描述。在很多情况下该描述会作为页面摘要（snippet）显示在Google的搜索结果中。详情请参阅我们的博客文章“使用更好的元描述来改善页面摘要”以及帮助中心的文章“如何更改网站的标题和描述”。虽然描述元标记是可选的，并且不会影响到您的排名，一个好的描述可以产生一个更好的页面摘要，这反过来又可以帮助提高我们的搜索结果质量和你的网页的访问者数量。 <title>页面标题
从技术上讲，标题标记并不是一个元标记，它经常与"description"标记一起使用。此标记的内容（即标题）一般显示在搜索结果中（当然，当用户使用浏览器来浏览网页或察看书签时也能看到页面标题）。我们的博客文章"针对访问者，还是针对搜索引擎？"尤其是"充分利用网页标题"中有关于标题标记的更多信息。

这些元标记控制搜索引擎如何抓取和索引页。 "robots"元标记指定的规则适用于所有搜索引擎，"googlebot"元标记指定的规则只适用于Google。Google可以理解以下值（当指定多个值时，用逗号将它们分开）：

noindex: 防止网页被索引（见"使用元标记拦截或删除网页")
nofollow: 不要通过当前页的链接来寻找并抓取新的网页（也见"使用元标记拦截或删除网页")
nosnippet: 在搜索结果中显示当前页时，不要显示页面摘要（见"防止显示或删除页面摘要")
noodp: 在为本页产生标题或页面摘要时，不要使用开放式目录项目（又名dmoz.org）中的文本（见"如何更改网站的标题和描述？")
noarchive: 在显示本网页于搜索结果中时，不要显示一个"网页快照"链接（见"防止显示或删除缓存的网页")
unavailable_after:[日期]:在指定的日期和时间后从搜索结果中删除这个网页（见"机器人排除协议：现在更灵活")
当你完全省略此标记或当你指定content= "all"时，默认规则是"index, follow"。"使用robots元标记"中有关于"robots"元标记的更多信息。作为一个说明，你现在也可以在你的页面首部通过"X-Robots-标签"HTTP头指令来指定这一信息。这特别有用，尤其是当你想微调抓取和索引诸如PDF、图片或其他类型的非HTML文件时。

当我们认识到一个页面的内容并不是用用户可能想读的语言所写时，我们往往在搜索结果中提供一个链接以自动翻译你的网页。一般来说，这让你有机会提供独特和令人折服的内容给一个更广大的用户群。不过，在特定情况下，你可能不想你的网页被翻译。用这个元标记，你可以表明你不想让Google提供一个翻译此页的链接。这个元标记一般不影响该页为任何特定语言的排名。更多的信息请参阅"Google翻译常见问题解答"。

这是一个Google网站管理员工具的特定元标记，它是被用在你网站的高层页面，以在网站管理员中核实一个网站的所有者（另一种核实方法是上传一个HTML文件）。你为这个标记所设置的"content="的值是由你的网站管理员工具帐户提供的。请注意，这一元标记的content值（包括大小写）必须和你的帐户提供给你的值完全一样，这和你是否从XHTML改变标记为HTML无关，也和你标签的格式是否与你的网页相符无关。详情请见" 如何通过向网站主页中添加元标记来验证网站？"

这个元标记定义该页的内容类型和字符集。使用这个元标记时，content属性的值必须放在引号中;否则字符属性可能被错误理解。如果你决定使用这个元标记，不用说，你应该确保你的内容实际上用的是指定的字符集。"Google的网络作者统计"里有一些关于这个元标记的使用的有趣数据。

这个元标记在一定的时间后将用户指引到一个新的URL，有时它被用来作为一种简单的重定向形式。不是所有浏览器都支持这种重定向。它也可能混淆用户。对显示在搜索引擎结果中的某一页面，如果你需要改变它的URL，我们建议您使用服务器端的301重定向。此外，W3C的"网页内容易读性技巧和故障指南2.0"把它列在应该被废弃的标记中。

(X)HTML和大小写
Google既能阅读HTML式的元标记，也能阅读XHTML式的元标记（无论网页用的是哪种编码）。此外，元标记的大小写一般并不重要--我们把 and <title>看作是同样的。但是，"verify-v1"元标记是一个例外，它是区分大小写的。 revisit-after网站地图的lastmod 和 changefreq标记 偶尔，网络管理员不必要地包含了"revisit-after"标记以加快一个搜索引擎的爬行速度，不幸的是，这个元标记大多数情况下是被忽略的。如果你想让搜索引擎知道你更改页面的信息，你可以提交一个XML格式的网站地图。在该文件中，你可以说明你网站的最后修改日期(lastmod)和URL页面的改变频率(changefreq)。 如果您想要更多的例子，或有对如上所述的元标记有任何疑问，请到我们的Google网站管理员讨论组参与讨论。 </article> </main></body></html>