"\u003cp\u003e上次在北京看到善用佳软的 xBeta 演示 VIM 的时候，@[sfufoet][1] 我就被强烈震撼到了。VIM 的确是个强大的编辑器，它可以折腾出很多种强大的功能。今天看到这个叫 [Zen Coding][2] 的东西，我强烈推荐给经常和 HTML CSS 打交道的朋友。@appinn\u003c/p\u003e\n\u003cp\u003e下面的动态演示图，只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各种快捷键或者 AHK 的热字符串，以智能简洁高效的缩短输入，带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://blog.haohtml.com/wp-content/uploads/2012/03/zen-coding.gif\"\u003e\u003cimg src=\"http://blog.haohtml.com/wp-content/uploads/2012/03/zen-coding.gif\" alt=\"\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e先举一个复杂的例子：zen-coding 可以把这样的代码：div#header\u0026gt;ul.navigation\u0026gt;li*4\u0026gt;a，变成下面的 HTML 代码\u003c/p\u003e\n\u003cblockquote\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003c/blockquote\u003e\n\u003cp\u003e看到这熟悉的语法结构，会 CSS 的朋友一定会惊声尖叫！最妙的是那个“*4”，直接生成 4 个 li 代码了。没错，[Zen Coding][2] 就是这样牛叉的东西，[Zen Coding][2] 分为 Zen HTML 和 Zen CSS 两部分。这两部分功能是以插件的形式来实现的。 …\u003c/p\u003e"

"\u003cp\u003e#snake{\nbackgournd: #666;\nfilter:alpha(opacity=50); /*IE*/\n-moz-opacity:0.5; /*MOZ , FF*/\nopacity:0.5; /\u003cem\u003eCSS3, FF1.5\u003c/em\u003e/\u003c/p\u003e\n\u003cp\u003e}\u003c/p\u003e"

"\u003cp\u003e建议参考: \u003ca href=\"http://www.css3.info/preview/rounded-border/\"\u003ehttp://www.css3.info/preview/rounded-border/\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e圆角样式示例(仅在firefox内核,safari,chrome等内核浏览器下支持,IE内核不支持)\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e\u003cstrong\u003eborder-*-*-radius:\u003c/strong\u003e [ | \u0026lt;%\u0026gt; ] [ | \u0026lt;%\u0026gt; ]?\u003c/p\u003e\u003c/blockquote\u003e\n\u003cp\u003e\u003cstrong\u003eCSS3的border-radius规范\u003c/strong\u003e\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003e属性：\nborder-top-right-radius\nborder-bottom-right-radius\nborder-bottom-right-radius\nborder-bottom-right-radius\n值：。它们分别是定义角形状的四分之一椭圆的两个半径。如图：\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e第一个值是水平半径。\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e如果任意一个值为0，则这个角是矩形，不会是圆的。\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e值不允许是负值。\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e属性：border-radius。它是上面四个属性值的简写。\n值：{1,4} [ / {1,4} ]\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e如果斜线前后的值都存在，那么斜线前的值设置水平半径，且斜线后的值设置垂直半 …\u003c/p\u003e\u003c/li\u003e\u003c/ol\u003e"

"\u003cp\u003ee6.0下面经常会出现border边框断断续续的问题，初学div+css 的一般不会用遇到这个问题，不过等深一步了解了div之后自然会经常碰到这种问题了，因为初学者不会偷懒，等我们觉得用的很熟了，各种浏览器都能很方便的 兼容之后就会出现这种问题，我有很多同事都碰到过这种问题，其实解决办法很简单，我先简单描述一下边框断裂的效果.\u003c/p\u003e\n\u003cp\u003e在浏览器下一刷新边框是全的，再以刷新边框就会有断开，什么原因呢，很懊恼的事情，网上一搜也没有答案，下面我就告诉大家解决的方法，其实他是有原因的， 原因就是你的外层有边框，边框层里面嵌套的层里面有浮动，浮动这个最令人懊恼的东西经常会出问题，由于这个原因会引起ie6下面边框断裂，解决办法就是在 外层加 zoom:1; 或者 heigth:100%; 很容易就解决了这个问题。\u003c/p\u003e\n\u003cp\u003e表现状况：窗口的边框时隐时现。。。\u003c/p\u003e\n\u003cp\u003e发生情况：\u003c/p\u003e\n\u003cp\u003e网上说是在一个容器中有元素浮动时容易出现，自己感觉有时内部元素把容器撑开时也会看不到边框。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e解决办法：\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e如果按网上说的是因为浮动的原因的话，那么添加清除浮动则应试可以正常解决。\u003c/p\u003e\n\u003cp\u003e另外网上的解决办法是：给窗口设置{zoom:1} or { …\u003c/p\u003e"

