ZenCoding Emmet 語法簡介 轉

2022-02-28 09:26:31 字數 2923 閱讀 9861

下面是一些常用的zen coding功能,目前vs2013的web essentials外掛程式已經支援。

可以做些啥呢?看下面這個複雜的例子:

div#oldiv>ol>li.item*6>span.red

按下tab鍵後,它會生成下面的**:

zencoding01span>

li>

zencoding02span>

li>

zencoding03span>

li>

zencoding04span>

li>

zencoding05span>

li>

zencoding06span>

li>

ol>

div>

使用css樣式語法可以建立乙個元素,並給它賦予id或class特性。

div#container.layout會生成下面的**:

div>

可以使用中括號建立任何特性。

div[title]會生成下面的**:

div>

也可以建立多個特性並給特性賦值:

input[placeholder="請輸入姓名" type="text"]會生成下面的**:

先要建立乙個元素,然後才能建立它的子元素。

比如,form#loginform.login>input[type="text"]會生成下面的**:

form>

使用zen coding可以很輕鬆地建立兄弟元素。

footer>div>a+input可以生成下面的**:

a>

div>

footer>

>符號會降低元素的層次,然而^符號的作用相反,它是用來提公升元素的層次的,而且還可以提公升多個級別。比如,1^可以提公升乙個級別,4^可以提公升4個級別。該功能不常用。

footer>div>a+input^^p,p標籤要在input級別的基礎上提公升2個層次,這樣p標籤就和最外層的footer標籤處於同一級別,所以,生成的**如下:

a>

div>

footer>

p>

建立n個同樣的元素。

ul>li*6會生成下面的**:

li>

li>

li>

li>

li>

li>

ul>

當使用乘積*建立n個同樣的元素時,可以使用$給它們新增乙個自增的數字。注意:使用多個$操作符(如$$)會建立使用多個0填充的數字。

ul>li#id$$$*4會生成下面的**:

li>

li>

li>

li>

ul>

要給元素輸入文字時,可以使用{}符號。

ul>li*10>span會生成以下**:

windows 1span>

li>

windows 2span>

li>

windows 3span>

li>

windows 4span>

li>

windows 5span>

li>

windows 6span>

li>

windows 7span>

li>

windows 8span>

li>

windows 9span>

li>

windows 10span>

li>

ul>

聯合多個功能可以更快地編寫一些相當酷的html,甚至可以為模板建立一些knockout.js的繫結,然後只需要改變屬性名就行了。

例如section[data-bind="foreach:customers"]>div*4>input[type="text" data-bind="text:$$"]會生成下面的**:

div>

div>

div>

div>

section>

組合是zen coding中強大的功能,它可以建立複雜的表示式。

例如div>(header>div)+section>(ul>li*2>a)+footer>(div>span)可以生成下面的**:

div>

header>

a>li>

a>li>

ul>

span>

div>

footer>

section>

div>

日本語業務単語

最近日本語 一生懸命勉強 教 願 品目 延滯金 大體 無料 鏈結會計 目的 利子 実行 代替品 質問 用途 収入 必要 番號 送付 說明 科目 擔當者 変更 組織 固定 前払 金 事前 記述 含 資產 出力 既存 正常 位置 購買 該當 資料 対応 紹介 実際 帳票 請求書 予定 関係 移動 稅法 ...

提示語 要善用「提示語」

作為一名律師受託為當事人撰寫合同文字或其他法律文書是經常性工作。有關合同文字和法律文書的範本格式隨手可查,一般是不會出現差錯的。但是合同文字和法律文書的內容,卻是一百個人有一百種寫法,沒有統一的內容可轉殖。因為每個當事人委託律師代書法律文書的內容和期望達到的目的各不相同,特別是法律文書所涉及的事項是...

一級擬音語擬態語

一級擬音語擬態語 嫌 不 無奈 提心吊膽 堂 堂堂的 飄 落 撲簌簌 落下 捏一把汗 提心吊膽 1癟,不臌,2餓,空 3點頭哈腰 腹 1耷拉著2滑溜 3 時間 拖拖拉拉 又肥又大,肥大,人 肥胖,肌肉鬆弛 1肥大,2達達達地 吹喇叭 1蹣跚,搖晃 2猶豫不定 3糊里糊塗,信步而行,溜達 1 懸空的東...