SKIN BY JC.King & ChuanYe
  • 原理:锚点
    来实现 内容的切换。
    当点击链接时候,会先去页面上找诸如<a>的name的属性,如果没有
    就会寻找页面上ID为此锚点的元素,马上会定位匹配锚点的元素的顶部。

    <style>

    *{padding:0;margin:0;}

    #section{width:250px;}

    li{list-style:none;}

    #content-slider{width:252px;height:202px;overflow:hidden;}

    #content-slider-inside li{width:250px;height:200px;} 

    #content-slider li{background:#eee;border:1px solid #333;}

    #navigation li a{background:#eee;border:1px solid #333;width:20px;margin-right:5px;float:left;text-align:center;margin-top:5px;display:inline-block;}

    </style>

    <div class="section">

           <div id="content-slider">

                <ul id="content-slider-inside">

                    <li id="one">1</li>

                    <li id="two">2</li>

                    <li id="three">3</li>

                    <li id="four">4</li>

                    <li id="five">5</li>

                </ul>

            </div>

     

            <ul id="navigation">

                <li><a href="#one">1</a></li>

                <li><a href="#two">2</a></li>

                <li><a href="#three">3</a></li>

                <li><a href="#four">4</a></li>

                <li><a href="#five">5</a></li>

            </ul>

        </div>

    </div>

     

  • 在豪哥空间上看到的一文:

    有个朋友同男朋友分手后,向我诉苦,哭的很伤心。
    我问她,既然这么难过,当初为什么还要分手?

    她说:我们经常吵架,为了一点小事,他不懂的让我,固执己见。
    他一点都不浪漫,从没有送花给过我,也不曾说过甜蜜的话。我最受不了他对除了我以外的女生好,就算他们只是普通朋友,我也会介意。
    而且,我发现他没有以前恋爱时那么宠我了,我感觉他的朋友现在比我还重要……

    我说,既然他有那么多的缺点不被你接受,为什么当初还要选择在一起?那么现在你们分手后,你是不是真的感到解脱?

    朋友哭的更凶。
    她说:其实我有想过以后嫁给他。
    我们在一起时想过很多以后,我们结婚以后去哪里旅行、我们以后的房子、还有我们以后孩子的名字…他对我不是不好,我也很爱他。
    可是我真的受不了了,我想找个一心一意疼我宠我的男朋友,这样有错吗?我想要一场美丽的爱情不是每天的争吵。

    她说:如果我们晚一点遇见多好,等我们彼此都变得成熟,学会包容再相遇,我一定会嫁给他。

    是啊,在最美丽的时刻相遇,不如在最恰当的时机相遇 。
    或许最终陪着我们相守到老的人,并不是那个曾让我们爱的刻骨铭心,许诺非他不嫁(娶)的人。
    或许我们寻寻觅觅了那么久,认真付出了那么多次,而最后选择的爱人不是那个最让我们感动的,最适合我们的人。
    可是他出现在了最对的时机,出现在我们几近绝望,无心再爱的时刻。
    不是不想再爱,只是早已没有了当初的热情和力气。

    相爱却无法在对的时间相遇。
    正如别人所说:我们错过了诺亚方舟、错过了泰坦尼克、错过了流星雨…错过了一切惊奇与不惊奇。归根结底是错过了对的时间,对的人。
    一错,便是一生。

    你会在冬天熬夜为他织围巾;夜里偷偷躲在被窝给他发短信。
    他也会跑很远的路为你买你爱吃的零食;
    情人节傻呼呼的送花给你;笨手笨脚的为你擦眼泪…
    你们曾一起并肩走过很多地方。公园、街道、电影院。
    牵手、拥抱、或者亲吻。

    你们曾爱的刻骨铭心,两情相悦,把彼此当作唯一。
    可是你们的爱依然需要接受时间的成全和考验。

    莎士比亚说:相爱容易,相守难。
    现实总是太残忍,人却总是后知觉.

    也许一年前你还在为你刚逝去的爱情,难以释怀。
    你哭着说,这个世界上没有人会比你更爱他,离开了他你不知道该怎么生活。
    而一年后,却与别人十指相扣,相笑无语,不曾再记起当初让你流泪的那个男孩。

    正如那首歌唱的:当初哭着分不开,现在却能用微笑释怀。


    如果十年后我们才相遇,我一定嫁给你。
    而现在,我们提前认识了十年,就注定要用这一生的幸福来换取这段不成熟的青春记忆。

    如果,我们能撑过这种无法成为大人,也无法倒退为小孩的时光痛苦。
    那么不管多远的未来,我都不会放开他的手。

    只怪我们太年轻,想要爱却给不了彼此想要的未来。

    或许,多年以后那个曾说爱你一辈子的人,会为另一个女孩子的无名指上带上戒指。
    又或许,你们早已形同陌路,在各自的世界里安好无比,再无瓜葛。

    张爱玲说:因为爱过所以慈悲,因为懂得,所以宽容。
    而现在,我们在还没有学会慈悲和宽容的时刻相遇。
    即使多么努力,多么辛苦的爱着,也未必能走到最后。

    而后来的后来。
    等我们已为人夫人妇,等我们脱掉这层青春的壳。
    再回想起那段最浪漫的日子,那个记忆里倔强的影子。
    纵然再也记不起他的脸,却还是会心痛。

    你曾说会爱我一辈子,说认识我是最幸运的事。
    你可还记得?
    如果,现在陪在你身边的人是我,你是不是更快乐一点。
    如果,当初我们能再成熟一点,再包容一点。 
    是不是真的能相守一生?

    我可以挥手告别那个爱幻想的年纪,却无法忘记曾经多么辛苦的爱过你。
    因为太过于在乎.太过于心痛。
    所以,以后的以后。
    我们绝口不提过去。

    Without love,what is life!


    真的,
    可惜不是你,陪我到最后。

    如若,许多年后,我未嫁你未娶,我们会不会在一起?

    其实, 
    未必。
    因为我们都忘了有一个成语叫:时过境迁、物是人非。

     

  • 问题描述: 默认情况下,table的单元格td的display为table-cell,在IE给td设置position:relative,然后给它包含的一个容器使用position:absolute进行定位是有效的,但在FF下却不可以。 发生条件: 1. IE和FF浏览器 2. 使用td默认样式,设置td的position:rela

    问题描述:

    默认情况下,table的单元格td的display为table-cell,在IE给td设置position:relative,然后给它包含的一个容器使用position:absolute进行定位是有效的,但在FF下却不可以。但是在IE下,position:absolute的容器的z-index总是比td的z-index低,td层总是在position:absolute的容器的上面

    发生条件:

    1. IE6、IE7、IE8和FF浏览器
    2. 使用td默认样式,设置td的position:relateve,再给td内的容器设置position:absolute定位

    原因分析:

    1. 在FF中position:relative要与display:block或inline-block才能生效,display:block或inline-block可以是默认块元素,或是被定义的元素。

    2. 而在IE中position:relative除了与display:block或inline-block可以生效外,与display:table-cell、table等都可以

    display:inline-block;" >

       

     

      

     


    转:http://hi.baidu.com/woshuaixiaoxin/blog/item/3eb76a837d1f34b70df4d227.html

     

     


  • 1
    、官方的检查机制有些问题。背景色与字体色相同的情况下会有错误提示。这是不合理的检测报错机制。
     

    2、图片的 alt="" 属性必须每张图片都加上,而且对齐属性用CSS来定义。不加不能通过XHTML 1.0的验证。 

    3、每个文档必须加上DTD声明。
    <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    去掉后能通过验证,但有警告:No DOCTYPE found! Checking with default XHTML 1.0 Transitional Document Type.

     

    4RSSXML通过时其中的域名地址必须与检测的地址一致,否则会报错。
    因为有两个域名在使用,所以代码中曾经用www.guanzhichina.com,实际页面是www.setcn.com,这样就出错了。
     

    5<a>标签的链接属性加上JAVASCRIPT事件时必须为#空链,不能为javascript:;javascript:void(null); 

    6、在同一个页面当中,同名的ID会产生冲突。所以以ID定义样式的必须改成类引用。

    7、不可省略双引号或单引号。(这个是指属性,标准是双引号~单引号也能通过验证。) 

    8、标签之间不可错位嵌套。
    <div class="className">链接:<a href='#'>官方网站</div></a>这是不允许的。 

    9、所有的标签都使用小写。
    <div>ok
    <DIV>NO
    ,提示错误为:

     10FLASH的标签代码中不能含有<embed>,必须采用其它的方法实现。 

    11、所有的标签中含有的属性必须有值(官方的说法)。
    这里说的意思是,如果应用到某个属性,这个属性就比如赋予值,比如
    width="12",不能在标签中出现width=""
    但是对于<img src="cas.jpg" width="193" height="94" alt="" width=""/>一样能通过W3C的验证来说,又矛盾了。

     

    12、标签必须配对完成,单标签必须以/关闭。
    <br>no
    <br />YES
    。并且<br/>也能通过,但不规范。

     13JSCSS外部引入文件必须加上类型定义。

    <script>CDFooter();</script> NO
    <script type="text/javascript">CDFooter();</script> YES

     
    14
    、所有的样式全部写在外部文件。用类名定义。在使用的地方引用。


    15
    、页面上的一些特殊字符必须用HTML代码来标识.如“&”写成&amp; 

     

    一、如果你的html是手写的,千万别把单词拼错,我有一次把content拼成了contact,相当低级的错误。 

    二、闭合所有标签。

    1.   input标签也要以/结尾,<input type="text" name="size" id="size" value="" size="10" />

    2.   <br />

    3.   <img src="" alt="" />

     三、如果<form></form>配合<table></table>使用,要把<form></form>写在外面。

    <form>
    <table>
    <tr>
    <td></td>
    </tr>
    </table>
    </form>

    四、有些标签已经过时了,哪怕它非常方便,好比下面的<font>

    <font color="red"></font>

    五、参考二.3,完整的图片标签应该是<img src="" alt="" />alt属性是必须的,别忘记结尾的/,其中onloadjavascript属性是不行的。

    六、注意插入flash的代码,很多flash代码可能无法通过验证,尤其当代码中存在一些参数的时候,这时候可以用flash+xml的代码,或者将flash代码转换成js代码。

    七、记得选择正确的文件编码和文件类型(Document Type)。

  • 转:http://toysen.blog.163.com/blog/static/3573917201152115348860/

    网站优化(seo)中,提到过网站样式的优化,即在网站的布局设计中,采用DIV+CSS来布局。网站制站中,我们经常要把两个并排显示的div实现一样高的效果,即每列高度(事先并不能确定哪列的高度)的相同,有以下几种方法(方法来源来互联网):
           1
    JS实现(判断2div高);
           2
    、纯css方法;
           3
    、加背景图片实现。

     div+css
    基本布局:
    <div id="mm">
    <div id="mm1"></div>
    <div id="mm2"></div>
    </div>

    1
    js实现div自适应高度

    代码如下:
    <script type="text/javascript">
    <!--
    window.onload=window.onresize=function(){
    if(document.getElementById("mm2").clientHeight<document.getElementById("mm1").clientHeight){
    document.getElementById("mm2").style.height=document.getElementById("mm1").offsetHeight+"px";
    }
    else{
    document.getElementById("mm1").style.height=document.getElementById("mm2").offsetHeight+"px";
    }
    }
    -->
    </script>
    (
    注:网上公布了不少方法,但代码或多或少有错;上面的是无错代码;上面的代码在IE6.0/IE7.0下通过,并没有在operafirefoxs下测试。)

    2
    、纯CSS方法
    CSS实现侧边栏/分栏高度自动相等
    这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的CSS代码如下(数值不固定):

    margin-bottom:-3000px; padding-bottom:3000px;
    再配合父标签的overflow:hidden属性即可实现高度自动相等的效果。

    举个简单的实例吧,如下CSSHTML代码:

    #content{overflow:hidden;}
    .left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background:#cad5eb; float:left;}
    .right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;}
    .center{margin:0 410px 0 210px; background:#ffe6b8; height:600px;}

    <div id=content>
        <div class=left>
    左边,无高度属性,自适应于最高一栏的高度</div>
        <div class=right>
    右边,无高度属性,自适应于最高一栏的高度</div>
        <div class=center>
    中间,高度600像素,左右两栏的高度与之自适应</div>
    </div>

     

    3、加背景图片------这个方法,很多大网站在使用,如163sina等。

    XHTML
    代码:
    <div id="wrap">
    <div id="column1">
    这是第一列</div>
    <div id="column1">
    这是第二列</div>
    <div class="clear"></div>
    </div>

    CSS
    代码:
    #wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
    #column1{ float:left; width:300px;}
    #column2{ float:right; width:476px;}
    .clear{ clear:both;}

  • IE6双倍边距bug

    当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况。如外边距设置为10px,而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug。

    3像素问题及解决办法

    当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高的话,请参考例29、31的解决方法。

    当子元素浮动且未知高度时,怎么使父容器适应子元素的高度?

    这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容IE6而使用的CSS HACK。zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持

  • 感觉很是迷茫...

    高中的几个同学的,皆依依下海。昨日与一刚辞去工作的同学聊...感慨很多

    感觉现在的自己,在等。。。等什么呢。自己也不知道

    现在的工作上不去,所以没有太多动力。也就这么混着

    下一步该怎么走?

    未来又该何去何从?

    问号太多的太多...


    耳塞里放出韩红的<天亮了>,无意想起第一次听这歌是在高一的音乐课上,

    音乐老师那个时候看来是个美女,当然现在看来也是 fashion lady.

    高一是读书生涯中相当难忘的一年

    四个人一起吵,一起跑串在那破旧的庆中


    早上垒球还发消息说四月初雪鸡带女儿上她那玩,

    前几日我脑中也有想去趟她那的想法,

    希望能有空去,毕业这么多年,未曾聚聚...


    生活一团乱,老感觉是本命年推迟了

    开年就和老姐吵

    和某人又一直都纠结不清

    或许仓促的开始就是个错...

    太多的太多每来得及想...

    随它吧

    一切皆在一个缘字


    有缘总会在一块,无缘的人又何必勉强了自己

  • meat标签的奥妙 
      META标签,是HTML语言head区的一个辅助性标签。在几乎所有的page里,我们都可以看 
    到类似下面这段html代码: 

    ----------------------------------------------- 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    </head> 
    ----------------------------------------------- 

    这就是meta标签的典型运用。meta标签有多少参数,有什么作用,为什么我们要特别重 
    视它呢?让我们一起来发掘meta标签的奥妙! 

    根据HTML语言标准注释:meta标签是对网站发展非常重要的标签,它可以用于鉴别作者, 
    设定页面格式,标注内容提要和关键字,以及刷新页面等等。 

    meta标签分两大部分:HTTP-EQUIV和NAME变量。 

    ●HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确 
    地显示网页内容。常用的HTTP-EQUIV类型有: 

    1.expires(期限) 
    说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅。 
    用法:<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 
    注意:必须使用GMT的时间格式。 

    2.Pragma(cach模式) 
    说明:禁止浏览器从本地机的缓存中调阅页面内容。 
    用法:<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
    注意:这样设定,访问者将无法脱机浏览。 

    3.Refresh(刷新) 
    说明:需要定时让网页自动链接到其它网页的话,就用这句了。 
    用法:<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com"> 
    注意:其中的5是指停留5秒钟后自动刷新到URL网址。 

    4.Set-Cookie(cookie设定) 
    说明:如果网页过期,那么存盘的cookie将被删除。 
    用法:<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx; 
    expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/"> 
    注意:必须使用GMT的时间格式。 

    5.Window-target(显示窗口的设定) 
    说明:强制页面在当前窗口以独立页面显示。 
    用法:<META HTTP-EQUIV="Window-target" CONTENT="_top"> 
    注意:用来防止别人在框架里调用你的页面。 

    5.Content-Type(显示字符集的设定) 
    说明:设定页面使用的字符集。(我们在前面字体设计中已经介绍过它的作用) 
    用法:<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 


    ●meat标签的NAME变量语法格式是: 
    <META NAME="xxx" CONTENT="xxxxxxxxxxxxxxxxxx"> 
    其中xxx主要有下面几种参数: 

    1.Keywords(关键字) 
    说明:keywords用来告诉搜索引擎你网页的关键字是什么。 
    举例:<META NAME ="keywords" CONTENT="life, universe, mankind, plants, 
    relationships, the meaning of life, science"> 

    2.description(简介) 
    说明:description用来告诉搜索引擎你的网站主要内容。 
    举例:<META NAME="description" CONTENT="This page is about the meaning of 
    life, the universe, mankind and plants."> 

    3.robots(机器人向导) 
    说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。 
    CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。 
    举例:<META NAME="robots" CONTENT="none"> 

    4.author(作者) 
    说明:标注网页的作者 
    举例:<META name="AUTHOR" content="ajie,ajie@netease.com"> 

    以上是meta标签的一些基本用法,其中最重要的就是:Keywords和description的设定。 

    为什么呢?道理很简单,这两个语句可以让搜索引擎能准确的发现你,吸引更多的人访问 
    你的站点! 

    根据现在流行搜索引擎(Lycos,AltaVista等)的工作原理,搜索引擎首先派出机器人自动 
    在www上搜索,当发现新的网站时,便检索页面中的keywords和decription,并将其加入到自 
    己的数据库,然后再根据关键词的密度将网站排序。 

    也就是说: 
    1. 如果你的页面中根本没有Keywords和description的meta标签,那么机器人是 
    无法将你的站点加入数据库,网友也就不可能搜索到你的站点。 

    2. 如果你的关键字选的不好,关键字的密度不高,被排列在几十甚至几百万个站点的后面 
    被点击的可能性也是非常小的。 

    所以,我们必须记住添加keywords和description的meta标签,并尽可能写好关键字和简介。 

    写keywords的禁忌是: 
    1.不要用常见词汇。例如www,homepage,net,web等。 
    2.不要用形容词,副词。例如最好的,最大的等。 
    3.不要用笼统的词汇,要尽量精确。例如不用"摩托罗拉手机",改用"V998"等 

    寻找合适的关键词的一个技巧是:到lycos,Alta,infoseek等搜索引擎,搜索与你内容相仿 
    的网站,查看排名前十位的网站的meta关键字,copy下来用到自己的站点上。 

    这里,我们举一段微软多媒体网站的关键字供你参考: 
    <meta name="keywords" content="joke, music, MP3, media, audio, 
    joke of the day, downloads, free music, horoscope, radio, video, 
    music downloads, movies, radio station, media player, free, 
    download, weather, horoscopes, windows media technologies, 
    online, radio station guide, free download"> 

    小资源:人们最常用的一些搜索词(即关键词)可以到 
    http://www.searchterms.com/ 
    http://eyescream.com/yahootop200.html 
    两个网址一看,那里有每个月网上最流行搜索词的排行榜. 

    另外为了提高搜索点击率,这里还有一些"邪门歪道": 
    1.为了增加关键词的密度,将关键字隐藏在页面里(将文字颜色定义成与背景颜色一样)。 
    2.在图象的alt注释语句中加入关键字。 
    如:<IMG SRC="xxx.gif" Alt="keywords"> 
    3.利用HTML的注释语句,在页面代码里加入大量关键字。 
    用法: <!--- 这里插入关键字 --->

  •  

    function testw(){

    var  s = "";

    s += "\r\n网页可见区域高:"+ document.body.clientHeight;

    s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";

    s += "\r\n网页正文全文高:"+ document.body.scrollHeight;

    s += "\r\n网页被卷去的高:"+ document.body.scrollTop;

    s += "\r\n网页被卷去的左:"+ document.body.scrollLeft;

    s += "\r\n网页正文部分上:"+ window.screenTop;

    s += "\r\n网页正文部分左:"+ window.screenLeft;

    s += "\r\n屏幕分辨率的高:"+ window.screen.height;

    s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight;

    alert(s);

    }


     

  • 1、Ext.apply(Object obj, Object config, Object defaults ) : Object
    将config中的所有属性复制到obj中,如果配置了defaults,则先将defaults中的属性传入obj,然后再将config中属性传入,一般defaults用于定义一些默认值。
    注意:每个参数都必须是对象object,而不能是function或其他。
    创建object可以通过new function(){}、new Object()、{}等方法创建。


    2、Ext.emptyFn: Function 
    用于返回一个空函数,便于在程序中创建空函数。Ext.emptyFn返回function(){}

    3、Ext.applyIf(Object obj, Object config) : Object
    功能如同Ext.apply,但是只把config中存在而obj不存在的属性复制过去。

    4、Ext.addBehaviors( Object obj ) : void
    为页面中一个或多个元素添加事件 
    元素使用css规则查找,其中元素与事件用@隔开

    Ext.addBehaviors({
       //为id为foo的元素下的所有a元素添加click事件
       '#foo a@click' : function(e, t){
           // do something
       },
       // 为多个选择器添加相同的事件(mouseover)。在@之前使用逗号分开
       '#foo a, #bar span.some-class@mouseover' : function(){
           // do something
       }
    });


    5、Ext.id( [Mixed el], [String prefix] ) : String  
    返回一个唯一的id值。
    如果只需要获取一个唯一的id值,则直接调用Ext.id();
    如果需要为某个元素设定一个唯一的id值并返回id则调用Ext.id(el),el为元素Id、Dom对象或Ext的Element对象。
    如果需要指定特定的前缀,则需要传入第二个参数,如Ext.id(el,”myPrix-”),默认前缀为ext-gen,如默认返回id可能为ext-gen4,指定了前缀后可能返回myPrix-4。

    6、Ext.extend( Object subclass, Object superclass, [Object overrides] ) : void
    实现对象继承,目前还不太了解具体原理 ???

    7、Ext.namespace( String namespace1, String namespace2, String etc ) : void
    创建命名空间:
    如Ext.namespace("Company","MyNS.mydata","Data.format.string")
    然后可以创建如MyNS.mydata.doit=function(){…}的接口
    注:命名空间的简易调用:Ext.ns(),在Ext Api中未给出此用法。

    8、Ext.urlEncode( Object o ) : String
    将一个json对象转换称url参数串,支持通过数组为一个参数设定多个值。
    如将{a:1,b:2,c:[1,3,5,7]}转换为a=1&b=2&c=1&c=3&c=5&c=7

    9、Ext.urlDecode( String string, [Boolean overwrite] ) : Object
    将url参数串转换为json对象,overwrite如果为true,则后面的同名参数值覆盖前面的同名参数值(默认为false即不覆盖而以数组形式返回)。

    Ext.urlDecode("a=1&b=2&c=1&c=3&c=5&c=7")
    返回的对象内容为{a:1,b:2,c:[1,3,5,7]}
    Ext.urlDecode("a=1
    &b=2&c=1&c=3&c=5&c=7",true)
    返回{a:1,b:2,c:7}


    10、Ext.each( Array/NodeList/Mixed array, Function fn, Object scope ) : void
    遍历array并对每项分别调用fn函数。如果array不是数组则只执行一次。
    如果某项fn执行结果返回false(必须是false,undefined无效),遍历退出,后面的array项将不被遍历。
    遍历过程中每次为fn传入参数分别为[当前数组项],[当前索引]和[数组array]三个参数。
    Scope用于设定fn函数中的this指针。

    Ext.each([1,3,5,7],function(v,i,a){
          alert("index: "+i+" value: "+v+" array.length:"+a.length)
    });


    将循环弹出:
    index:0 value:1 array.length:4
    index:1 value:3 array.length:4  
    index:2 value:5 array.length:4  
    index:3 value:7 array.length:4

    Ext.each([1,3,5,7],function(v,i,a){
        alert("index: "+i+" value: "+v+" array.length:"+a.length);
        return v!=5;  //到第三项后遍历退出
    });



    将循环弹出:
    index:0 value:1 array.length:4
    index:1 value:3 array.length:4  
    index:2 value:5 array.length:4  

    11、Ext.combine(arg1,arg2..argn) : Array    //该方法在Ext2不推荐再使用
    用于实现对数组的合并,如果是字符串则作为只有一项的数组合并。

    var a1=[1,3,5],b1=["a","b","c"];var c1="xxyznbde";
    Ext.combine(a1,b1,c1) 返回[1,3,5,a,b,c,xxyznbde]


    12、Ext. escapeRe( String str ) : String
    将属于正则里的特殊字符进行转义。

    Ext.escapeRe("(ab)$\sa342{}[dd]")将返回\(ab\)\$sa342\{\}\[dd\]。


    13、Ext.callback(cb, scope, args, delay) :void  //该方法为Ext的内部方法
    调用一个函数或延迟调用一个函数。
    Cb:调用的函数。
    scope:cb中this指针。
    args:传如cb的参数,以数组形式表示。
    delay:延迟多少毫秒执行cb。

    Ext.callback(function(x,y){alert(x+y)},this,[3,5],1000);将于1秒钟后弹出8,即3+5的结果。


    14、Ext.getDom( Mixed el ) : HTMLElement
    根据传入的id/dom节点/Ext的Elemenet对象,返回其dom对象。
    如alert(Ext.getDom("a").innerHTML);或
    alert(Ext.getDom(document.getElementById("a")).innerHTML);
    将返回id为a的元素的innerHTML内容。

    15、Ext.getDoc()/Ext.getBody() : Ext.Element
    分别返回页面的document对象和body对象,返回值为Ext的Element对象,而非Dom对象。 

    16、Ext.getCmp( String id ) : Ext.Component
    根据传入的html元素id返回该元素的组件类型,返回值为Ext的Component对象。
    必须保证该id对象的元素是Ext的一个内部组件(通过Ext创建的组件),否则什么都不返回。

    17、Ext.num( Mixed value, Number defaultValue ) : Number
    验证value是否是一个数字,如果是则直接返回否则返回defaultValue。

    alert(Ext.num(5,7))返回5,alert(Ext.num("5",7)) 返回7


    18、Ext.destroy( Mixed arg1, Mixed (optional), Mixed (optional) ) : void
    销毁创建的Element或组件(Component),即销毁其所有的事件监听,dom节点,并调用对象本身的destory方法(如果存在的话),传入的参数类型为Ext.Element或Ext. Component,可以一次性传入多个对象进行销毁。

    Ext.destory(menu,el,Button);会销毁menu,el,Button三个对象。


    19、Ext.removeNode(htmlElement el): void  //Ext内部方法
    删除指定的dom节点。传入参数为dom对象。

    Ext.removeNode(document.getElementById("ab"));


    20、Ext.type( Mixed object ) : String
    返回传入的对象的类型。
    包括如下类型:
    string,number,boolean,function,object,array,regexp,element,nodelist,textnode,whitespace

    Ext.type("ab")返回string
    Ext.type(20)返回number
    Ext.type([3,5,6])返回array
    Ext.type(/reg/)返回regexp
    Ext.type(document.body)返回element。


    21、Ext.isEmpty( Mixed value, [Boolean allowBlank] ) : Boolean
    检查一个值是否为null/undefined或是否是空,如果是则返回true。
    如果传入allowBlank为true,则只检查是否为null或undefined。

    如:

    Ext.isEmpty("a")返回false,
    Ext.isEmpty("")返回true,
    Ext.isEmpty("",true)返回false,
    Ext.isEmpty(null)返回true。


    22、Ext.value(String v,String defaultValue[,[Boolean allowBlank]):String  //Ext内部方法
    检查v是否是为null/undefined或空,如果是则返回defaultValue,否则返回v。如果allowBlank参数为true,则允许v为空(即当v为空时不返回defaultValue而返回空)。 

     

  • xtype                  Class            

    基本组件:                                                                 

    box                    Ext.BoxComponent                      具有边框属性的组件

    button                Ext.Button                                      按钮

    colorpalette      Ext.ColorPalette                            调色板

    component       Ext.Component                            组件

    container          Ext.Container                                容器

    cycle                 Ext.CycleButton

    dataview          Ext.DataView                                数据显示视图

    datepicker       Ext.DatePicker                              日期选择面板

    editor                Ext.Editor                                       编辑器

    editorgrid         Ext.grid.EditorGridPanel              可编辑的表格

    grid                   Ext.grid.GridPanel                         表格

    paging              Ext.PagingToolbar                         工具栏中的间隔

    panel                Ext.Panel                                        面板

    progress          Ext.ProgressBar                            进度条

    splitbutton        Ext.SplitButton                               可分裂的按钮

    tabpanel           Ext.TabPanel                                 选项面板

    treepanel         Ext.tree.TreePanel                         

    viewport           Ext.ViewPort                                  视图

    window             Ext.Window                                   窗口

    工具栏组件:

    toolbar              Ext.Toolbar                                    工具栏

    tbbutton            Ext.Toolbar.Button                         按钮

    tbfill                   Ext.Toolbar.Fill                               文件

    tbitem               Ext.Toolbar.Item                            工具条项目

    tbseparator      Ext.Toolbar.Separator                  工具栏分隔符

    tbspacer          Ext.Toolbar.Spacer                       工具栏空白

    tbsplit               Ext.Toolbar.SplitButton                 工具栏分隔按钮

    tbtext                Ext.Toolbar.TextItem                     工具栏文本项

    表单及字段组件:

    form                  Ext.FormPanel Form                     面板

    checkbox         Ext.form.Checkbox checkbox       录入框

    combo             Ext.form.ComboBox combo         选择项

    datefield          Ext.form.DateField                        日期选择项

    field                  Ext.form.Field                                 表单字段

    fieldset            Ext.form.FieldSet                           表单字段组

    hidden             Ext.form.Hidden                             表单隐藏域

    htmleditor        Ext.form.HtmlEditor html               编辑器

    numberfield     Ext.form.NumberField                   数字编辑器

    radio                Ext.form.Radio                               单选按钮

    textarea           Ext.form.TextArea                          区域文本框

    textfield            Ext.form.TextField                          表单文本框

    timefield           Ext.form.TimeField                         时间录入项

    trigger              Ext.form.TriggerField                      触发录入项

    转:http://hi.baidu.com/bluelotus7/blog/item/29cff0d937d4e12b11df9b4a.html

     

  • Ext中包含了几个以get开头的方法,这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等,在使用中要注意区别使用。
    1、get方法
    get方法用来得到一个Ext元素,也就是类型为Ext.Element的对象,Ext.Element类是Ext对DOM的封装,代表DOM的元素,可以为每一个DOM创建一个对应的Element对象,可以通过Element对象上的方法来实现对DOM指定的操作,比如用hide方法可以隐藏元素、initDD方法可以让指定的DOM具有拖放特性等。get方法其实是Ext.Element.get的简写形式。

    get方法中只有一个参数,这个参数是混合参数,可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。看下面的示例代码:

    Ext.onReady(function(){
    var e=new Ext.Element("hello");
    alert(Ext.get("hello"));
    alert(Ext.get(document.getElementById("hello")));
    alert(Ext.get(e));
    });
    Html页面中包含一个id为hello的div,代码如下:
    tttt
    Ext.get("hello")、Ext.get(document.getElementById("hello"))、Ext.get(e)等三个方法都可以得到一个与DOM节点hello对应的Ext元素。
    2、getCmp方法-获得Ext组件。
    getCmp方法用来获得一个Ext组件,也就是一个已经在页面中初始化了的Component或其子类的对象,getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。getCmp方法中只有一个参数,也就是组件的id。比如下面的代码:
    Ext.onReady(function(){
    var h=new Ext.Panel({
    id:"h2",
    title:" ",
    renderTo:"hello",
    width:300,
    height:200});
    Ext.getCmp("h2").setTitle("新的标题");
    });
    在代码中,我们使用Ext.getCmp("h2").来得到id为h2的组件,并调用其setTitle方法来设置该面板的标题。
    3、getDom方法-获得DOM节点
    getDom方法能够得到文档中的DOM节点,该方法中包含一个参数,该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。比如下面的代码:
    Ext.onReady(function(){
    var e=new Ext.Element("hello");
    Ext.getDom("hello");
    Ext.getDom(e);
    Ext.getDom(e.dom);
    });
    Html:
    tttt
    在上面的代码中,Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。
    4、getBody方法-得到文档的body节点元素(Element)
    该方法直接得到文档中与document.body这个DOM节点对应的ExtJS元素(Element),实质就是把document.body对象封装成ExtJS元素对象返回,该方法不带任何参数。比如下面的代码把面板h直接渲染到文档的body元素中。
    Ext.onReady(function(){
    var h=new Ext.Panel({title:"测试",width:300,height:200});
    h.render(Ext.getBody());
    });
    5、getDoc方法-获得与document对应的Ext元素(Element)
    getDoc方法实质上就是把当前html文档对象,也就是把document对象封装成ExtJS的Element对象返回,该方法不带任何参数。

    转载自:http://hi.baidu.com/j2me/blog/item/2b07352a3114a13d5343c1c2.html

  • 【FF插件】图片压缩工具Smush it:
    http://www.smushit.com/ysmush.it/

     

    一个PNG压缩网站:
      http://www.gracepointafterfive.com/punypng/

  • 回车导致表单默认提交的解决方案

    问题:
    当form表单只有一个type为text的input输入框时,无论form中有无type为submit的input。
    input框有focus 按回车会默认表单的提交。

    解决方法:
    添加一个隐藏的input元素如下,取消默认提交的行为。若需添加回车提交form,则需keydown监听事件

    -----------------------------------------------------------------------------------------

    button标签的type属性默认值是?

    只有IE7/IE6的button标签默认值是button,其他的浏览器都是sumbit。

    Ps:小志的使用css2.1实现多重背景、多重边框效果before和:after实属强大,可惜ie7了还不支持。
         原文的地址:
    http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

    -----------------------------------------------------------------------------------------

    XHTML标准---面试必备哦

    XHTML相比于HTML

    1.所有的标记都必须要有一个相应的结束标记。

    2.所有标签的元素和属性的名字都必须使用小写。

    3.所有的XML标记都必须合理嵌套。

    4.所有的属性必须用引号”"括起来。

    5.把所有<和&特殊符号用编码表示。

    6.给所有属性赋一个值,XHTML规定所有属性都必须有一个值,没有值的就重复本身。

    7.不要在注释内容中使“–”。

    8.每个图片标签都必须有ALT说明文字。

  •  

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

    <html xmlns="http://www.w3.org/1999/xhtml"> 

    <meta http-equiv="Content-Type" charset="utf-8"/>

    <head> 

    <style type="text/css"> 

    body

    {

    }

    #outside1

    {

    border:1px solid #000;

    width:300px;

    height:100px;

    }

    #inside1

    {

    border:1px solid #f00;

    width:100px;

    height:100px;

    margin:0 auto;

    }

    #outside2

    {

    border:1px solid #000;

    width:300px;

    height:100px;

    text-align:center;

    }

    #inside2

    {

    border:1px solid #f00;

    }

    #outside3

    {

    border:1px solid #000;

    width:300px;

    height:200px;

    }

    #inside3

    {

    border:1px solid #f00;

    position:relative;

    width:100px;

    height:100px;

    top:50%;

    left:50%;

    margin-left:-50px;

    margin-top:-50px;

    }

    #outside4

    {

    border:1px solid #000;

    width:300px;

    height:200px;

    position:relative;

    }

    #inside4

    {

    position:absolute;

    float:left;

    left:50%;

    }

    #inside4 div

    {

    position:relative;

    float:left;

    clear:both;

    width:100px;

    left:-50%;

    }

    #outside5

    {

    border:1px solid #000;

    width:300px;

    height:100px;

    background:url(http://www.ilovespringna.com/test/small.jpg) center no-repeat;

    }

    </style> 

    </head> 

    <body> 

    <h1>水平居中的全家</h1> 

    <p>内层固定大小:自动外边距方式(怪异模式不支持)</p> 

    <div id="outside1"> 

    <div id="inside1">我是固定大小的块级元素</div> 

    </div> 

    <p>内联元素:text-align:center方式</p> 

    <div id="outside2"> 

    <span id="inside2">我是内联元素</span><br /> 

    <img src="http://www.ilovespringna.com/test/1.jpg" alt=""/> 

    </div> 

    <p>内层固定大小:定位方式</p> 

    <div id="outside3"> 

    <div id="inside3">我是固定大小的块级元素</div> 

    </div> 

    <p>居中浮动元素</p> 

    <div id="outside4"> 

    <div id="inside4"> 

    <div>我是居中浮动的</div> 

    <div>我是居中浮动的</div> 

    <div>我是居中浮动的</div> 

    </div> 

    </div> 

    <p>背景图片居中</p> 

    <div id="outside5"> 

    </div> 

    </body> 

    </html>

     

  •  

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

    <html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 

    <meta http-equiv="Content-Type" charset="utf-8"/>

    <title>垂直居中的全家</title> 

    <style type="text/css"> 

    #outside1

    {

    border:1px solid #000;

    width:100px;

    height:200px;

    line-height:200px;

    }

    #outside1-1

    {

    border:1px solid #000;

    width:100px;

    height:200px;

    }

    #inside1-1{  

    width:0;

    height:100%;  

    display:inline-block;  

    vertical-align:middle;  

    }  

    #outside2

    {

    border:1px solid #000;

    width:100px;

    padding:60px 0;

    }

    #outside2 p

    {

    }

    #outside3

    {

    border:1px solid #000;

    width:100px;

    height:200px;

    position:relative;

    }

    #inside3

    {

    border:1px solid #f00;

    width:100px;

    height:100px;

    position:absolute;

    top:50%;

    margin-top:-50px;

    }

    #outside3

    {

    border:1px solid #000;

    width:100px;

    height:200px;

    position:relative;

    }

    #inside3

    {

    border:1px solid #f00;

    width:100px;

    height:100px;

    position:absolute;

    top:50%;

    margin-top:-50px;

    }

    #outside4

    {

    border:1px solid #000;

    width:100px;

    height:200px;

    position:relative;

    }

    #inside4

    {

    border:1px solid #f00;

    width:100px;

    height:100px;

    position:absolute;

    top:50%;

    }

    #inside4-1

    {

    border:1px solid #0f0;

    width:100px;

    height:100px;

    position:relative;

    top:-50%;

    }

    #outside5

    {

    border:1px solid #000;

    width:100px;

    height:200px;

    line-height:200px;

    }

    #outside5 span

    {

    border: 1px solid red;

    }

    #outside5 img

    {

    vertical-align: middle;

    }

    #outside6

    {

    border:1px solid #000;

    width:100px;

    height:200px;

    text-align: center;

    }

    #outside6 span

    {

    height: 100%; /* 要保证和父元素高度一样才行 */

    writing-mode: tb-rl;

    }

    #outside7

    {

    border:1px solid #000;

    width:100px;

    height:200px;

    display:table-cell;

    vertical-align:middle;

    }

    #outside8

    {

    border:1px solid #000;

    width:100px;

    height:200px;

    position:relative;

    }

    #inside8

    {

    position:absolute;

    top:50%;

    }

    #inside8 img

    {

    top:-50%;

    position:relative;

    }

    #outside9

    {

    border:1px solid #000;

    width:100px;

    height:200px;

    line-height:200px;

    display:table-cell;

    vertical-align:middle;

    text-align:center;

    *display: block;

    *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/

    }

    #outside9 img {

    vertical-align:middle; border:0;

    }

    #outside10

    {

    border:1px solid #000;

    width:100px;

    height:200px;

    background:url(http://www.ilovespringna.com/test/small.jpg) center no-repeat;

    }

    </style> 

    </head> 

    <body> 

    <h1>垂直居中的全家</h1> 

     

    <p>单行文字居中:line-height方式</p> 

    <div id="outside1">我是一行文字</div> 

     

    <p>单行文字居中:辅助span方式(没什么用处)</p> 

    <div id="outside1-1"> 

    <span id="inside1-1"></span> 

    我是一行字

    </div> 

     

    <p>多行文字居中:padding方式</p> 

    <div id="outside2"> 

      <p>我是多行文字</p> 

      <p>我是多行文字</p> 

    </div> 

     

    <p>块级元素居中:定位</p> 

    <div id="outside3"> 

      <div id="inside3">我是块级元素</div> 

    </div> 

     

    <p>块级元素居中:定位2</p> 

    <div id="outside4"> 

    <div id="inside4"> 

    <div id="inside4-1">我是块级元素</div> 

    </div> 

    </div> 

     

    <p>图片居中:table-cell方式(不适用于ie6,7)</p> 

    <div id="outside7"> 

    <img src="http://www.ilovespringna.com/test/small.jpg" alt="" /> 

    </div> 

     

    <p>图片居中:line-height方式(不适用于ie6)</p> 

    <div id="outside5"> 

    <span><img src="http://www.ilovespringna.com/test/small.jpg" alt="" /></span> 

    </div> 

     

     

    <p>图片居中:writing-mode方式(适用于ie)</p> 

    <div id="outside6"> 

    <span><img src="http://www.ilovespringna.com/test/small.jpg" alt="" /></span> 

    </div> 

     

     

    <p>图片居中:定位方式,不知图片大小(适用于ie)</p> 

    <div id="outside8"> 

    <div id="inside8"><img src="http://www.ilovespringna.com/test/small.jpg" alt="" /></div> 

    </div> 

     

    <p>【推荐】图片居中:font-size方式(结合table-cell方式兼容主流浏览器)</p> 

    <div id="outside9"> 

    <img src="http://www.ilovespringna.com/test/small.jpg" alt="" /> 

    </div> 

     

    <p>图片居中:背景方式</p> 

    <div id="outside10"></div> 

     

    </body> 

    </html>

     

  •  

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

    <html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 

    <title>放大镜效果</title> 

    <style type="text/css"> 

    body

    {

    height:1000px;

    }

    div#test-small

    {

    float:left;

    display:inline;

    position:relative;

    }

    div#test-big

    {

    float:left;

    display:inline;

    width:200px;

    height:200px;

    border:1px solid #CEE1EE;

    padding:2px;

    margin-top:20px;

    margin-left:30px;

    }

    div#test-show

    {

    display:none;

    position:absolute;

    opacity:0.3;

    filter:alpha(opacity=30);

    width:100px;

    height:100px;

    background:#fff;

    cursor:crosshair;

    border:1px solid #666;

    }

    </style> 

    </head> 

    <body> 

    <div id="test-small"> 

    <img src="http://filer.blogbus.com/4977021/resource_4977021_1283695721d.jpg" alt="" width="400" /> 

    <div id="test-show"></div> 

    </div> 

    <div id="test-big"></div> 

    <script type="text/javascript"> 

    var test_s = document.getElementById("test-small");

    var test_show = document.getElementById("test-show");

    var test_b = document.getElementById("test-big");

    var test_url = test_s.getElementsByTagName("img")[0].getAttribute("src");

    var test_showHalfLength = 0;

    var test_maxLeft = 0;

    var test_maxTop = 0;

    var mousePos = null;

     

    test_s.onmouseover = function(){

    test_show.style.display = "block";

    test_showHalfLength = test_show.offsetHeight/2;

    test_maxLeft = test_s.offsetWidth - test_show.offsetHeight;

    test_maxTop = test_s.offsetHeight - test_show.offsetHeight;

    };

     

    test_s.onmousemove = function(e){

    e = e || window.event;

    mousePos = mousePosition(e);

    var Top = mousePos.y - test_s.offsetTop - test_showHalfLength;

    var Left = mousePos.x - test_s.offsetLeft - test_showHalfLength;

     

    Top = Top<0?0:Top;

    Top = Top>test_maxTop?test_maxTop:Top;

    Left = Left<0?0:Left;

    Left = Left>test_maxLeft?test_maxLeft:Left;

     

    test_show.style.top = Top + "px";

    test_show.style.left = Left + "px";

     

    test_b.style.background = "url("+test_url+") -"+Left*(800/400)+"px -"+Top*(800/400)+"px no-repeat";

    };

     

    test_s.onmouseout = function(){

    test_show.style.display = "none";

    test_b.style.background = "";

    };

     

    function mousePosition(ev) {

    if (ev.pageX || ev.pageY) {

    return {x:ev.pageX,y:ev.pageY};

    }

    return {

    x:ev.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - document.body.clientLeft,

    y:ev.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - document.body.clientTop

    }

    }

    </script> 

    </body> 

    </html>

     

  • HTML邮件编码规则:

    1、不要使用CSS控制格式;不能附带CSS文件或者采用方式;这些将会被大多数邮件服务商过滤;
    2、不要使用javascript,大多数邮件服务商过滤这些内容。
    3、不能使用在DIV中使用[background:url(image/images/celebra_07.jpg);]方式,163.com,126.com等邮件服务会过滤url; 请采用table/td中加background=""的方式。
    4、不要使用style="margin: 30px 0 0 210px;"来控制格式,Hotmail.com将过滤这类信息,类似替换为:style="padding: 30px 0 0 80px;WIDTH: 346px;"
    5、不要使用[ ],Hotmail.com将这类信息错误解释;
    6、尽量不使用form,21cn.com将过滤

    之间的所有内容;

    HTML的文件使用规则:  

    1、HTML文件的编码在WINDOWS下面和LINUX下面有所不同,这是发送邮件的程序设定的;WINDOWS下面使用ANSI编码,LINUX下面使用UTF-8编码;
    2、用记事本(note pad)作编码的转换工具;
    3、记事本转换的文件,开头会带一个特殊字符;应该在文件上传到服务器后,使用vi等编辑工具,去掉第一个字符。

     

    PS各邮件系统对CSS的兼容性:http://www.campaignmonitor.com/css/

    1.尽量使用table少使用div

    2.尽量使用内嵌css,少使用class

    3.避免在div中加background:url(imgUrl),使用table/td中加background=""

    4.尽量少的使用图片

  •   IE FF
    Input border-width:2px border-width:3px
    border:-style:outset border:-style:outset
    border-color:#000 border-color:#ECE9D8
    Button border:2px border-width:3px
    border-style:none border:-style:outset
    border-color:#000 border-color:#ECE9D8

    对border边框属性在浏览器中的渲染方式很早以前就开始在QQ群中看到大家在讨论,而我也一直以border:0 none;的方式处理。其中当然也是有我自己为什么要做的原因,对于这个原因在下面的分析中将会提到。在对border边框属性进行分析之前,需要说明的几点内容是:

     

    1. 小志我并不是一个分析专家,只是借助Firebug和IE developer这两个工具在FF浏览器和IE浏览器中查看浏览器的渲染结果;
    2. 因为只是查看了FF浏览器和IE浏览器的渲染结果,并不能代表所有的浏览器都是相同的方式进行渲染。

     

    为了能更好的对边框的样式进行对比,这里我们选用的是“按钮”元素,但使用的标签却是不同的,它们分别是input标签元素和button标签元素。顺带需要提到的一点就是,这两个标签元素在各个浏览器中的共同点是都属于系统控件元素,边框样式以及按钮背景都是跟系统主题有着绝对性的关系。

     

    使用相同的XHTML结构代码,分别针对FF浏览器和IE浏览器进行对比。

     

    1
    2
    3
    
     type="button" value="按钮" />
    
    />
    按钮>

    默认样式的demo:http://www.linxz.cn/demo/border_default.html

    FF浏览器中默认解析结果

    IE浏览器中默认解析结果

    通过默认的当前系统主题的样式影响,我们发现IE浏览器在对button和input这两个标签元素的解析上已经是存在着一点细节上的不同,但就目前这个系统主题中所看到的页面表现效果是近乎于相同的,关于这点有兴趣的同学可以自行实验一下。上列所看到的无任何CSS样式定义之前的属性结果中,我们得到的结果是:

    • FF浏览器:input标签和button标签的边框样式为border-width:3px; border-style:outset; border-color:#E5E5E5;
    • IE浏览器:input标签边框样式为border-width:2px; border-style:outset;而button标签边框样式为border-width:2px;

    有了这些数据之后,我们再看看当我们针对border边框属性定义了样式之后会是怎么样的一个结果。

     

    border:0;的渲染结果

     

    首先我们来看看border:0;在FF浏览器和IE浏览器中的最终渲染结果。

    1
    2
    
    input {border:0;}
    button {border:0;}

    border:0的样式demo:http://www.linxz.cn/demo/border_0.html

    FF浏览器中边框渲染后的样式

    这时我们可以通过firebug(1.5.0版本)看到样式中所显示的代码是border:0 none;而并不是我们最初所设定的border:0;也就是说FF浏览器会将边框样式解析为none(border-style:none;)。

    FF浏览器通过firebug计算出的样式结果

    通过firebug中“计算出的样式”功能我们可以看到最终的边框样式中border-width为0,border-color为#000000,border-style为none。现在我们再看一下IE浏览器中的表现是怎么样的。

     

    在IE浏览器中我们利用的是IE Developer Toolbar来查看浏览器的最终渲染结果,很明显的可以发现IE浏览器对border:0;的解析时产生了一些偏差,仅仅只是渲染了border-width的属性,而对于input标签中的border-style属性继续保持着原有的属性值outset,对于button标签中的border-style属性增加了outset属性值;border-color还是为定义。这时我们也能发现IE浏览器中input标签和button标签的边框已经被定义为相同的属性。

    IE浏览器计算出的渲染结果

    此时FF浏览器和IE浏览器之间存在的差异是border-style和border-color两个属性。

    FF浏览器与IE浏览器的渲染对比

    border:none;的渲染结果

     

    1
    2
    
    input {border:none;}
    button {border:none;}

    border:none的样式demo:http://www.linxz.cn/demo/border_none.html

    border:none;的边框定义方式,从广义上理解,其实只是定义了border-style的属性值,对于这点我们也可以从firebug中的样式可以看到边框的样式定义已经由原来的border:0 none;改成border:medium none;了,改变的内容是border-width的样式定义。

    FF浏览器中边框样式渲染

    但诡异的一点就是我们这里所看到的medium属性值却在firebug最终“计算出的样式”里看不到。

    FF浏览器通过firebug计算出的样式结果

    更诡异的内容也要出来了,赶紧打开IE浏览器看看是不是发现在页面中按钮的表现效果也不一样了?

    浏览器表现对比

    两个浏览器的中按钮在定义了边框为border:none;时居然会在浏览器中的表现方式都不一样了,这个是为什么呢?

    IE浏览器中渲染结果

    看了IE Developer Toolbar中的结果后,总算明白了,原来这个时候IE浏览器仅仅只是渲染了border-style为none,而border-width依然保持原有的属性值,所以在才会与FF浏览器产生差异。

    FF浏览器和IE浏览器表现对比

    border:0 none;的渲染结果

     

    最后剩下的是border:0 none;的边框样式定义方式,对于这个方式,经过上面的两个对比,相信大家能明白这个属性所定义的内容包含了什么,把border-width和border-style同时定义为0和none值,让边框“无处藏身”,就算有颜色值也没用了。对于这个的渲染结果就不再像上面一一罗列了,感兴趣的同学可以试试看。

     

    在结束之前再次推荐大家在取消页面元素边框的时候,尽量选择border:0 none;避免出现一些不必要的问题。顺带提示一下,在IE Developer Toolbar中右下角的那个复选框大家在测试的时候可以将其勾选,可以看到更多的默认样式值。

     

  • 比如google搜索结果页的td都是不闭合的,但它是符合标准的。之前有人发现过这个问题。那到底哪些标签可以不闭合呢.

    html4.01 strict或html5下,即doctype声明为
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <!DOCTYPE html>
    下面的标签都是可以不闭合的:
    <html>
    <body>
    <colgroup>
    <thead>
    <tr>
    <tbody>
    <td>
    <p>
    <dt>
    <dd>
    <li>
    <option>
    <tfoot> (html5下是标准的)
    转:张克军Blog

  • 没事的周末,喜欢把自己关在房间里
    厚厚的窗帘,档住窗外明亮的阳光
    紧闭的门,仍是遮不住门外时不时的一阵急促下楼声。

    突然醒来 漆黑一片
    不知是几点?
    睡了多久?
    随它了,TMD谁又关心了

    摸索着插了台灯,
    起身拿桌子上的手机看时间,
    19:35

    喝了口水
    本能的吃着中午,哦,不!是下午吃剩一半的丝瓜炒蛋(盖浇饭)
    看来,刚才买的泡面晚饭是吃不上了
    除非,夜里晚些睡,还能封它个夜宵的头衔。

    一个人的生活,
    困了才睡,渴了才,喝饿了才吃
    玩到深夜两点也没人数落你

    洗完澡,继续看《大话西游》
    一个经久不衰的片子.

  •  

    现在是讲效率的年代,使用Word来进行平时的办公处理也是一样,那么,我们怎样才能够在Word中“快”起来呢?那就请这位作者给我们带来的Word中快速操作的10个技巧,小编看完后也觉得相当实用。

    1.快速定位到上次编辑位置

    用wps编辑文件时有一个特点,就是当你下次打开一WPS文件时,光标会自动定位到你上一次存盘时的位置。不过,Word却没有直接提供这个功能,但是,当我们在打开Word文件后,如果按下Shift+F5键您就会发现光标已经快速定位到你上一次编辑的位置了。

    小提示:其实Shift+F5的作用是定位到Word最后三次编辑的位置,即Word会记录下一篇文档最近三次编辑文字的位置,可以重复按下Shift+F5键,并在三次编辑位置之间循环,当然按一下Shift+F5就会定位到上一次编辑时的位置了。

    2.快速插入当前日期或时间

    有时写完一篇文章,觉得有必要在文章的末尾插入系统的当前日期或时间,一般人是通过选择菜单来实现的。其实我们可以按Alt+Shift+D键来插入系统日期,而按下Alt+Shift+T组合键则插入系统当前时间,很快!

    3.快速多次使用格式刷

    Word中提供了快速多次复制格式的方法:双击格式刷,你可以将选定格式复制到多个位置,再次单击格式刷或按下Esc键即可关闭格式刷。

    4.快速打印多页表格标题

    选中表格的主题行,选择“表格”菜单下的“标题行重复”复选框,当你预览或打印文件时,你就会发现每一页的表格都有标题了,当然使用这个技巧的前提是表格必须是自动分页的。

    5.快速将文本提升为标题

    首先将光标定位至待提升为标题的文本,当按Alt+Shift+←键,可把文本提升为标题,且样式为标题1,再连续按Alt+Shift+→键,可将标题1降低为标题2、标题3……标题9。

    6.快速改变文本字号

    Word的字号下拉菜单中,中文字号为八号到初号,英文字号为5磅到72磅,这对于一般的办公人员来说,当然已经绰绰有余了。但在一些特殊情况下,比如打印海报或机关宣传墙报时常常要用到更大的字体,操作起来就有些麻烦了。其实,我们完全也可以快速改变文本的字号:先在Word中选中相关汉字,然后用鼠标单击一下工具栏上的字号下拉列表框,直接键入数值,即可快速改变您的字体大小。而且这个技巧在Excel和WPS 2000/Office中同样适用。

    小提示:其实,小编还有两种快速更改Word文本字号的方法:

    (1)选中文字后,按下Ctrl+Shift+>键,以10磅为一级快速增大所选定文字字号,而按下Ctrl+Shift+<键,则以10磅为一级快速减少所选定文字字号;

    (2)选中文字后,按Ctrl+]逐磅增大所选文字,按Ctrl+[逐磅缩小所选文字。

    7.快速设置上下标注

    首先选中需要做上标文字,然后按下组合键Ctrl+Shift+=就可将文字设为上标,再按一次又恢复到原始状态;按Ctrl+=可以将文字设为下标,再按一次也恢复到原始状态。

    小提示:详见本刊前期《Word XP中神奇的Ctrl键》一文,掌握一些快捷按键对快速、高效操作Word很有借鉴意义。

    8.快速取消自动编号

    虽然Word中的自动编号功能较强大,但是据笔者试用,发现自动编号命令常常出现错乱现象。其实,我们可以通过下面的方法来快速取消自动编号。

    (1)当Word为其自动加上编号时,您只要按下Ctrl+Z键反悔操作,此时自动编号会消失,而且再次键入数字时,该功能就会被禁止了;

    (2)选择“工具”→“自动更正选项”命令,在打开的“自动更正”对话框中,单击“键入时自动套用格式”选项卡,然后取消选择“自动编号列表”复选框(如图1),最后单击“确定”按钮完成即可;

    9.快速选择字体

    为了达到快速选择字体的目的,我们可以将常用字体以按钮形式放置在工具栏上。首先右击Word工具栏,选择“自定义“命令,打开“自定义”对话框,在“自定义”对话框中选择“命令”选项卡,并移动光标条到类别栏中的“字体”项,看到平时经常使用的字体,把它拖到工具栏成为按钮,以后要快速选择字体,只要先选中文本,再按下工具栏上字体按钮即可,省去了从字体下拉列表框中众多字体中选择的麻烦。

    10.快速去除Word页眉下横线

    快速去除Word页眉下的那条横线可以用下面的四种方法:一是可以将横线颜色设置成“白色”;二是在进入页眉和页脚时,设置表格和边框为“无”;第三种方法是进入页眉编辑,然后选中段落标记并删除它;最后一种方法是将“样式”图标栏里面的“页眉”换成“正文”就行了。

     

  • 在白鸦的博文中:当通道变成渠道…学了个新名词 卡壳

    qiǎ ké
     ①枪膛、炮膛里的弹壳退不出来。
     ②比喻办事等遇到困难而暂时停顿。也比喻人说话中断,说不出来:他说着说着就~了。

    不受欢迎的“欢迎页”

    不需要:
    -----欢迎页,不是欢迎你而是展示我
    -----还有人说“有个欢迎页面显得礼貌”。我无语。我感觉到更多的并非“礼貌”,而是“拒人门外”
    -----6、退一万步说,就算我们需要“欢迎页”,那么除了品牌展示我们还必须提供的就是“入口”。因为用户最终还是需要进入具体的网页里。所以,入口一定要明显且可以直接选择。比如,一些企业网站上来就放一个大动画,连“跳过”都没有,必须看完才能进去。这太强暴
    -----可口可乐的冰爽空间站很炫,但是网站进入速度很慢,到处都是导航,可是真要找自己要的东西却非常困难

    需要:
    -----介绍楼盘的地产类网站有这个必要。
    -----Q-ZONE的欢迎页我觉得还可以接受,它除了等候加载内容外,还能表达空间主人的一种情绪
    -----这东西,从有实际必要性的地方不太多,主要可能有这么几种
    1 非常强调产品性的公司需要不定期的用大尺寸动画秀点“新家伙”(假如半年都变不了一次,那索性别加;如果 小尺寸就足够演示,那不如在主页面内留些地方)…
    2 为之后的自动转向的主页面作预载反馈
    3 提供重要导航分支(如进入bbs、主站、blog…),或极大影响进入后用户体验的选择分支(比如选择语 言,浏览尺寸)
    4 整个站点就只有(或只剩)一个主要页面时:比如全站flash的想花几秒欢迎下我也不反对,又或者是主站挂了 的维护中的贴个欢迎页作安民告示…
    换个思路讲就是,何时用户看这种欢迎页时浏览其站点核心内容不构成干扰,甚至为用户带来更好的体验,那么 就可以考虑用一下,如果只为了纯粹的装点门庭那只能说是典型中国式的“面子工程”…

    -----成人网站恐怖网站都有一个欢迎页,警告你否满18岁警告你有心脏病别进,这个用法应该可行!^_^

  • 以“世界工厂网”的底部版权信息做给例子:
    © 2006-2007 Factory of  world 
    © 的意思是Copyright,版权。
    2006-2007 2006指版权开始的时间,也就是网站建设的年份。2007指此最新作品的发布年份。
    世界工厂网 为版权所有者的称呼。

    再详细的解释下具体的意义及用法:
    从法律角度看,加入了伯尔尼公约的国家,版权保护是随着作品(无论是文字,还是图片)的问世的即刻就得到版权的保护的,并不是必须要声明。但是作为惯例,这一小行文字还是有很好加强意识,提醒浏览者,所观看的内容是受到版权保护的。

    正确的格式应该是:Copyright [dates] by [author/owner]

    © 通常可以代替Copyright, 但是不可以用©。 All Rights Reserved 在某些国家曾经是必须的,但是现在在大多数国家,都不是法律上必须有的字样。

    参见下面几个正确的格式:

    ©1995-2004 Macromedia, Inc. All rights reserved.

    ©2004 Microsoft Corporation. All rights reserved.

    Copyright © 2004 Adobe Systems Incorporated. All rights reserved.

    ©1995-2004 Eric A. and Kathryn S. Meyer. All Rights Reserved.

    请注意标点符号和大小写的用法,这也是专业精神的一种体现。

    C是Copyright版权的缩写, 
    最常用的版权通知排列方法为: 

    ©(版权拥有人姓名)(作品完成年份) 
    故:2005指作品完成年份! 

    转:http://www.7blue.cn/article.asp?id=57

  • 时间:周五下班
    地点:杭州 万象城 溜冰场
    人物:我\熊同学\张瓶梅\兽兽
    结果:第一次溜真冰,摔了两次(重重的那种),导致一整个周末觉得身体不听使唤,僵硬\酸痛\

    时间:周六下午
    地点:学校(浙江工业大学)
    人物:我\阿菜
    结果:单反不争气,没卡几张就在Alert电量不足.阿菜叽歪着我昨天没先冲电,我埋怨她昨天没提醒我.
           只能让她的卡片机上场了..
           原来悲剧,并不单行.

    今天在阿菜Qzone上看到她处理一天的照片,感觉还是挺有Feel的.

  • 张京芸-偏爱

    很好听。

    我不闪躲,我非要这么做

  • 周一,困
    周六,同住的人一起唱K,夜里12点归;
    周日,同阿蔡一起扫街。

    看到一件马甲,很喜欢。
    店主死咬着180不松,嫌贵没买,心里一直牵挂着...
    买了条Only的裤子,小了点,大号的那件被阿蔡夺了去。

    在美帮试了条裹胸裙,大了;
    今天阿蔡又在叫去鼓浪屿...
    裙子啊,没买。 

    悲剧...

  • 杭州两彩民同时2元中“双色球”500万,
    随着消息的传出,小组里的人似流行感冒般,纷纷患上中大奖幻想症;
    一人发起和买,其他参与;
    象Taobao的秒杀,象商场的促销...
    一发方案会瞬间被购空.


    阿弥陀佛,希望真能中奖,不求千万大奖,
    只愿能来个二十来万,买个小车滚滚.

  • 周六刚败的Nano 5.
    效果如何?
    苹果 地球人都知道!
    相信你懂的。

    一度狂热的PSP3000 豪华版

  • 有这么一段HTML,请挑毛病:

    <P>&nbsp;&nbsp;哥写的不是HTML,是寂寞。<br><br>&nbsp;&nbsp;我说:<br>不要迷恋哥,哥只是一个传说

     

    言归正传。这道题的考点:

    考点1:html和 xhtml的区别
    这行代码在html 4.01 strict下是完全正确的,在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的,p,br需要闭合, 标签不允许大写,P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签,是可以不用闭合的。

    这个考点告诉你xhtml是多么苛刻。这是基本考点,答对,你能拿到60分。

    考点2:考样式分离
    用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp

    考点3:合理使用标签
    br是强制折行标签,p是段落。原题用连续的br制造两个段落的效果,效果是达到了,但显然用的不合理,段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。

    上面全答对,你就能拿到100分。

    对原题改进的结果:
    html 4.01:
    <p>哥写的不是HTML,是寂寞。<p>我说:<br> 不要迷恋哥,哥只是一个传说

    xhtml 1.0:
    <p>哥写的不是HTML,是寂寞。</p><p>我说:<br /> 不要迷恋哥,哥只是一个传说</p>

    加分:合理的用语义化标签
    在前面的基础上合理的用语义化标签,对内容进行必要的标记,是加分的。但过度的使用标签,就画蛇添足了。如“我说”的话,可以用q标签标注。

    <p>哥写的不是HTML,是寂寞。
    <p>我说:<br> <q>不要迷恋哥,哥只是一个传说</q>

    我觉得这就够了,如果再进一步,“我”用cite标注,“HTML” 用abbr或acronym标注(至于再讨论abbr和acronym的区别就太较真了),也OK。再复杂就没必要了。

    <p> 哥写的不是<abbr title="Hyper Text Markup Language">HTML</abbr>,是寂寞。
    <p><cite> 我</cite>说:<br> <q>不要迷恋哥,哥只是一个传说</q>

     

    转自:豆瓣:张克军Blog