"\u003cp\u003e出现问题是：使用 float: left; 后，在IE显示margin-left:1px;就变成2px的距离。\nIE Bug 的解决方法：\n加一个 display: inline; 就OK了\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e#box1{\n\tfloat: left;\n\tbackground: #F2F2F2;\n\twidth: 300px;\n\theight: 200px;\n\tmargin-left: 50px;\n}\n\u003c/code\u003e\u003c/pre\u003e\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e#box1{\n\tfloat: left;\n\tbackground: #F2F2F2;\n\twidth: 300px;\n\theight: 200px;\n\tmargin-left: 50px;\n\tdisplay: inline;\n}\n\u003c/code\u003e\u003c/pre\u003e\u003c/blockquote\u003e\n\u003cp\u003emargin在IE6下被解释为双倍距离，出现了Margin与float一起用时，在IE6下，其Margin属性会被解释会双倍的距离，margin产生双倍距离其解决兼容问题的两种方法：\u003c/p\u003e\n\u003cp\u003e1、给当前层增加display: inline;属性。\u003c/p\u003e\n\u003cp\u003e2、取消浮动：Float。\u003c/p\u003e\n\u003cp\u003e熟悉规则的人知道浮动元素自动设置为”block”元素，而不管他们之前是什么。这说明浮动元素上的{display: …\u003c/p\u003e"

"\u003cp\u003e随着公司业务的增加，需求变的越来越多，团队也因此在不断的扩大，我们经常会遇到几个人协同工作来完成同一件作品或者维护修改别人作品的时候，那么 是什么最让你最感到困扰呢？我们在实现一个表现复杂的页面的同时，CSS文件就会比较繁琐，众多的选择符、属性让人眼花缭乱，那么如何更快的定位、如何更 高效的编写样式呢？CSS的书写被很多人所忽略。关于书写风格，翻看了一些知名网站的作品，发现横向连排几乎成为各大产品项目的主流，然而，每个人对于 CSS的写法各异，这就导致我们工作效率的降低。为了更好的协同工作，保持团队内CSS书写的一致性，几经波折后达成共识，具体书写方法如下：CSS属性 横排书写，选择符纵排书写，每个”,”(逗号)后必须换行;\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e重构组代码书写规范示例：（其中数字只用做示范，实际应用中不建议用数字命名。）\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e.class_name_1 .class_name_1_1,\n.class_name_2 .class_name_2_1 .class_name_2_1_1,\n.class_name_3{style1:value; style2:value; styel3:value; }\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e有人说，好代 …\u003c/p\u003e"

"\u003cp\u003e最近被“模块化”缠身，又是文章又是PPT的，被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考，大多都是我自己从事页面重构这份 工作的经验和理解，在一定程度上存在局限性，也希望自己能温故而知新。\u003c/p\u003e\n\u003cp\u003e“模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓，就像“Ajax”。不过做为页面重构发展的一种趋势，越来越被大家重视，不自觉 也满口的“模块化”，只是你真的理解什么是“模块化”吗？\u003c/p\u003e\n\u003ch3 id=\"什么是模块化\"\u003e什么是模块化？\u003c/h3\u003e\n\u003cp\u003e对“模块化”的解释，在 \u003ca href=\"http://www.cnki.net/gycnki/gycnki.htm\"\u003eCNKI\u003c/a\u003e 中就有28种。可见“模块化”思维使用的广泛。最接近页面重构中的“模块化”，现有的解释应该就是软件开发中的解释了。\u003c/p\u003e\n\u003cp\u003e先看一下百度词条是怎么解释“ \u003ca href=\"http://baike.baidu.com/view/182267.htm\"\u003e模块化\u003c/a\u003e ”的：\u003c/p\u003e\n\u003cp\u003e模 块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体， 完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体 系结构中，模块是可组合、分解和更换的单元。\u003c/p\u003e\n\u003cp\u003e相关的书籍也蛮多的，有兴趣的同学可以搜一下。需 …\u003c/p\u003e"

"\u003cp\u003e\u003cstrong\u003e“\u003c/strong\u003e CSS 3 不是新事物，更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里，已经准备好了首次登场，呷着咖啡，等着浏览器来铺上红地毯。 你看，浏览器需要跟上了…… \u003cstrong\u003e”\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e–谨以此文纪录ISD WEBTEAM 09年Q2力作：CSS 3.0 中文参考手册\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e背景\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e苏昱的《样式表中文手册》为代表的 CSS2.0参考资料伴随了国内众多web设计师们走过了近10年的时光，这种影响是深远的，但随着CSS技术的不断发展，设计师们多受传统资料的影响， 不能超脱现有的篱笆，给自己背上了沉重的包袱。你是否已注意到CSS 3已经蓄势待发？你是否渴望开始使用它们却又不知从何下手呢？正当CSS 3新特性备受期待的时候，我们的CSS3.0 中文参考手册就应运而生了……\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e什么是CSS 3？\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eCSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。\u003c/p\u003e\n\u003cp\u003eCSS3.0 则表示下一版本的CSS，3.0是版本号。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eCSS 3\u003c/strong\u003e \u003cstrong\u003e给我们带来了什么惊喜？\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eCSS3.0对于我们Web设计人员来说不只 是新奇的技 …\u003c/p\u003e"

