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

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

关于Emmet的使用  

2013-03-29 13:49:34|  分类: 前端开发工具 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
如果想更改默认模板:
可以在Preferences->Browse Packages..-> Emmet -> emmet -> snippets.json 进行修改

HTML Abbreviations(HTML缩写
  1. ! or html:5
    html:5 or ! for an HTML5 doctype
    html:xt for an XHTML transitional doctype
    html:4s for an HTML4 strict doctype
  2. EASILY ADD CLASSES, IDS, TEXT AND ATTRIBUTES
    p.bar#foo

    <p class="bar" id="foo"></p>

    h1{foo}

    <h1>foo</h1>

    a[href=#]

    <a href="#"></a>

  3. NESTING

  4. GROUPING
    (.foo>h1)+(.bar>h2)

    <div class="foo">

    <h1></h1>

    </div> <div class="bar"> <h2></h2>

    </div>


  5. IMPLICIT TAG NAMES
    div.item

    <div class="item"></div>

    li for ul and ol
    tr for table,tbody,thead and tfoot
    td for tr
    option for select and optgroup
  6. MULTIPLICATION
    ul>li*3

    <ul> <li></li>

    <li></li>

    <li></li>

    </ul>

  7. NUMBERING
    ul>li.item$*3

    <ul>

    <li class="item1"></li> <li class="item2"></li> <li class="item3"></li>



  8. CSS Abbreviations

  9. VALUES
    w100

    width:100px;

    h10p+m5e

    height:10%;

    margin:5em;

    p -> %
    e -> em
    x -> ex
  10. EXTRA OPERATOR
    @f

    @font-face {
    font-family:;
    src:url();
    }

    @f+

    @font-face {
    font-family: 'FontName';
    src: url('FileName.eot');
    src: url('FileName.eot?#iefix') format('embedded-opentype'),
    url('FileName.woff') format('woff'),
    url('FileName.ttf') format('truetype'),
    url('FileName.svg#FontName') format('svg');
    font-style: normal;
    font-weight: normal;
    }


  11. FUZZY SEARCH
    ov:h and ov-h and ovh and oh

    overflow:hidden;


  12. VEND OR PREFIXES
    trs

    -webkit-transition: prop time;
    -moz-transition: prop time;
    -ms-transition: prop time;
    -o-transition: prop time;
    transition: prop time;

     -super-foo
  13. -webkit-super-foo: ;
    -moz-super-foo: ;
    -ms-super-foo: ;
    -o-super-foo: ;
    super-foo: ;

    -prefix 如 -wm-trf

    -webkit-transform: ;
    -moz-transform: ;
    transform: ;

    w -> -webkit-
    m -> -moz-
    s -> -ms-
    o -> -o-
  14. GRADIENTS
    lg(left,#ff 50%, #000)

    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #ff), to(#000));
    background-image: -webkit-linear-gradient(left, #ff 50%, #000);
    background-image: -moz-linear-gradient(left, #ff 50%, #000);
    background-image: -o-linear-gradient(left, #ff 50%, #000);
    background-image: linear-gradient(left, #ff 50%, #000);






  评论这张
 
阅读(1029)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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