码迷,mamicode.com
首页 > 其他好文 > 详细

sublime中Emment插件用法

时间:2018-08-01 22:24:27      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:family   sublime   修改   --   sof   嵌套   创建   用法   head   

---恢复内容开始---

注:所有命令生效按Tab

 

搭建框架:
html:5

嵌套操作,
1 使用>生成子元素
div>ul>li
tr>td *3 生成三个td标签

2、使用“+”生成兄弟元素
div+p+h1
<div>
<p>
<h1>

3、使用^生成父元素
div>p>span+h1^a
<div>
  <p>
    <span></span>
    <h1></h1>
  </p>
  <a href=""></a>
</div>

4.使用“()”将元素分组(可以一次创建页面框架)
div>(header>ul>li*2)+footer>p
<div>
  <header>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

属性操作(#表示id . 表示class)
div#header+div.page+div

使用[]标记其他属性
td[title=‘hello‘ colspan=3]

使用$符号实现1到n的自动编号
li.item$*3
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
可以在$后面添加@n 修改编号的起始值
li.item$@3*3
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>

可以使用{}添加文本内容
a[href=me.html]{click me}
<a href="me.html">click me </a>

---恢复内容结束---

sublime中Emment插件用法

标签:family   sublime   修改   --   sof   嵌套   创建   用法   head   

原文地址:https://www.cnblogs.com/zidian1983/p/9403814.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!