快速编写代码技巧

快速编写代码技巧：

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>