快速编写代码技巧:
CSS样式快速编写
以下是一些常用的快捷输入:
书写 效果 w10 width: 10px h10 height: 10px m0 margin: 0px p10-20 padding: 10px 20px; bd border: 1px solid #000; bb border-bottom: 1px solid #000; posa position: absolute; posf position: fixed; t10 top: 10px; l10 left: 10px; z10 z-index: 10; bgc background-color: #fff; bgi background-image: url(); bgr background-repeat: no-repeat; bgs background-size: contain; flr float: right; fl float: left; cl clear: both; vv visibility: visible; ovh overflow: hidden; trftx transform: translateX(x); trfty transform: translateY(y); trfr transform: rotate(angle); db display: block; dib display: inline-block; di display: inline; df display: flex; jcc justify-content: center; jcsb justify-content: space-between; aic align-items: center; fxww flex-wrap: wrap;
HTML快速编写
生成代码结构:1. 按Tab键 2.根据提示,手动选择
1. 子代
div>nav>p
<div> <nav> <p></p> </nav> </div>
2. 兄弟
div>p+a
<div> <p></p> <a href=""></a> </div>
3. 多个
div>nav>p*2
<div> <nav> <p></p> <p></p> </nav> </div>
4. 分组
div>(nav>p)*2
<div> <nav> <p></p> </nav> <nav> <p></p> </nav> </div>
5.内容
div>p{黑马哈哈}
<div> <p>黑马哈哈</p> </div>
6. 顺序 $
div{$}*2
<div>1</div> <div>2</div>
div{黑马哈哈$}*2
<div>黑马哈哈1</div> <div>黑马哈哈2</div>
div{黑马哈哈$$}*2
<div>黑马哈哈01</div> <div>黑马哈哈02</div>
div{黑马哈哈$$@3}*2
<div>黑马哈哈03</div> <div>黑马哈哈04</div>
7. id 和 class
#div .div <div id="div"></div> <div class="div"></div>
8. 属性[]
a[href=# id=aa class=bg]
<a href="#" id="aa" class="bg"></a>
综合练习:
每行放5个盒子,每个盒子竖着排列(图片+文字)
div.nav>(.item>img[src=KaTeX parse error: Expected '}', got 'EOF' at end of input: .png]+p{菜单})*10
<div class="nav"> <div class="item"> <img src="1.png" alt=""> <p>菜单1</p> </div> <div class="item"> <img src="2.png" alt=""> <p>菜单2</p> </div> <div class="item"> <img src="3.png" alt=""> <p>菜单3</p> </div> <div class="item"> <img src="4.png" alt=""> <p>菜单4</p> </div> <div class="item"> <img src="5.png" alt=""> <p>菜单5</p> </div> <div class="item"> <img src="6.png" alt=""> <p>菜单6</p> </div> <div class="item"> <img src="7.png" alt=""> <p>菜单7</p> </div> <div class="item"> <img src="8.png" alt=""> <p>菜单8</p> </div> <div class="item"> <img src="9.png" alt=""> <p>菜单9</p> </div> <div class="item"> <img src="10.png" alt=""> <p>菜单10</p> </div> </div>