前端工程師CSS小課:float浮動屬性

前端工程師CSS小課:float浮動屬性
前端工程師CSS小課:float浮動屬性

正在學習前端工程師課程的同學過來~CSS系列課程登場嘍!!今天要介紹的是float浮動屬性!

CSS 的 float (浮動) 屬性

CSS 的 float (浮動) 屬性是前端工程師在做網頁排版時,必用的基本語法之一。使用 CSS float 浮動屬性,可將一個元素往左移或是往右移,並允許其他元素圍繞它(例如文繞圖、圖繞文等)。

float 浮動屬性的使用時機

使用 <div> 等區塊元素排版時,預設的排列方式都是由左至右、由上至下。但若想要讓多個區塊並排、或是二欄、三欄等多欄網頁前端排版時,就需要使用 float 屬性。

如下方例子,若我們使用一般的 div 區塊元素時,則所有的區塊就整齊的由左上出來,一個 <div> 區塊就佔用了一行。(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法)

See the Pen Float-example-1 by Tedutw (@Tedutw) on CodePen.

承上例,若在 CSS 中加一個「float: left;」,則結果如下(溫馨提示:可以點擊下例視窗左上方的「HTML 」與「CSS」按鈕來查看語法):

See the Pen Float-example-2 by Tedutw (@Tedutw) on CodePen.

這是因為「float」屬性使 div 區塊元素「漂浮」起來,不再形成 div 區塊占滿整行的情況

承上例,若把由左側開始「漂浮」的「float: left;」改成由右側開始「漂浮」的「float: right;」,則所有的區塊就會由右側開始「飄」出來,結果如下(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法):

See the Pen Float-example-3 by Tedutw (@Tedutw) on CodePen.

CSS 浮動屬性有三個參數:left、right 與 none。left 與 right 顧名思義,就是控制區塊由左側還是右側浮出用的,如上方兩個例子所示。而 none 就是不使用浮動參數的意思。

下方是另一個文繞圖排版的例子,就是文字的部分「不」設定 float 屬性,但是在 logo 圖片的部分使用浮動屬性「float:right;」,文字的部分則不使用浮動屬性。(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法)

See the Pen Float-example-4 by Tedutw (@Tedutw) on CodePen.

前端工程師想要做出兩欄或多欄的網頁,則可以善用 float 屬性搭配寬度需要進行初步的排版。

以下範例為兩欄的排版示例。兩個欄位視為兩個區塊, float 屬性都設定為「left」,左欄寬度為 20%;右欄為 80%:

See the Pen Float-example-5 by Tedutw (@Tedutw) on CodePen.

網路上有人說:前端工程師的網頁 layout 基石除了本章介紹的浮動(float) 屬性之外,還有下一張會介紹的清除浮動(clear)。想當前端工程師的各位同學們請先把本章再複習一次,並親自使用 codepen 自己練習一次程式,才會達到最佳的學習效果!

 

 

更多關於前端工程師的文章請點閱下方連結!!

 

 

 

其他閱讀

從哆啦A夢到 iPhone…為何 UI 設計用「圓角」就是比較討喜?

APCS 程式檢定,該從 CJava 還是 Python 下手?

【前端工程師CSS教學】float浮動屬性

AI人工智慧救地球!GoogleAI 保護環境還比人類快 3000

所有APCS認證要知道的事都在這!!()

前端工程師起步的t初學小課(22):數學物件

如何分辨全端,後端和前端工程師?還不知道的可是不行的喔~

前端工程師CSS小課:定位元素

前端工程師CSS小課:定位元素
前端工程師CSS小課:定位元素

正在學習前端工程師課程的同學過來~CSS系列課程登場嘍!!今天要介紹的是定位元素~

為了要設計出更複雜的網頁前端版面,前端工程師都必須知道 CSS 的所有「position 屬性」。如下所示,它有一大堆屬性值,這些屬性值不好理解且也不好記憶,但稍一設定不好,就會讓許多 CSS 區塊若入走鐘、重疊等窘境。這些屬性一個個介紹如下,也建議各位想當前端工程師的學員們把這頁加入網頁書籤中,以便日後方便查詢。

