zoukankan      html  css  js  c++  java
  • 结合Zen Coding快速编写HTML代码(sublime text2篇)

    首先说下,如何在sublime text2加上zen coding插件

    按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2

    import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

                               

    重启看到如上图所示,代表Package Control 安装成功 

    接下来就是暂时分享下自己还不是那么熟悉的zen coding的语法

    1.新建html

    不知道大家新建一个html 页面时,是如何输入文档声明和 head 那一坨东西的。现在有了Zen Coding,只需输入几个字母就能立马生成相应文档声明的 html 结构框架

    html:4t (HTML 4.01 Transitional)
    html:4s (HTML 4.01)
    html:xt (XHTML 1.0)
    html:xs (XHTML 1.0 Strict) 
    html:xxs (XHTML 1.1)
    html:5 (HTML5)

    然后按上ctrl+E,马上就可以新建成功

    2.若是你对CSS的选择器比较熟悉,就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码。

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

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

    <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>

    3.head 中常用到的一些缩写

    meta:utf, meta:compat
    style, link:css, link:print, link:favicon, link:rss,
    script, script:src

     以上介绍的仅仅是有关HTML的缩写,CSS的缩写就更多了,建议查看 Zen Coding 小抄,学习CSS 的 Zen Coding 方式

    相关链接:http://rpsh.net/archives/zen-coding-npp/

                  http://www.cn-sass.com/blog/32.html

  • 相关阅读:
    database使用
    画图工具
    宝塔面板权限不足问题解决
    nginx查看并发数量
    台式机未插入扬声器或者耳机
    键盘出现乱码解决
    lnmp宝塔面板问题
    nginx+mysql双主搭建
    zabbix客户端安装
    java生产条形码
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/3953512.html
Copyright © 2011-2022 走看看