Zen Coding使用技巧

最新推荐文章于 2019-10-07 01:45:42 发布

weixin_30764137

最新推荐文章于 2019-10-07 01:45:42 发布

阅读量83

点赞数

原文链接：http://www.cnblogs.com/leohxj/archive/2012/05/28/2522208.html

版权

很不习惯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); $符号可以重复多次，代表一位数字。

转载于:https://www.cnblogs.com/leohxj/archive/2012/05/28/2522208.html

weixin_30764137

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Zen Coding使用技巧

很不习惯vim的移动方式，还是比较习惯emacs。最近又有一款很火爆的编辑器，sublime text 2 ,使用了一下，界面很舒服，跳转很快。加上ZenCoding,编写前端简直是神器啊，舒服啊！ps: 在sublime下，只支持缩写扩展。-------------------使用技巧----------------------------html:xt>div#h...
复制链接

扫一扫