快捷使用 -Emmet
快捷使用 -Emmet
快捷使用 -Emmet

HTML 布局_01 子元素

1
2
3
4
5
6
7
8
ul>li*4>{tab$}  按下tab 后 

<ul>
    <li>tab1</li>
    <li>tab2</li>
    <li>tab3</li>
    <li>tab4</li>
</ul>

e_01

HTML 布局_02 id 和 class

1
2
3
4
5
6
7
8
ul.da#fei>li*4>{tab$}  按下tab后

<ul class="da" id="fei">
    <li>tab1</li>
    <li>tab2</li>
    <li>tab3</li>
    <li>tab4</li>
</ul>

e_02

HTML 布局_03 兄弟元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div.item*3>div.title{标题$}+div.val{内容$}  按下tab后

<div class="item">
    <div class="title">标题1</div>
    <div class="val">内容1</div>
</div>
<div class="item">
    <div class="title">标题2</div>
    <div class="val">内容2</div>
</div>
<div class="item">
    <div class="title">标题3</div>
    <div class="val">内容3</div>
</div>

e_03

HTML 布局_04 自定义属性

1
2
3
4
5
6
div>p[data-fei=fei]  按下tab键
div>p[data-fei="fei"]  按下tab键

<div>
    <p data-fei="fei"></p>
</div>

demo 复杂实例

1
2
3
4
5
6
7
8
9
10
11
12
13
div#header>nav#container>ul.self-tabs>li.self-tabs-item*3>a[href="javascript:void(0)"]

按下tab键

<div id="header">
    <nav id="container">
        <ul class="self-tabs">
            <li class="self-tabs-item"><a href="javascript:void(0)"></a></li>
            <li class="self-tabs-item"><a href="javascript:void(0)"></a></li>
            <li class="self-tabs-item"><a href="javascript:void(0)"></a></li>
        </ul>
    </nav>
</div>

CSS 布局

1
2
3
4
5
6
w20  按下tab后
width: 20px;

w20+h30    按下tab后
width: 20px;
height: 30px;

隐式标签

1
2
3
4
5
.foo   按下tab后
<div class="foo"></div>

#bar   按下tab后
<div id="bar"></div>

Emmet 官网