您现在的位置是:首页 >学无止境 >vscode代码缩写网站首页学无止境
vscode代码缩写
简介vscode代码缩写
一、嵌套 >:输入div>ul>li,按下Tab键
<div>
<ul>
<li></li>
</ul>
</div>
二、并列+:输入div+p,按下Tab键
<div></div>
<p></p>
三、重复*:输入li*3,按下Tab键
<li></li>
<li></li>
<li></li>
四、返回 ^:输入ul>li*3^p,按下Tab键
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
五、分组 ():输入(ul>li*2)+p,按下Tab键
<ul>
<li></li>
<li></li>
</ul>
<p></p>
六、属性添加:
(1)class填充:div#header+div.container+div.foot#footer,按下Tab键
<div id="header"></div>
<div class="container"></div>
<div class="foot" id="footer"></div>
(2)属性填充:input[name=user value=xx],按下Tab键
<input type="text" name="username" value="xx">
(3)文本填充:ul>li{小李}*3按下tab键
<ul>
<li>小李</li>
<li>小李</li>
<li>小李</li>
</ul>
(4)循环填充:select>option{$}*3按下tab键
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
(4)循环+属性填充:select>option[value='北京']{$}*3>a[href='#']{北京}按下tab键
<select name="" id="">
<option value="北京">1<a href="#">北京</a></option>
<option value="北京">2<a href="#">北京</a></option>
<option value="北京">3<a href="#">北京</a></option>
</select>
七、编序 $:ul>li.light-$*3,按下Tab键
<ul>
<li class="light-1"></li>
<li class="light-2"></li>
<li class="light-3"></li>
</ul>
八、内容{}:输入ul>li{$}*3,按下Tab键
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
九、其他:在CSS中还有许多快捷输入机巧
输入w100,按下Tab键,快捷输入width: 100px;
输入h100,按下Tab键,快捷输入height: 100px;
输入poa,按下Tab键,快捷输入position: absolute;
输入por,按下Tab键,快捷输入position: relative;
输入tdn,按下Tab键,快捷输入text-decoration: none;
输入db,按下Tab键,快捷输入display: block;
输入df,按下Tab键,快捷输入display: flex;
输入fdc,按下Tab键,快捷输入flex-direction: column;
输入bd1px#cccsolid,按下Tab键,快捷输入border: 1px #ccc solid;
参考:https://blog.csdn.net/weixin_72155467/article/details/129355660
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。