好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

让ZenCoding提升编码速度_html/css_WEB-ITnose

日前写了一篇关于 VS神级插件Web Essentials 的系列博客,其中在 HTML&CSS操作技巧 一节简单提到了ZenCoding,今天来详细说一下这个东西。

摘要

Zen Coding是一种使用CSS样式选择器语法更快速地编写HTML的方式。如果你使用的是VS,那么你可以安装了VS的插件Web Essentials之后,就可以使用Zen Coding编码方式了,关于Web Essentials的下载,请 转到这里 。如果你是用的其他编辑器,请到 这里下载安装 (需要FanQiang)。Zen Coding是2009年提出来的,已经更新了多次,正在变成更加有效地编写无聊的HTML受人欢迎的方式。

快速指南

下面是一些常用的Zen Coding功能,目前VS2013的Web Essentials插件已经支持。

'#' 创建一个id特性
'.' 创建一个类特性
'[]' 创建一个自定义特性
'>' 创建一个子元素
'+' 创建一个兄弟元素
'^' 提升元素层次
'*' 相当于乘号,会创建n次相同的东西。
'$' 代替一个自增的数字。
'$$' 用于有填充位的数字,比如00,01。
'{}' 创建元素的文本。

可以做些啥呢?看下面这个复杂的例子:
div#olDiv>ol>li.item*6>span{ZenCoding$$}.red
按下Tab键后,它会生成下面的代码:

ZenCoding01 ZenCoding02 ZenCoding03 ZenCoding04 ZenCoding05 ZenCoding06

查看更多关于让ZenCoding提升编码速度_html/css_WEB-ITnose的详细内容...

  阅读:32次