woff 發表於 2010-5-12 11:09:27

好用的zen-coding

如果需要手工刻css+html時,你的編輯器剛好有支援,那就省事了。
雖然方便,但前提是你已經熟悉css selector,不然恐怕還是一頭霧水。

這個工具可以讓你用css selector語法反向產出html!例如,你在編輯器中輸入:   div#panel.class1>p.section1+p.section1
他可以幫你展開成html:    <div onclick="Module.panelhandler" id="panel" class="class1">
      <p class="section1"></p>
      <p class="section1"></p>
    </div>
如果要產生一串list:ul.menu>li.item*5
他就幫你展開:# <ul class="menu">
   <li class="item"></li>
   <li class="item"></li>
   <li class="item"></li>
   <li class="item"></li>
   <li class="item"></li>
</ul>
等等,還有許多好用的語法,可以上官網:http://code.google.com/p/zen-coding/找找看使用方式。裡面也可以找到支援的編輯器列表...(嗯嗯,Notepad++有支援,其他還有很多,可惜我常用的ultraedit有點跛腳...)

更進階的功能據說還可以讓你把內容與selector做matching,然後組出完整的html,不過好像還在開發中。
頁: [1]
查看完整版本: 好用的zen-coding