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

米欧互联

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

sublime text2扩展的使用  

2016-03-22 21:25:37|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

扩展

  ST2是支持插件扩展的,首先,我们需要安装Package Contro,ctrl+`调出命令行工具,输入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())

  回车即可。

  点击Preferences→Package Control,显示以下弹窗:

  n Disable Package :禁用插件

  n enable Package :启用插件

  n Install Package :安装插件

  n List Package :查看已安装插件列表

  n Remove Package :移除插件

  n Upgrade Package :升级插件


 ZenCoding:前端必备,快速开发HTML/CSS 【已经改名了 Emmet(原名ZenCoding)

输入 div.wrapper>div.header+div.main+div.footer 按下Tab,立刻变成

<div class="wrapper">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>


或者按下ctrl+alt+enter,激发zencoding控制台,可看到整个动态的过程。(没发现)

展开缩写

展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢?嗯,首要原因是语义化:“选择器”意为选择一些东西,但是在这里我们事实上是生成 一些东西,是写一个长代码的较短的替代。其次,它只是使用真实的CSS选择器语法的一个小的子集,并添加了一些新的操作符。

这里是一个支持的属性和操作符的列表:


  • 元素名称(divp);
  • E#id 
    使用id的元素(div#contentp#introspan#error);
  • E.class 
    使用类的元素(div.headerp.error.critial). 你也可以联合使用class和idID: div#content.column.width;
  • E>N 
    子代元素(div>pdiv#footer>p>span);
  • E+N 
    兄弟元素(h1+pdiv#header+div#content+div#footer);
  • E*N 
    元素倍增(ul#nav>li*5>a);
  • E$*N 
    条目编号 (ul#nav>li.item-$*5);

正如你能看到的,你已经知道如何使用Zen Coding了:只是些一个简单的仿CSS选择器(呃,“缩写”抱歉),就像这样…

div#header>img.logo+ul#nav>li*4>a

<div id="header">
<img src="" alt="" class="logo">
<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>



 JsFormat,格式化js代码,这个插件很有用,我们有时在网上看到某些效果,想查看是怎么实现的,但是代码被压缩过,很难阅读,不用怕,用ST2打开,按下ctrl+alt+5(这是我设置的快捷键),即可让代码还原,莫非是武林中失传已久的“还我靓靓拳”

Goto-CSS-Declaration,跳转到css文件该class的声明处,方便修改查看,如图下所示,注意对应的css文件要同时打开才行。




------------------------
https://www.qianduan.net/zen-coding-a-new-way-to-write-html-code/
http://www.gezila.com/tutorials/1290_3.html
  评论这张
 
阅读(90)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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