See the Pen CSS:Position 範例 by Tedutw (@Tedutw) on CodePen.

CSS:Positioning Elements 定位元素

CSS 定位屬性(positioning properties)是用來定位元素使用。它可將一個元素置於另一個元素之後,還可以指定當某個元素的內容太大時該如何做。

所有的元素都可用 top(上)、bottom(下)、left(左) 與 right(右) 屬性來定位。但若沒事先將「定位屬性」設置好的話,以上四種屬性(top、bottom、left 與 right)皆不起作用。它們亦會依照定位方法的不同,而以不同的方式呈現。

靜態定位(position: fixed)

「靜態定位(position: fixed)」是所有 HTML 元素的預設值。當元素為「靜態定位(position: fixed)」時,會遵循「Normal flow (指從左到右、上到下的常態佈局)」來排列。

靜態定位的元素不受 top、bottom、left 與 right 屬性的影響。如下例,儘管我們 CSS 設定為「top: 30px;right: 5px;」(上方距離30px、右側距離50px),被靜態定位的 HTML 元素,排版仍不受這些 CSS 影響。

See the Pen position_static by Tedutw (@Tedutw) on CodePen.

固定定位(position:fixed)

固定定位(position: fixed)的元素會相對於瀏覽器視窗來定位,這意味著即便頁面捲動,它還是會固定在相同的位置。

不同於靜態定位,固定定位(position: fixed)的元素可由 top、bottom、left 與 right 屬性的來指定位置。我們將上一段「靜態定位(position: fixed)」的範例,其中的 CSS 「position:static」改為「position:fixed」,則排版受到「top: 30px;right: 5px;」(上方距離30px、右側距離50px)的屬性影響,如下所示:

See the Pen position_fixed by Tedutw (@Tedutw) on CodePen.

固定定位(position: fixed)的元素會從「Normal flow (從左到右、上到下的排列)」的常態佈局中移除。所以其他未設定為「固定定位(position: fixed)」的元素,仍然依照「左到右、上到下」的排列,彷彿其中不存在固定定位的元素般。而 固定定位的元素可與其他的元素重疊。

相對定位(position:relative)

所謂的「相對」,是以原本正常的位置為中心點,依照元素偏移原本位置多少而定數值。相對定位(position:relative)的元素可以結合 top、bottom、left、right 等屬性,使其元素「相對地」偏移原本該出現的位置。

如以下的例子,我們在原本的位置安插粉紅色背景的文字(文字為「相對定位」)區塊,並且設定該區塊相對於原本該出現的區塊「上方留空間 5px(top: 5px;)、 左方留空間 5px(left: 5px;)」。

See the Pen position_relative by Tedutw (@Tedutw) on CodePen.

相對位置的元素內容可移動到指定位置、也可以與其他的元素重疊。但是該元素原本該出現的正常位置,會被保留而不會消失。

相對值不能用於 table cells、columns、column groups、rows、row groups 或是 captions。

絕對定位(position:absolute)

不得不說,絕對定位(position:absolute)是網頁前端比較弔詭的定位屬性。absolute 與 relative 的行為很像,不一樣的地方在於 absolute 元素的定位是相對於父層元素的位置、relative 元素則是相對於他本該出現的位置。

當元素的 position 設定為 absolute 後,它就會看它父層的元素是否有被設定為 relative、absolute 或是 fixed,若有,則以父元素為定位的基準點;若無,則以該網頁頁面(“body”)的左上角為定位點置,看起來就是這張網頁的絕對位置一樣。

以下範例為兩個絕對定位(position:absolute)元素的範例,右上方的元素的父元素 position 沒有設定,因此被默認為「static」——也就是不屬於 relative、absolute、fixed 或是 inherit 的任一個,因此該元素會以整個網頁區域為定位點,從最上方往下移動 30 px、從最右方往左移動 30 px;而另一個元素的父元素 position 是 relative,因此會以父元素為定位點,從最上方往下移動 30 px、從最右方往左移動 30 px。

