编辑神器sublime中使用Emmet的实例

最新推荐文章于 2020-03-07 21:54:56 发布

孤星明月

最新推荐文章于 2020-03-07 21:54:56 发布

阅读量773

点赞数

分类专栏： sublime

本文链接：https://blog.csdn.net/zctyhj/article/details/49047561

版权

sublime 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

对于神器sublime不介绍，对于Emmet不介绍，对于用法不介绍

实例一：

html>(head>title{document})+body>div.container>.header+.content+.footer ->tab

<html>
<head>
	<title>document</title>
</head>
<body>
	<div class="container">
		<div class="header"></div>
		<div class="content"></div>
		<div class="footer"></div>
	</div>
</body>
</html>

实例二：

div.nav>ul>(li>a[href=#]{首页})+(li>a[href=#]{导航$})*6 ->tab

<div class="nav">
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">导航1</a></li>
		<li><a href="#">导航2</a></li>
		<li><a href="#">导航3</a></li>
		<li><a href="#">导航4</a></li>
		<li><a href="#">导航5</a></li>
		<li><a href="#">导航6</a></li>
	</ul>
</div>

实例三：

a[href="javascript:void();"].toolbar-item.toolbar-item-weixin*4 ->

<a href="javascript:void();" class="toolbar-item toolbar-item-weixin"></a>
<a href="javascript:void();" class="toolbar-item toolbar-item-weixin"></a>
<a href="javascript:void();" class="toolbar-item toolbar-item-weixin"></a>
<a href="javascript:void();" class="toolbar-item toolbar-item-weixin"></a>

实例四：

首页
公司简介
公司动态
关于我们
联系我们

转换成导航，选择文本，再按shift+ctrl+g，弹出：Enter Wrap Abbreviation（输入扩展缩写），在其中输入：

.nav>ul>li.nav-item$*>a[href=#]

<div class="nav">
	<ul>
		<li class="nav-item1"><a href="#">首页</a></li>
		<li class="nav-item2"><a href="#">公司简介</a></li>
		<li class="nav-item3"><a href="#">公司动态</a></li>
		<li class="nav-item4"><a href="#">关于我们</a></li>
		<li class="nav-item5"><a href="#">联系我们</a></li>
	</ul>
</div>