Tweet
Tweet

Slide 1

Slide 1 text

Zen Coding 一种快速编写HTML/CSS代码的方法 UED分享 · 交流 http://cssrain.github.io

Slide 2

Slide 2 text

哪些原因导致你写HTML变慢? • 很长，难记标签代码 (doctype) • 丌常写，丌熟悉的标签代码 (link) • 语义化的代码 (img的alt和title) • Html的所有属性，括号，引用都要写完整 (dl+) • ……

Slide 3

Slide 3 text

记得它吗，能写出来吗？

Slide 4

Slide 4 text

html:xt 演示

Slide 5

Slide 5 text

有什么方式快速写出？

Slide 6

Slide 6 text

div#content>(div.page_top>p.hdwrap+h1)+div.column *2 演示

Slide 7

Slide 7 text

太复杂？拆开来

div#content > ( div.page_top > p.hdwrap+h1 ) + div.column*2

Slide 8

Slide 8 text

丌就是CSS嘛 E 元素名称(div, p); E#id 使用id的元素(div#content, p#intro, span#error); E.class 使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width; E>N 子代元素(div>p, div#footer>p>span); E+N 兄弟元素(h1+p, div#header+div#content+div#footer); E*N 元素倍增(ul#nav>li*5>a); E$*N 条目编号 (ul#nav>li.item-$*5);

Slide 9

Slide 9 text

这就是Zen Coding 由两个核心组件组成： • 一个缩写扩展器(缩写为像CSS一样的选择器) • 上下文无关的HTML标签对匹配器

Slide 10

Slide 10 text

支持大多数开发工具 • Visual Studio • TopStyle • Vim • IntelliJ IDEA/WebStorm/PHPStorm • Aptana • Dreamweaver , Sublime Text，Editplus……

Slide 11

Slide 11 text

Zen Coding 资料 http://code.google.com/p/zen-coding/ https://github.com/sergeche/zen-coding/

Slide 12

Slide 12 text

Q&A 谢谢聆听