See the Pen position: absolute by Tedutw (@Tedutw) on CodePen.

同學們可以點擊以上範例中左上角的「HTML」與「CSS」按鈕來練習 coding。

所有的 CSS 版面配置:Positioning Elements 定位元素介紹到此結束。光看以上的解釋,會容易搞混。此時,不妨回到此章節的最前面的範例,點擊範例框左上角的「HTML 」與「CSS」按鈕來研究原始碼,並且親自練習一次這些 CSS 碼,試試各種不同的 position 屬性所呈現的效果。未來想要成為前端工程師的話,就請多練習幾遍。本系列「前端工程師課程」下一章即將介紹網頁 layout 基石之一——浮動(float)屬性

 

更多關於前端工程師的文章請點閱下方連結!!

 

 

 

其他閱讀

從哆啦A夢到 iPhone…為何 UI 設計用「圓角」就是比較討喜?

APCS 程式檢定,該從 CJava 還是 Python 下手?

【前端工程師CSS教學】float浮動屬性

AI人工智慧救地球!GoogleAI 保護環境還比人類快 3000

所有APCS認證要知道的事都在這!!()

前端工程師起步的t初學小課(22):數學物件

如何分辨全端,後端和前端工程師?還不知道的可是不行的喔~

超夯網頁前端小教室:display與visible

超夯網頁前端小教室:display與visible
超夯網頁前端小教室:display與visible

想學習網頁前端的你絕對不能不知CSS!今天要來跟大家就紹的就是display 屬性與visibility屬性!

本篇介紹網頁前端排版的兩個CSS屬性:display 屬性與 visibility 屬性。

CSS:display 屬性

display:block

對於 CSS 語法來說,網頁前端的每個元素都是一個矩形盒(rectangular box)模型。使用「display」屬性可以決定「盒(box)」的呈現方式。

又「區塊元素(block element)」則會佔用可用寬度的最大值,前後有換行符

以下範例分別顯示了是否有將<span>元素顯示為區塊元素(block element)的結果。在下方的顯示視窗中,按「CSS」可以觀看 CSS 的語法如何設定。

See the Pen display: block by Tedutw (@Tedutw) on CodePen.

上述範例的網頁前端 CSS 語法設定如下:

span.block{
  display:block;
}

display:inline

inline 元素只佔用可用寬度的最大值,並不強制換行。

將上一段範例的<span>元素,CSS 換成「display: inline」的結果如下。跟上一個範例一樣,在下方的顯示視窗中,按「CSS」可以觀看 CSS 的語法如何設定。

See the Pen display: block by Tedutw (@Tedutw) on CodePen.

上述範例的 CSS 語法設定如下:

span{
  display:inline;
}

display:none

「display:none」用來將元素隱藏使用,元素隱藏後就不佔用任何空間,在網頁前端頁面顯示時不會展現出來,就好像該元素不存在一樣。

以下範例中,我們將第 2、4 段設為「display:none」,其他設為「display:block」。

See the Pen display: none by Tedutw (@Tedutw) on CodePen.

上述介紹的「block」、「inline」、「none」都是最常用的 display 參數。display 還有很多其他次常用的參數值,如 list-item、table、table-cell、table-column、grid 等,會在往後的章節中一一介紹

visibility 屬性

visibility 屬性用於指定元素是可見的還是隱藏的。最常見的值是 visible 和 hidden

當我們想要隱藏園素食,有兩個方法:一是上一段介紹的,將「display」屬性設為「 none」參數;二是將「visibility」屬性設置為「hidden」來隱藏元素。

注意:以上兩個方法雖然都能將元素隱藏,但都呈現出不同的結果:

被「display:none」隱藏後的元素,就不會佔用任何的空間,就好像它從來都不存在一樣;而被「visibility:hidden」隱藏後的元素,雖然在網頁前端不會顯示,但仍佔用了對應的空間(就是被隱藏的元素有多大,網頁上空出來的空間就有多大),所以仍會影響排版。範例如下:

