Emmet 使用

HTML

 

后代：>

　　缩写：nav>ul>li

 

兄弟：+

　　缩写：div+p+bq

 

上级节点：^

　　缩写：div>ul>li^div

　　<div>

　　　　<ul> <li></li> </ul>

　　　　<div></div>

　　</div>

 

乘法：*

　　缩写：ul>li*5 

 

自增符号：$

　　ul>li.item$*5        从 1 开始自增

　　ul>li.item$$$*5    从 001 开始自增

　　ul>li.item$@3*5   从 3 开始自增

 

分组：()

　　缩写：div>(header>ul>li*2>a)+footer>p

　　<div>

    　　<header>

        　　<ul>

            　　<li><a href=""></a></li>

            　　<li><a href=""></a></li>

        　　</ul>

   　　 </header>

    　　<footer>

       　　 <p></p>

    　　</footer>

　　</div>

 

文本：{}

　　缩写：a{Click me}

　　<a href="">Click me</a>

 

 

---

 

 

CSS

 

　　fl → float: left;

 

　　poa → position: absolute;

 

　　por → position: relative;

 

　　m4-6 → margin:4px6px;

 

　　p4-6-8-7 → padding:4px6px8px7px;

 

　　lh2 → line-height:2;

 

　　fw400 → font-weight:400;

　　fw+ → font-weight: bold;

 

　　bg+ → background:#fff url() 0 0 no-repeat;

 

　　c#f00 → color: #ff0000;

 

　　p!+m10e!  → padding:  !important;margin: 10em !important;

 

　　bd5#0s → border: 5px #000 solid:

　　-bdrs →

　　　　-webkit-border-radius: ;

　　　　-moz-border-radius: ;

　　　　border-radius: ;

 

 

　　在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo： 

　　Css代码 

　　　　-webkit-super-foo: ;  

　　　　-moz-super-foo: ;  

　　　　-ms-super-foo: ;  

　　　　-o-super-foo: ;  

　　　　super-foo: ;  

　　如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀： 

　　Css代码 

　　　　-webkit-transform: ;  

　　　　-moz-transform: ;  

　　　　transform: ;  

　　前缀缩写如下： 

• w 表示 -webkit-
• m 表示 -moz-
• s 表示 -ms-
• o 表示 -o-

 

 

参考网站：

http://code.z01.com/emmet/all.html

http://code.z01.com/emmet/#a1-1