注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

Zen Coding – WebUI 的敏捷开发  

2011-12-01 16:39:47|  分类: 前端开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自: 网络

上次在北京看到善用佳软的 xBeta 演示 VIM 的时候,我就被强烈震撼到了。VIM 的确是个强大的编辑器,它可以折腾出很多种强大的功能。今天看到这个叫 Zen Coding 的东西,我强烈推荐给经常和 HTML CSS 打交道的朋友。

下面的动态演示图,只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成,秒杀了你自定义的各种快捷键或者 AHK 的热字符串,以智能简洁高效的缩短输入,带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。

Zen Coding   超快地写网页代码[图] | 小众软件

先举一个复杂的例子:zen-coding 可以把这样的代码:div#header>ul.navigation>li*4>a,变成下面的 HTML 代码

<div id=”header”>
    <ul class=”navigation”>
        <li><a href=”"></a></li>
        <li><a href=”"></a></li>
        <li><a href=”"></a></li>
        <li><a href=”"></a></li>
    </ul>
</div>

看到这熟悉的语法结构,会 CSS 的朋友一定会惊声尖叫!最妙的是那个“*4”,直接生成 4 个 li 代码了。没错,Zen Coding 就是这样牛叉的东西,Zen Coding 分为 Zen HTML 和 Zen CSS 两部分。这两部分功能是以插件的形式来实现的。如果你用 NetBeans、SlickEdit、Sublime、TextMate、TopStyle、UltraEdit、WebIDE and IntelliJ IDEA、Dreamweaver、Aptana 都可以在官方下载页面找到相关的插件。

即使你不使用上面提到的编辑器,那么还有一种选择,点击下载页面的最后一个链接: Zen Coding for <textarea>。这是一个网页版的 Zen Coding!打开 example.html 之后,把光标定位到文本框里面,按下 Ctrl + E 试试吧。

网页版快捷键说明:

  1. Ctrl + E:展开代码
  2. Ctrl + D:向外快速选中代码块
  3. Shift + Ctrl + D:向内快速选中代码块
  4. Shift + Ctrl + A:输入一个缩写,自动展开并包围所选代码
  5. Ctrl + Alt+→ :光标智能跳转到下一个编辑点(自己试试就知道多体贴了)
  6. Ctrl + Alt+←:光标智能跳转到上一个编辑点
  7. Ctrl + L:选择一行

官方演示视频:Zen CSSZen HTML。另外,缩写的含义请看:Zen CSS PropertiesZen HTML Elements各种插件的安装方法请看官方 wiki

  评论这张
 
阅读(172)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018