我們準備要將以下的例子,第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」。

See the Pen visible:hidden-before by Tedutw (@Tedutw) on CodePen.

將以上的第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」的結果如下:

See the Pen visible:hidden-after by Tedutw (@Tedutw) on CodePen.

由以上例子我們可知,同樣都是將元素隱藏,第一個<p>元素雖然被「visibility:hidden」隱藏了,但是仍遺留下空間;第二個被「display: none」隱藏的<p>元素則是完完整整的「被消失」,連原本的位置都不見了。

下一張我們將介紹網頁前端排版的另一個 CSS 屬性:Positioning Elements。

 

更多網頁前端相關文章請到本部落格首頁搜尋~

 

 

 

其他閱讀

Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!

AI機器狗Aibo成最新愛寵 真狗會被取代嗎?

今年10月即將入手的新身分證,它的UI設計有啥亮點?

你是我的眼!Google AI 眼鏡助視障朋友「看見」世界

給零基礎網站前端學員的入門簡介!!

前端工程師一定要懂的JavaScript變數命名規範~

UI學員看過來!即將登場的新式身分證有甚麼特別的呢!()

有了它前端工程師不再超時工作Emmet:元素與流水編號

有了它前端工程師不再超時工作Emmet:元素與流水編號
有了它前端工程師不再超時工作Emmet:元素與流水編號

前端工程師準時下班輕鬆工作不再是夢想~只要學會了它!!(元素與流水編號)

複製元素

前端工程師要產生 ol 或是 ul 清單標籤時,都會包含一拖拉庫的 li 元素。如果要一個一個手動輸入的話,就算是使用 Emmet 的「+」快捷輸入法,還是會花去不少時間。幸好 Emmet 有複製的快捷輸入法:「*」。用法是:若想要一次產生 5 個相同的元素的話,就在原宿後方輸入「*5」。由此類推,產生 7 個就是「*7」。假使我們今天要建立一個 ul 清單標籤,包含 5 個 li 元素,語法就可以這樣寫「ul>li*5」之後再按 ctrl+E 即可。

Emmet快捷複製法
再假設我們要在一個 .news 中放置 5 個 .block,然後每個 .block 中都有 1 個 h2 標題及 3 個 p 段落,每個 p 段落中又放置兩張圖片,則輸入「.news>(.block>h2+(p>img*2)*2)*5」

Emmet快捷複製法-2

編號

有時前端工程師在輸入 li 標籤時,會給這些 li 一個共用的 .className 以及流水編號。若搭配 Emmet 的「$」時,就可以快速的產生。例如,今天我們要輸入五個 li 標籤,標籤的 class name 分別為 list-1、list-2、list-3、list-4、list-5,則輸入「li.list-$*5」

Emmet中快速產生編號
若要在這些流水編號前面加個「零」,例如 01、001,則補上只要補上相對數量的 $ 即可。像是 01 就是 $$、001 就是 $$$。承上例,我們輸入「li.list-$$*5」以及「li.list-$$$*5」

Emmet中快速產生00編號

設定起始編號

$的用法,預設數字是從 1 開始累加。有時前端工程師會需要指定起始數字,這時則在 $ 後面多補上一個 @ 並加上指定的起始數字,承上例,我們要設定起始數字為 5 就輸入「[email protected]*5」

Emmet中設定起始編號範例
Emmet 預設的編號是由小到大,若是希望編號由大到小,那麼就是在 @ 後面補上一個 – 負號 (就算是沒要設定起始值也是要多補 @)。例如我們要輸入 5 個 li 標籤,編號由大到小,就輸入「[email protected]*5」 我們要設定起始數字為 5 ,就輸入「[email protected]*5」。

Emmet中設定反向編號
 
 
 
 
 
其他閱讀
 

有了它前端工程師不再超時工作Emmet:快速產生階層

有了它前端工程師不再超時工作Emmet:快速產生階層
有了它前端工程師不再超時工作Emmet:快速產生階層

