首页 > 代码库 > zen-Coding的使用

zen-Coding的使用

zen-Coding的使用

zen-Coding的使用需要掌握CSS和HTML相关知识。其实只要对CSS的选择器比较熟悉,就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码。打开Notepad++编辑器,输入以下代码:
div#name

然后接着按一下快捷键ctrl+E,就会自动生成如下的HTML代码:

<div id="name"></div>

接下来看一个更高效的例子

div#header>div#logo+ul.nav>li.item-$*5>a

按ctrl+E生成如下代码

<div id="header"> <div id="logo"></div> <ul class="nav"> <li class="item-1"><a href=""></a></li> <li class="item-2"><a href=""></a></li> <li class="item-3"><a href=""></a></li> <li class="item-4"><a href=""></a></li> <li class="item-5"><a href=""></a></li> </ul> </div>

其他指令可以百度:ZenCodingCheatSheet.pdf  获得全部简写指令

 

zen-Coding在Notepad++中的使用参考如下文档

http://www.cnblogs.com/cobby/archive/2012/05/09/2492473.html

EditPlus 3.7 内置 zen-Coding插件 所以只需要配置相应的快捷键即可

 

zen-Coding的使用