0
点赞
收藏
分享

微信扫一扫

使用Emmet快速编写代码(持续更新)

米小格儿 2022-01-15 阅读 77

文章目录

HTML部分

1. 添加类,id,文本和属性

2. 嵌套和分组

符号表示
>子元素符号,表示嵌套的元素
+同级标签符号
^可以使该符号前的标签提升一行
()分组

3. 隐式标签

在过去版本中,可以省略掉div,即输入.item即可生成< div class=“item”>< /div>。现在如果只输入.item,则Emmet会根据父标签进行判定。比如在< ul>中输入.item,就会生成< li class=“item”>< /li>

父亲自动补全
ul、olli
table, tbody, thead and tfoottr
trtd
select and optgroupoption
emspan

4. 定义多个元素* 和 编号$

  <!-- 自增符号:$,ul>li.item$*4,类名自增 -->
  <ul>
  	<li class="item1"></li>
  	<li class="item2"></li>
  	<li class="item3"></li>
  	<li class="item4"></li>
  </ul>
  
  <!-- h$[title=item$]{little boy$}*3 ,
  标签名和属性值,标签内容一起自增-->
  <h1 title="item1">little boy1</h1>
  <h2 title="item2">little boy2</h2>
  <h3 title="item3">little boy3</h3>
 
  <!-- ul>li.item$$*3 ,自增从0开始,
  再加一个$,$$*3-->
  <ul>
  	<li class="item01"></li>
  	<li class="item02"></li>
  	<li class="item03"></li>
  </ul>

<!-- ul>li.item$@-*3 ,自增顺序倒着来,
后面加@- ,$@-*3 -->
  <ul>
  	<li class="item3"></li>
  	<li class="item2"></li>
  	<li class="item1"></li>
  </ul>
 
 <!-- ul>li.item$@3*6 ,自增顺序,按照指定阶段来显示,
 后面加上@数字*数字,$@3*6,从3开始 共6个序号,包含起始数字本身,序号范围:就是3-(3+6-1)3~8 --> 
  <ul>
  	<li class="item3"></li>
  	<li class="item4"></li>
  	<li class="item5"></li>
  	<li class="item6"></li>
  	<li class="item7"></li>
  	<li class="item8"></li>
  </ul>

5. 添加虚拟文字

默认的 lorem 每次都是30个单词,可以指定单词个数,后面写上数字,lorem10 将生成10个单词的虚拟文本

	<!-- ul>.item*3>lorem5 -->
	<ul>
		<li class="item">Lorem ipsum dolor sit amet.</li>
		<li class="item">A itaque architecto quas recusandae.</li>
		<li class="item">Deleniti, necessitatibus porro perspiciatis ab!		</li>
	</ul>

6. 其它

img

CSS部分

1. 属性和属性值的缩写

  • 连字符 - ,连接多个属性值
  • 使用 加号 + ,连接多个属性
  • 两个连字符 - -,一个是表示属性值连接的,一个是表示负值的
/*m10-20,带两个属性值的*/
margin: 10px 20px;
 
/*m-10-20 带一个负值 一个正值的*/
margin: -10px 20px;
 
/*m-10--20 带两个负值的*/
margin: -10px -20px;

/*m-10--20--30 带三个负值的*/
margin: -10px -20px -30px;
 
/*★ 同时定义多个属性*/
/*m10+bd20,同时定义两个属性*/
margin: 10px;
border: 20px;
 
/*m10+bd20+bg#3,同时定义三个属性*/
margin: 10px;
border: 20px;
background: #333;
 
/*m10-20+bd20,同时定义两个属性,第一个属性两个属性值*/
margin: 10px 20px;
border: 20px;

2. 属性值的单位

/*★ 属性值的单位*/
/*m10  整数值,默认单位是px*/
margin: 10px;
 
/*m10.5 小数值,默认单位是em*/
margin: 10.5em;


/*属性值单位的简写 */
/*m10p*/
margin: 10%;
 
/*m10e*/
margin: 10em;
 
/*m10x*/
margin: 10ex

3. 其它

/*p!+c#3!		*/
padding:  !important;
color: #333 !important;		


举报

相关推荐

0 条评论