"\u003ch4 id=\"翻译自-russ-weakley-的-efficient-maintainable-css\"\u003e翻译自 \u003ca href=\"http://www.maxdesign.com.au/\"\u003eRuss Weakley\u003c/a\u003e 的 \u003ca href=\"http://www.slideshare.net/maxdesign/efficient-maintainable-css-presentation\"\u003eEfficient, maintainable CSS\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003e翻译自Russ大师的一篇关于如何书写高效、可维护、组件化的CSS的演示文档。Enjoy~\u003c/p\u003e"

"\u003cp\u003e翻译自 \u003ca href=\"http://www.maxdesign.com.au/\"\u003eRuss Weakley\u003c/a\u003e 的\u003ca href=\"http://www.slideshare.net/maxdesign/line-height\"\u003eLine Height\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e一个简单的, step-by-step 关于 CSS 行高的演示文档, 涵盖行间距, 如何应用各种类型的行高值, 当然还有 inline box 模型介绍, 希望能满足您\n（但实战应用在中文字体或中英文字体混合，以及IE678，XP win7里，行高规则又有所不同，泪流满面）\u003c/p\u003e"

"\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eaaaaaaaaaaaaaaaaaaaaa\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003ebbbbbbbbbbbbbbbbbb\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eaaaaaaaaaaaaaaaaaaaaa\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003ebbbbbbbbbbbbbbbbbb\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e"

"\u003cp\u003e安装了FireFox3.5之后，发现以前项目网页中有透明属性的一些DIV都不透明了。于是猜想，FireFox3.5难道不支持它自家的CSS透明属性-moz-opacity了？上网一查，果真如此。\n在 \u003ca href=\"https://developer.mozilla.org/En/CSS:-moz-opacity\"\u003ehttps://developer.mozilla.org/En/CSS:-moz-opacity\u003c/a\u003e 里说得很清楚了：\nNote:  Firefox 3.5 and later do not support -moz-opacity.  By now, you should be using simply opacity.\n现在都要改用opacity这个属性。\u003c/p\u003e\n\u003cp\u003e于是要设置一下透明度为60%的DIV就应该这样写了：\ndiv.transp { /* make the div translucent */\nopacity: 0.6;                /* Firefox, Safari(WebKit), Opera)\nfilter: “alpha(opacity=60)”; /* IE 8 */\nfilter: alpha(opacity=60);   /* IE 4-7 */ …\u003c/p\u003e"

"\u003cp\u003e元素所参考的样式用户可以自由的选择加以改变，而导入的样式表单就自动的与剩下的样式表融合在一起了\u003c/p\u003e\n\u003cp\u003eCSS与HTML文档结合的4中方法：\u003c/p\u003e\n\u003cp\u003e1 使用元素链接到外部的样式文件\u003c/p\u003e\n\u003cp\u003e2 在元素中使用”style”元素来指定\u003c/p\u003e\n\u003cp\u003e3 使用CSS “@import”标记来导入样式表单\u003c/p\u003e\n\u003cp\u003e4 在内部的元素中使用”style”属性来定义样式\u003c/p\u003e\n\u003cp\u003e一个例子:\u003c/p\u003e\n\u003cp\u003ecss demo\u003c/p\u003e\n\u003cp\u003e第一种是直接在html页面上进行css书写，而第二种和第三种是采用外部引用样式单独提取文件。\u003c/p\u003e\n\u003cp\u003e问题1.到底link和@import有什么区别？\u003c/p\u003e\n\u003cp\u003e我们先来看看他们的定义\u003c/p\u003e\n\u003cp\u003elink元素\u003c/p\u003e\n\u003cp\u003eHTML和XHTML都有一个结构，它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源可以是样式化信息（CSS）、导航助手、属于另 外形式的信息（RSS）、联系信息等等。\u003c/p\u003e\n\u003cp\u003e@import\u003c/p\u003e\n\u003cp\u003e指定导入的外部样式表及目标设备类型。\u003c/p\u003e\n\u003cp\u003e其实link和@import的最根本区别就是，\u003cstrong\u003elink\u003c/strong\u003e 是一个 \u003cstrong\u003ehtml\u003c/strong\u003e 的一个标签 ，而**@import** 是 \u003cstrong\u003ecss\u003c/strong\u003e 的一个标签 ,\u003c/p\u003e\n\u003cp\u003elink除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等， …\u003c/p\u003e"