您的位置:首页 > 其它

emmet 基本使用方法

2015-05-14 16:33 211 查看
官网:http://docs.emmet.io/

返回上级:^

输入: div+div>p>span+em

输出:

<div></div>
<div>
<p><span></span><em></em></p>
</div>


添加多个类

输入: div.a1.a2.a3

输出: <div class="a1 a2 a3"></div>

自定义属性:[]

输入: td[title="Hello world!" colspan=3]

输出: <td title="Hello world!" colspan="3"></td>

计数:$

用来计数重复元素

通过使用@n来改变计数的起始数据

在$后添加@- 是数据递减

demo1demo2demo3demo4
输入ul>li.item$*3 ul>li.item$$$*3 ul>li.item$@3*3 ul>li.item$@-*3
输出
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>


<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
</ul>


<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>


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


插入文字:{}

输入: a{Click me}

输出: <a href="">Click me</a>

emmet无法使用的解决方法
在文件里输入html:xt,然后ctrl+e,回车。就出来了
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: