2010年04月01日

从很久以前就想学好js,大概从一年前就有这样的想法,但是一直没有实际行动来好好做这件事情。一直觉得js是一个前端开发人员必须会的技能,但是现在还是停留在简单的调用或是修改的水平。感觉自己想一个文盲,很不爽,要好好开始从0开始学,我讲把这里当成是自己成长和进步的见证,现在看起来真的是很迷茫,不知道从何看起,什么都不会,这个有点像当成学css那样的感觉,感觉什么都记不住,现在也挺好了,要靠慢慢的积累,一天学一天应该也会有进步,我会加油的~现在记不住属性啥的,我就用aptana,反正有提示,一定要强迫自己每天看书

2010年03月17日

人人网招聘前端架构师

工作职责:

1.负责网站整体前端框架的设计、搭建;

2.负责前端开发标准、规范的制定;

3.能够深入了解后端架构,为项目提供最优化的技术解决方案;

4.关注性能,能够为全站性能提升、技术运用合理性给出专业指导意见,勤于技术创新;

5.勤于布道;

职位要求:

1.3年以上web开发和前端开发经验,有大型网站的前端架构实践经验;

2.精通各种前端框架,深入了解其开发思想以及应用范围,有独立开发框架经验;

3.至少精通一门web前端脚本语言,有项目经验,熟悉Linux;

4.了解设计模式;

5.善于沟通,乐于分享;

如果你有以上没有提到的任何技能,都是你的优势。

如果你觉得你够强大,够靠谱,够热情,你可以忽略以上描述,直接来和我们面谈。我们注重技术,但更注重人。

mail/msn: qiang.yan@opi-corp.com

2009年06月23日

在div中很无论是通过text-align:center还是margin:0 auto都很容易将内容水平居中;然而垂直居中没有那么容易实现了。

css:

.con-div{width:400px; height:300px;
text-align:center;
display:table-cell;
vertical-align:middle;
background:#036; color:#fff;}
.forie{ width:0; height:100%;
display:inline-block;
vertical-align:middle;
}

html:

<div class"con-div"><span class="forie"></span>是不是垂直居中的呢?</div>

注意:这里面的文字不是写在“span”中的。IE8中此方法仍然失效。

现在还有一种方法就是直接定义line-height的值来达到垂直居中的效果。

2009年06月22日

不同浏览器对W3C标准的支持不一样,各个浏览器对于页面的解释也不尽相同,比如IE在很多情况下就与FF存在3px的差距,对于这些差异性,就需要利用css 的hack来进行调整,当然在没有必要的情况下,最好不要写hack来进行调整,避免因为hack而导致页面出现问题。

1、IE6、IE7、Firefox之间的兼容写法: 

  写法一: 

  IE都能识别*,标准浏览器(如FF)不能识别*; 
  IE6能识别*,但不能识别 !important; 
  IE7能识别*,也能识别!important; 
  FF不能识别*,但能识别!important; 
  根据上述表达,同一类/ID下的CSS hack可写为: 

.searchInput {   background-color:#333;/*三者皆可*/  
 *background-color:#666 !important; /*仅IE7*/
 *background-color:#999; /*仅IE6及IE6以下*/   }

三者的书写顺序是:FF,IE7,IE6;

写法二

IE6可识别“_”,而IE7及FF皆不能识别,所以当只针对IE6与IE7及FF之间的区别时,可这样书写:

searchInput { 
  background-color:#333;/*通用*/ 
  _background-color:#666;/*仅IE6可识别*/ 
  }

写法三

*+html 与 *html 是IE特有的标签, Firefox暂不支持。 
  .searchInput {background-color:#333;} 
  *html .searchInput {background-color:#666;}/*仅IE6*/ 
  *+html .searchInput {background-color:#555;}/*仅IE7*/

这里是文章原文的链接:http://www.noupe.com/jquery/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html

css3考虑了很多令人兴奋的新功能和特色:文本阴影,盒子尺寸,不透明度,多重背景,边框半径,边框图片……

css3有着更大的灵活性并使得更容易实现原来复杂的效果。目前不是所有的浏览器都支持css3,然而,他可能以jQuery的力量创作等效作用和服务。

这篇文章提出的5种css3的技术,能让你戏剧化的拥有漂亮的用户界面,如何达到浏览器不兼容时使用jQuery几乎相同的效果。

1.边界半径:创造圆角

W3C在CSS3中为编辑提供了一个非常有趣的选择,其中一个就是边界半径。CSS3的7样式规则允许对圆角进行设置。Mozila/Firefox和Safari 3  都都使这个功能生效了,允许你在 中定义圆角。

 下面是以上图片的css代码:

#rounded-box { -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 15px; }

你也能找到jQuery解决方法不用图片来实现圆角。

How To » jQuery Canvas Rounded Corners

jQuery插入程序在你的DOM对象中使用元素。在IE7和FF3测试你可以改变以下选择:

  • radio-(int)圆角的半径
  • inColor-(color)里面元素的颜色
  • outColor(color)圆角的外部颜色
  • borderSize-(int)边界宽度
  • bordeColor-(color)边界的颜色
How To » jQuery Corners

jQuery 插件可以很容易的创建漂亮的圆角。没有图片或是刺眼的标注。

2.边框图片

CSS3另一个让人兴奋的新边框属性是边界图像。边框图像,就是允许一张图片作为一个元素的边框。图片的每一边与HTML对象的每一边想对应。

当前的“边框图像”只在即将出现的firefox3.1和最近发布的Safari和Chrome中能实现。下面你可以发现一个复杂的jQuery解决办法能在以下浏览器实现这一功能:Firefox 2.*, Firefox 3, Firefox 3.1, Safari 3.*, Chrome 1.0, Opera 9.*, Opera 10和IE7。

How To » jquery.borderImage.js


jquery.borderImage是一个过渡浏览器,部份的实施了CSS3边界图象特性。 这个插件能实现的效果和将边框图片分割成9个部分,然后将他们铺于我们的元素的背景中。

3.多重背景

CSS3允许在一个元素上定义多个背景图片,这是真的节省时间的东西。要这样做,你可以使用逗号来分离背景,就像这样

#multiple-background-box { background: url(top-bg.gif) top left no-repeat, url(bottom-bg.gif) bottom left no-repeat, url(middle-bg.gif) left repeat-y; padding: 20px; }

尽管这个特性在大部分浏览器中不被支持,如果你想要在背景层中实现多个背景时,你需要在每一个层中添加你想要的背景。那会需要很多的代码,也不是很有效率。解决的方法是使用jQuery的背景层插件。

How To » CSS Multiple Backgrounds / Background Layering with jQuery

背景层插件能通过增加几行javascript语言简化XHTML,使你的代码更优化。这个概念就像是Photoshop中的层,一个背景图片在另一个的上面。

 

4.盒子阴影和文本阴影

这个属性的主要目的是让设计书和css编程人员有一个不错的方式来实现文字的阴影。该属性的语法应该看起来像这样:

h3 { text-shadow: 2px 2px 2px #333; }

Kretschmann’s 的网站上发现了一篇特别有用的文章,讲解这个特性的不同用法。

同样,这个特性不被firefox和IE支持,所有我们必须找到使用jQuery的解决方式。

5.透明性和不透明性

css3到目前最广泛的特性是不透明度。“不透明度”是给元素设置一个不透明的值,一个元素的不透明度值为1.0,那么这个元素就是不透明的,如果值是0.0的话就刚好相反。在两者之间的值就是该元素的不透明(透明)程度。

上述不透明的例子是设置在另一层包含一种完全随机的,看不见前面的背景,每一层所用到的css代码:

div.L1 { background:#036; opacity:0.2; width:575px; height:20px; } div.L2 { background:#036; opacity:0.4; width:575px; height:20px; } div.L3 { background:#036; opacity:0.6; width:575px; height:20px; } div.L4 { background:#036; opacity:0.8; width:575px; height:20px; } div.L5 { background:#036; opacity:1.0; width:575px; height:20px; }

2009年06月19日

为什么叫躲猫猫呢,是因为在某些条件下文本看起来消失了,只有在重新装载页面是才再度出现。虽然不是很常见到,还是记录下来,供以后查阅。

出现这个bug的条件是:一个浮动元素后面跟着一些非浮动元素,然后是一个清理元素,所有这些元素都是包含在一个设置了背景颜色或图像的父元素中。

看起来消失的文字并没有真的不见了,而是隐藏到父级元素的背景颜色或图片后面,只有在刷新页面才能重新出现。

html代码:

<div class="father">
   <div class="float">这个浮动的文字</div><div>这个就不会浮动了,哈哈</div>
   <div class="clear"></div>
 </div>

css:

.father{
 background:#0aa;
}
.float{
 float:left;
 border:1px solid #000;
}
.clear{
 clear:both;
 border:1px solid #000;
}

这里为了看出效果都加了一个黑色的边框。

解决办法1:去掉父元素的背景颜色或图片(要必须有背景的话,这个当然这个不是可行的)。

解决方法2:避免清理元素和浮动元素相接触。

解决方法3:给容器指定一个行高。

解决方法4:将浮动元素和容器元素的position属性设置为relative。

2009年06月16日

现在几乎所有的网站都使用css来进行样式的控制,表格终于也不再为了布局而存在,恢复了他本来的作用。显示数据和用户信息都离不开表格,但是怎么才能让表格在显示上完全按照自己的意愿也是我们必须考虑的问题。

当你设计好一个表格后,后台输入一些很长的数据才发现表格被撑到不堪入目的地步,相信对每个人来说都是难以接受的。我也是在经历过痛苦之后才下决心要好好学习一下关于表格的样式。

当数据或是文字过长,表格不会因为内容增多而变化。

解决方法是:

table { table-layout:fixed;}
 td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

这样你所看到的表格将和你设想的一模一样,不过内容超过表格宽度的部分就被隐藏掉了。如果想在当前页知道单元格的全部内容的话,建议在td中添加一个title,并把要显示的内容写到里面。如:titile="学海无涯,无止境!"

当数据或文字过长,你也想让浏览者看见内容,而不使表格变形的话,那就应该让单元格中的内容自动换行。

table { table-layout:fixed;}
 td { width:200px; word-break:break-all; word-wrap:word-break;}

注意:这种方法在都是相同英文字母的时候在firefox和ie8中仍然失效。

如:<tb>cccccccccccccccccccccccc</tb>

这种单元格内容自动换行的显示方式,对于所有单元格都是一样宽度的,实现起来很容易,甚至不用添加多余的class,但是如果表格中单元格宽度有很大差异,但是还算整齐的话,就可以对应第一行的td添加宽度width,后面的列将和第一行的单元格宽度一致。

但是如果表格中还有合并单元格的情况,目前我的做法就是每个设置一个width,这样违背了css中样式和内容分离的原则,让页面代码变得很臃肿,不易于修改和维护。想不出更好的解决方法,希望有高手看见我的问题后能给予指点,不胜感激。

2009年06月10日

在使用css定义字体大小的时候有三种常见的单位供你选择:px,em,pt。px是绝对长度单位,是屏幕上显示的最小单位。字体大小不会随个人设置而变化,由于是固定大小,有很好的可预见性,目前很多网站都采用的这种单位;em是相对长度单位,可使字体随IE浏览器的调整而变化;pt也是绝对长度单位,是标准的印刷上的量度,广泛应用于打印以及字处理程序。

一般网页中设计的字体大小使用12px或是9pt比较合适。

大多浏览器默认的字号是16px,或是12pt,1em。我们在定义网页字体的大小的时候可以根据布局来选择合适的单位。这里有一个单位之间的相互换算:12px=0.75em,10px=0.625em,1px=0.75pt 。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%, 将原来的px数值除以10,然后换上em作为单位就行了。

2009年06月04日

让设计居中的两个基本方法:

一、使用自动空白边;

<body>

  <div id="wrapper"></div>

</body>

只需定义容器div的宽度,然后将水平空白边设置为auto:

#wrapper{

width:1002px;

margin:0 auto;

}

这种方式是平常最常用的,但是在IE5x和IE6中不能按你的想法去实现,为了兼容更多的浏览器,将css改为:

body{text-align:center;}

#wrapper{

width:1002px;

margin:0 auto;

text-align:left;}

二、使用定位和负值的空白边:

和前一种方法一样,首先定义容器的宽度,然后将容器的position设置为relative,将left属性设置为50%.这样做就会把容器的边缘定位在页面的中间。

#wrapper{

width:1002px;

position:relative;

left:50%;

margin-left:-501px;}

margin-left:-501px和left:50%相互抵消从而实现容器的中间位置居中显示。

做网页网站也有一些时间了,html也用的很熟练了,但是还是有很多的标签对我来说还是很陌生,现在将其汇集在一起,加深印象,也方便以后查阅。

先说一下html和xhtml的区别吧。

XHTML文档必须具有良好完整的排版(well-formed)

编排良好性(Well-formedness)是XML引入的一个新概念.从本质上说,元素必须有结束标签,或者必须以特殊方式书写,而且元素必须嵌套.

尽管SGML规定重叠(overlapping)是非法的,但现有的浏览器普遍允许重叠.

对于所有HTML元素和属性名, XHTML文档必须使用小写. 因为XML是大小写敏感的.如 <li><LI> 是不同的标签.

对非空元素,必须使用结束标签

在基于SGML的HTML4中的一些隐含结束意义的元素允许忽略结束标签.XML不允许忽略结束标签.除了在DTD中被声明为空的元素,所有元素必须有结束标签.

属性值必须在引号中

所有的属性值必须在引号中,即使是以数字形式的属性值

属性最小化

XML不支持属性最小化.属性-属性值必须完整成对的写出.像disabled,checked这样的属性名不能在不指定属性值的情况下出现.

正确:非最小化属性(unminimized attributes)

<input checked="checked">

不正确:最小化属性(minimized attributes)

<input checked>
空元素

空元素必须有结束标签,或者起始标签必须以/>结束.例如,<br/><hr></hr>.

正确:结束的空元素(terminated empty elements)

<br/><hr/>

错误:未结束的空标签(unterminated empty elements)

<br><hr>
总结一下就是:
  • 标签不能重叠,可以嵌套
  • 标签与属性都要小写
  • 标签都要有始有终,要么以</p>形式结束,要么以<br />形式结束
  • 每个属性都要有属性值,并且属性值要在双引号中
  • 别用nameid

下面开始说说html中的标签:

HTML的文字元素

abbr 标签 — 简称标签

  • abbr标签是成对出现的,以<abbr>开始,以</abbr>结束
  • 属性:  一般属性
  • abbr是abbreviation的缩写
  • 示例:
    <abbr title="Limited">Ltd.</abbr>

acronym 标签 — 取首字母的缩写标签

  • acronym标签是成对出现的,以<acronym>开始,以</acronym>结束
  • 属性:一般属性
  • 示例:<acronym title="Cascading Style Sheets">CSS</acronym>

    cite标签 -- 引用标签

    • cite标签是成对出现的,以<cite>开始,以</cite>结束
    • 属性: 一般属性
    • cite– 引用内容的URI
    • cite是citation的缩写
    • 示例:<cite cite="http://www.dreamdu.com/xhtml/">一步步的教我学会HTML与XHTML</cite>

    code 标签 -- 代码标签

    • code标签是成对出现的,以<code>开始,以</code>结束
    • 属性: 一般属性
    • 示例:PHP中的变量名,前面要加上 $符号 例如: <code>$i = 1;</code>.

    dfn 标签 — 定义标签

    • dfn标签是成对出现的,以<dfn>开始,以</dfn>结束
    • 属性:  一般属性
    • dfn是defining instance的缩写
    • 示例:<dfn>html</dfn>是一个单词!

    em标签 — 强调标签

    • em标签是成对出现的,以<em>开始,以</em>结束
    • 属性: 一般属性
    • em是emphasis的缩写
    • 示例:强调一下,<em>不要</em>和我开玩笑!

    kbd 标签 — 标签表明使用者输入的文字

    • kbd标签是成对出现的,以<kbd>开始,以</kbd>结束
    • 属性:  一般属性
    • 示例:To exit, type <kbd>QUIT</kbd>.

    l标签 — 表示一段语句

    • l标签是成对出现的,以<l>开始,以</l>结束
    • 属性:  一般属性
    • l是line of text的缩写
    • 示例:<l>一行实实在在的文字!</l>

     

    • legend标签是成对出现的,以<legend>开始,以</legend>结束
    • 此标签在<fieldset>标签内
    • 属性:
      • Common — 一般属性

     

    q 标签 -- 表示一个行引用

    • q标签是成对出现的,以<q>开始,以</q>结束
    • 属性: 一般属性
    • cite-- 引用内容的URI
    • q是quoted text的缩写
    • 示例:<cite>古人</cite>云:<q>磨刀不误砍柴功.</q>

    blockquote标签 -- 表示引用块 samp标签 -- 表示程序或脚本输出的内容

     

    • blockquote标签是成对出现的,以<blockquote>开始,以</blockquote>结束
    • 属性:  一般属性
    • cite -- 被引用内容的URI
    • 示例:<blockquote cite=http://blog.donews.com/zmnk>
      <p>学习css、html,学习标准网页设计.</p>
      </blockquote>

     

    • samp标签是成对出现的,以<samp>开始,以</samp>结束
    • 属性:一般属性
    • samp是sample output from programs,scripts,etc的意思
    • 示例:程序的输出是<samp>x+y</samp>

    sub标签 -- 表示下标

    • sub标签是成对出现的,以<sub>开始,以</sub>结束
    • 属性: 一般属性
    • sub是subscript的缩写

    sup 标签 -- 表示上标

    • sup标签是成对出现的,以<sup>开始,以</sup>结束
    • 属性: 一般属性
    • sup是superscript的缩写

    address 标签 -- 表示地址

    • address标签是成对出现的,以<address>开始,以</address>结束
    • 属性: 一般属性
    • 示例:<address href=mailto:zhoumingnk@126.com>毛毛虫的栖息地</address>

    big标签 -- 定义大字体的文字

    • 不符合标准网页设计的理念,不赞成使用.
    • big标签是成对出现的,以<big>开始,以</big>结束
    • 属性: 一般属性