前端工程師準時下班輕鬆工作不再是夢想~只要學會了它!!(快速產生階層)

不再爆肝工作的前端工程師都用它Emmet:快速產生階層

讓前端工程師每天輕鬆開發網頁的神器你非學不可!!學好它就護好肝!!(快速產生階層)

父子兄弟階層、群組、上一層

這一篇有簡略說到父子階層(父元素與子元素)之間的關係。想成為前端工程師的同學們未來在處理網頁時,一定會遇到父子元素、兄弟元素等。本文就簡單列出各種階層關係的 Emmet 縮寫方式:

父子元素一次輸入

前端工程師在使用 Emment 在設定子元素時非常方便,只要在父子元素間加入 > 符號即可。如下方的動態圖所示:假設我們要在 class name 名為「news_p」以及 id 名為「paragraph1」的 div 父元素中放置 子元素 p,並在 p 中在加上孫元素 ol 與 li 等動作,只要輸入「.news_p#paragraph1>p>ol>li」後按下 ctrl+E 就可一次寫完!

Emmet-父子元素一次輸入

兄弟階層一次輸入

承上面「父子元素一次輸入」的範例,若想在 p 的上方放置 h2 標題,但是 h2 標題不屬於 p 的父元素,位階是跟 p 同等的,則 h2 與 p 互為兄弟元素。

上方提到:元素間互為父子關係則用 > 隔開;若為兄弟元素,就用「+」隔開。因此此例為輸入「.news_p#paragraph1>h2+p>ol>li」

Emmet-兄弟階層一次輸入

將元素設為同一階層的群組

承上面「兄弟階層一次輸入」的範例,若前端工程師想在互為兄弟階層的 h2+p 的階層下,再多放一組一模一樣且位階相同的 h2+p 的階層的話該如何做?那就把 h2+p 視為一個群組,用 () 括號的方式包起來,把用括號起來元素視為同一階層來看即可,所以我們的語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)」之後再按 ctrl+E 即可。

Emmet-如何設群組

上一層

承上面「群組 Grouping」的範例,若前端工程師想在兩個互為兄弟階層的 h2+p 群組後方,新增一個 div 父元素(class name 名為「news_p」以及 id 名為「paragraph2」),就可以在元素間加入 ^ 符號即可。所以語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)^.news_p#paragraph2」之後再按 ctrl+E 即可。

Emmet上一層的範例

本例的 div 元素使用 ^ 符號來往上爬一個階層,如果想要爬兩層的話,就是 ^^ 符號。

想成為前端工程師,這些快速鍵要記得多練習幾次,熟練後才能在編寫HTML 時更有效率。

 

 

 

其他閱讀

 

 

前端工程師寫網頁的省時利器Emmet(四):顯示文字與屬性值

前端工程師寫網頁的省時利器Emmet(四):顯示文字與屬性值
前端工程師寫網頁的省時利器Emmet(四):顯示文字與屬性值

想當個又會工作又懂得享受的前端工程師嗎?那這系列文章就非學不可啦!!(四)

顯示文字

使用 Emmet 能讓前端工程師快速展開各種 HTML 元素,但如果能在撰寫的時候就能產生內文,不需等到元素展開後才補上內文就更棒了!這個功能 Emmet 也有!不塊是前端工程師的省時神器!

如果想要產生元素中的文字時,可以透過加上 {} 大括號並在其中寫上文字,如我們想要輸入名為「標題」的 h1 標籤、名為「副標題」的 h2 標籤,以及內容為 「內文」 的 p 標籤,就輸入「h1{標題}+h2{副標題}+p{內文}」後按下 Ctrl+E。


}

自訂屬性值

Emmet 除了可以讓前端工程師快速展開標籤與文字之外,對於像是 a href、img 等需要設定屬性的標籤,也可以在寫的時候就產生。

