Zen Coding使用技巧

很不习惯vim的移动方式，还是比较习惯emacs。

最近又有一款很火爆的编辑器，sublime text 2 ,使用了一下，界面很舒服，跳转很快。

加上ZenCoding,编写前端简直是神器啊，舒服啊！

ps: 在sublime下，只支持缩写扩展。

-------------------使用技巧----------------------------

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

你能想象这样的一行代码，展开时候会是什么样子么：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
</head>
<body>
    <div id="header">
        <div id="logo"></div>
        <ul id="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>
</body>
</html>

对，你没看错。

是不是丫的很神奇~~~lol

----------------展开缩写-----------------

Element: 直接扩展标签，比如h1-> <h1></h1>

Element#idName: 带上id属性

Element.className: 带上class属性

Element>N: 父子关系

Element+N: 兄弟关系

Element*n: 倍增

E$*n: 条目编号，比如(ul#nav>li.item-$*5); $符号可以重复多次，代表一位数字。

 

posted on 2012-05-28 19:33  leohxj  阅读(1371)  评论(0)    收藏  举报

导航