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

来源：互联网发布：文章cms 编辑：程序博客网时间：2024/05/16 05:55

对于神器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>

0 0