要是想要產生元素中的屬性時,可以透過加上 [] 中括號並在其中寫上屬性與值的內容,值需要用雙引號或是單引號包起來。例如我們今天要產生一個連結到網站「https://www.tedu.tw」的 a 元素,就輸入「a[href=”https://www.tedu.tw”]」後按下 Ctrl+E。

Emmet-自訂屬性
如果想要增加顯示文字,則在 [] 中括號後方加上{} 大括號並在其中寫上文字即可。承上例,我們可加上「達內教育」文字,就輸入「[a[href=”https://www.tedu.tw”]{達內教育}」後按下 Ctrl+E。

Emmet-自訂屬性與顯示文字
如果想要多增加一些屬性值,只要在同一個 [] 中括號中,把每個屬性值用空格隔開就可以啦。就像在上個例子中,想要設定網站在新分頁開啟,我們就輸入輸入「[a[href=”https://www.tedu.tw” target=”blank”]{達內教育}」後按下 Ctrl+E。

Emmet-自訂多個屬性與顯示文字
 
 
 
 
其他閱讀

 

有了它前端工程師不再超時工作Emmet:快速產生標籤名稱

有了它前端工程師不再超時工作Emmet:快速產生標籤名稱
有了它前端工程師不再超時工作Emmet:快速產生標籤名稱

前端工程師準時下班輕鬆工作不再是夢想~只要學會了它!!(快速產生標籤名稱)

身為一個前端工程師,一定要裝一個「省時神器」 Emmet 外掛,可以大大節省前端工程師在編寫 HTML 及 CSS 的時間。省下的時間可以讓你去體驗人生各種美好的事物,如玩玩喵星人、上上健身房運動等等。

Emmet 支援的網頁編輯器如下圖:

前端工程師必備之 Emmet 支援的網頁瀏覽器
安裝的方式因個網頁編輯器而異,且在網路上皆可以查到,故此省略。以下小編先介紹基本的使用方式:

快速產生標籤名稱 (Tag Name)

前端工程師在寫網頁的第一步,就是在網頁編輯器中開出新的頁面,並產生標準的 HTML5 樣板。透過 Emmet,我們可以先在編輯器中輸入「!」或是「html:5」後,再按下 Ctrl+E 鍵即可。

Emmet中快速產生HTML5樣板
假設我們要產生一個 p 元素,那麼我們只要直接輸入 p 後,再按下 Ctrl+E 鍵,就能自動產生起始元素及結束元素。如下所示:

起始元素與結束元素
只要是 HTML 所定義的元素,如 h1-h6、center、title 等等,都能使用上述方示,快速產生出相對應的語法如下

起始元素與結束元素-2
有些元素還會帶入跟該元素有關的屬性,例如:iframe、a 或是 img 等

有些元素還會帶入跟該元素有關的屬性

快速產生 className 與 id

我們也可以在產生元素時,直接加上指定的 Class Name。寫法是元素名稱與 Class Name 名稱中間用英文句點隔開。例如今天我們要產生 Class Name 為「title」的 h1 標籤,則輸入「h1.title」後按 Ctrl+E

產生元素時直接加上指定的 .className
若是要針對單一元素要加上多個 class name 的話,只要把它們用半形的句號隔開,接在一起就可以了。例如今天我們要產生 Class Name 為「news_p c1」的 div 標籤,則輸入「div.news_p.c1」後按 Ctrl+E

單一元素要加上多個className
前端工程師省時神器 Emmet 一般預設的元素是 div,所以如果直接輸入英文句號後,寫 class name 的話,就會自動產生一個 div 元素加上指定的 class name。承上例,輸入「.news_p.c1」後按 Ctrl+E

直接寫.className就會自動產生div元素加上指定的className
除了 class name,我們也可以幫元素加上指定的 id。只要先打 # 號再輸入 id name 即可。例如今天我們要產生 id 為「news_p」的 div 標籤,則輸入「#news_p」後按 Ctrl+E

幫元素加上指定的id
class name 和 id 可以同時使用,例如今天我們要產生 class name 為「news_p c1」、id 為「paragraph-1」的 div 標籤,則輸入「.news_p.c1#paragraph-1」後按 Ctrl+E

className和id可以同時使用
以上介紹過個常用的 Emmet 標籤快捷縮寫方式,更多的元素縮寫方式都可在 Emmet 官方文件中找到:Emmet cheat sheet

 

 

 

其他閱讀

 

 

 

前端工程師寫網頁的省時利器Emmet(三):元素與流水編號

前端工程師寫網頁的省時利器Emmet(三):元素與流水編號
前端工程師寫網頁的省時利器Emmet(三):元素與流水編號

想當個又會工作又懂得享受的前端工程師嗎?那這系列文章就非學不可啦!!(三)

複製元素

前端工程師要產生 ol 或是 ul 清單標籤時,都會包含一拖拉庫的 li 元素。如果要一個一個手動輸入的話,就算是使用 Emmet 的「+」快捷輸入法,還是會花去不少時間。幸好 Emmet 有複製的快捷輸入法:「*」。用法是:若想要一次產生 5 個相同的元素的話,就在原宿後方輸入「*5」。由此類推,產生 7 個就是「*7」。假使我們今天要建立一個 ul 清單標籤,包含 5 個 li 元素,語法就可以這樣寫「ul>li*5」之後再按 ctrl+E 即可。

Emmet快捷複製法
再假設我們要在一個 .news 中放置 5 個 .block,然後每個 .block 中都有 1 個 h2 標題及 3 個 p 段落,每個 p 段落中又放置兩張圖片,則輸入「.news>(.block>h2+(p>img*2)*2)*5」

Emmet快捷複製法-2

編號

有時前端工程師在輸入 li 標籤時,會給這些 li 一個共用的 .className 以及流水編號。若搭配 Emmet 的「$」時,就可以快速的產生。例如,今天我們要輸入五個 li 標籤,標籤的 class name 分別為 list-1、list-2、list-3、list-4、list-5,則輸入「li.list-$*5」

Emmet中快速產生編號
若要在這些流水編號前面加個「零」,例如 01、001,則補上只要補上相對數量的 $ 即可。像是 01 就是 $$、001 就是 $$$。承上例,我們輸入「li.list-$$*5」以及「li.list-$$$*5」

Emmet中快速產生00編號

設定起始編號

$的用法,預設數字是從 1 開始累加。有時前端工程師會需要指定起始數字,這時則在 $ 後面多補上一個 @ 並加上指定的起始數字,承上例,我們要設定起始數字為 5 就輸入「[email protected]*5」

Emmet中設定起始編號範例
Emmet 預設的編號是由小到大,若是希望編號由大到小,那麼就是在 @ 後面補上一個 – 負號 (就算是沒要設定起始值也是要多補 @)。例如我們要輸入 5 個 li 標籤,編號由大到小,就輸入「[email protected]*5」 我們要設定起始數字為 5 ,就輸入「[email protected]*5」。

Emmet中設定反向編號
 
 
 
 
 
其他閱讀

 

有了它前端工程師不再超時工作Emmet:顯示文字與屬性值

有了它前端工程師不再超時工作Emmet:顯示文字與屬性值
有了它前端工程師不再超時工作Emmet:顯示文字與屬性值

前端工程師準時下班輕鬆工作不再是夢想~只要學會了它!!(顯示文字與屬性值)

顯示文字

使用 Emmet 能讓前端工程師快速展開各種 HTML 元素,但如果能在撰寫的時候就能產生內文,不需等到元素展開後才補上內文就更棒了!這個功能 Emmet 也有!不塊是前端工程師的省時神器!

如果想要產生元素中的文字時,可以透過加上 {} 大括號並在其中寫上文字,如我們想要輸入名為「標題」的 h1 標籤、名為「副標題」的 h2 標籤,以及內容為 「內文」 的 p 標籤,就輸入「h1{標題}+h2{副標題}+p{內文}」後按下 Ctrl+E。


}

自訂屬性值

Emmet 除了可以讓前端工程師快速展開標籤與文字之外,對於像是 a href、img 等需要設定屬性的標籤,也可以在寫的時候就產生。

要是想要產生元素中的屬性時,可以透過加上 [] 中括號並在其中寫上屬性與值的內容,值需要用雙引號或是單引號包起來。例如我們今天要產生一個連結到網站「https://www.tedu.tw」的 a 元素,就輸入「a[href=”https://www.tedu.tw”]」後按下 Ctrl+E。

Emmet-自訂屬性
如果想要增加顯示文字,則在 [] 中括號後方加上{} 大括號並在其中寫上文字即可。承上例,我們可加上「達內教育」文字,就輸入「[a[href=”https://www.tedu.tw”]{達內教育}」後按下 Ctrl+E。

Emmet-自訂屬性與顯示文字
如果想要多增加一些屬性值,只要在同一個 [] 中括號中,把每個屬性值用空格隔開就可以啦。就像在上個例子中,想要設定網站在新分頁開啟,我們就輸入輸入「[a[href=”https://www.tedu.tw” target=”blank”]{達內教育}」後按下 Ctrl+E。

Emmet-自訂多個屬性與顯示文字
 
 
 
 
其他閱讀

前端工程師寫網頁的省時利器Emmet(二):快速產生階層

前端工程師寫網頁的省時利器Emmet(二):快速產生階層
前端工程師寫網頁的省時利器Emmet(二):快速產生階層

想當個又會工作又懂得享受的前端工程師嗎?那這系列文章就非學不可啦!!(二)

不再爆肝工作的前端工程師都用它Emmet:快速產生階層

讓前端工程師每天輕鬆開發網頁的神器你非學不可!!學好它就護好肝!!(快速產生階層)

父子兄弟階層、群組、上一層

這一篇有簡略說到父子階層(父元素與子元素)之間的關係。想成為前端工程師的同學們未來在處理網頁時,一定會遇到父子元素、兄弟元素等。本文就簡單列出各種階層關係的 Emmet 縮寫方式:

父子元素一次輸入

前端工程師在使用 Emment 在設定子元素時非常方便,只要在父子元素間加入 > 符號即可。如下方的動態圖所示:假設我們要在 class name 名為「news_p」以及 id 名為「paragraph1」的 div 父元素中放置 子元素 p,並在 p 中在加上孫元素 ol 與 li 等動作,只要輸入「.news_p#paragraph1>p>ol>li」後按下 ctrl+E 就可一次寫完!

Emmet-父子元素一次輸入

兄弟階層一次輸入

承上面「父子元素一次輸入」的範例,若想在 p 的上方放置 h2 標題,但是 h2 標題不屬於 p 的父元素,位階是跟 p 同等的,則 h2 與 p 互為兄弟元素。

上方提到:元素間互為父子關係則用 > 隔開;若為兄弟元素,就用「+」隔開。因此此例為輸入「.news_p#paragraph1>h2+p>ol>li」

Emmet-兄弟階層一次輸入

將元素設為同一階層的群組

承上面「兄弟階層一次輸入」的範例,若前端工程師想在互為兄弟階層的 h2+p 的階層下,再多放一組一模一樣且位階相同的 h2+p 的階層的話該如何做?那就把 h2+p 視為一個群組,用 () 括號的方式包起來,把用括號起來元素視為同一階層來看即可,所以我們的語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)」之後再按 ctrl+E 即可。

Emmet-如何設群組

上一層

承上面「群組 Grouping」的範例,若前端工程師想在兩個互為兄弟階層的 h2+p 群組後方,新增一個 div 父元素(class name 名為「news_p」以及 id 名為「paragraph2」),就可以在元素間加入 ^ 符號即可。所以語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)^.news_p#paragraph2」之後再按 ctrl+E 即可。

Emmet上一層的範例

本例的 div 元素使用 ^ 符號來往上爬一個階層,如果想要爬兩層的話,就是 ^^ 符號。

想成為前端工程師,這些快速鍵要記得多練習幾次,熟練後才能在編寫HTML 時更有效率。

 

 

 

其他閱讀