Java課程是為了數位化的現在，Python課程是為了未來的人工智慧: 前端

顯示具有前端標籤的文章。顯示所有文章

2020年5月7日星期四

前端工程師CSS入門必學- float浮動屬性

前端工程師入門必學的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 自己練習一次程式，才會達到最佳的學習效果！

相關文章:
AI人工智慧救地球！Google：AI 保護環境還比人類快 3000 倍
CSS教學-display與visible屬性介紹
用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵真狗會被取代嗎？
零基礎學習網站前端So Easy!
前端,後端,全端工程師傻傻分不清?
前端工程師Javascript入門磚-22數學物件

2020年5月6日星期三

前端工程師CSS入門必學-定位元素Positioning Elements

前端工程師入門必學的定位元素Positioning Elements,學起來吧!

為了要設計更加繁複的網頁前端版面，前端工程師都需要知道 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）屬性。

相關文章:

AI人工智慧救地球！Google：AI 保護環境還比人類快 3000 倍
CSS教學-display與visible屬性介紹
用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵真狗會被取代嗎？
零基礎學習網站前端So Easy!
前端,後端,全端工程師傻傻分不清?
前端工程師Javascript入門磚-22數學物件

2020年4月29日星期三

網頁前端CSS入門必學- display與visible屬性介紹

前端工程師入門必學的CSS display與visible屬性介紹,學起來吧!

本篇介紹網頁前端排版的兩個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入門教室22-數學物件
前端,後端,全端工程師傻傻分不清?
想轉職看過來:網站前端正夯

2019年7月29日星期一

必看!教你從零自學成為前端工程師

零基礎自學成為前端工程師必看!

今天要來跟大家分享,零基礎如何自學成為前端工程師。現在網路發展迅速，前端也成了重要崗位之一。前端開發是很簡單的程式設計，甚至都不能叫做程式設計，因為它真簡單容易不少。很多想要轉行進入 IT 行業的新手會選擇前端工程師。那要怎麼自學?就來看看底下的教學文章囉~首先我們學習前端，要知道前端的三個大內容， HTML5 、CSS、JavaScript，其中 HTML 和 CSS 是相互結合著學習，掌握了這兩個了以後我們就算真正入門了，然後再深入學習 JavaScript 等等。

一、首先我們要理解 HTML5、CSS、JavaScript 分別是什麼?

HTML 就相當於一個人，CSS 相當於一個人穿著的衣服，JavaScrip t相當於讓這個人做什麼動作，這樣一形容呢，我們就很好理解了，這個人就是網站，需要有 header 頭，body 身體，footer 腳……而網站所呈現給我們各種各樣的樣子就是我們寫的 CSS 樣式，網站裡的動態效果就都是我們的 JavaScript 去實現的。

二、零基礎學前端工程師難學嗎?

想知道前端工程師技術難不難學的新手可以跟著下面的步驟一起來設計製造一個專屬的網頁，相信你就會知道。我們用到的軟件呢，對於入門級來說我們一般推薦大家用 DreamWeaver，新建一個 HTML 後，出現的界面是這樣的，

下面我們開始輸入原始碼，我們可以看到這裡有這樣的原始碼<body></body>，這個就是我們網頁的身體，我們接下來要輸入的內容都是在這中間輸入的，這個括號表示的標籤，標籤都是一前一後的，成對兒出現的，除了一些特殊的標籤，隨後我們再一一給大家講解。現在我們輸入點內容，看看效果。

我們輸入一個標籤<div><div>，點擊右上角的地球瀏覽一下，會發現彈出了一個空網頁，什麼也沒有，那是因為我們現在只書寫了HTML，還沒有寫CSS，簡單來說就是，我們創建了一個東西在頁面裡，但是還沒有設置這個東西長什麼樣子，現在我們在設置它的樣子，

1、我們為了給這個 div 設置樣式，所有先給它起個名字不然，電腦不知道我們要給誰加樣式，class="aaa" 的意思是起名為aaa
2、在<head></head>裡寫入這樣一組標籤<style></style>這個style的意思就是CSS，我們整個網站要加的所有樣式都是寫在這個中間的。
3、我們在style裡寫樣式，電腦首先要知道我們給誰加樣式，所有我們寫個.aaa 這個.(點)的意思是我要給aaa加樣式，電腦會自動把.(點)後面的名字，跟下面body裡的名字做一個匹配，這樣電腦就知道，哦~原來你是要給這個div加樣式呀，
4、然後我們把要給這個div加的樣式寫在大括號裡，Width:100px; 意思是這個div的寬是100像素，height:100px; 意思是高是100像素，background-color:#FF0000;意思是背景顏色是#FF0000這個顏色，
注意：
(1)這裡我要給大家解釋一下，大家別看這麼多原始碼，這麼多專有名詞，其實軟件有提示，像下面這樣，直接輸入第一個字母後面的專有名詞就出現了，直接選中就行了，連專有名詞都不用背，前端真的很簡單，

輸入 W 和輸入 h，會自動彈出名詞下拉選單

(2)每一個專有名詞都有提示，說到這裡，不會英語的同學就不要給自己找藉口說英語不好，學不會程式設計了。雖然說很簡單，但是要想真真的把前端學好是需要下功夫的，主要就是要堅持。
下面我們繼續，設置好了以後，我們就可以在 Dreamweaver 狀態列中按一下「即時預覽」。若你看到了紅色正方形的畫面，那恭喜你，你成功了！

相關文章

前端工程師省時神器!用Emmet快速設定顯示文字、自訂屬性值!

前端工程師省時神器!用Emmet快速複製元素、設定編號!

前端工程師省時神器!用Emmet快速產生階層!

暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~

單一技能已被淘汰讓Java課程使你充實自我還能媒合高薪職缺

現在的電影產業也能靠人工智慧做預測了!來看看他們怎麼辦到的!

前端工程師菜鳥手冊:學習路線圖總整理

2019年7月17日星期三

前端工程師省時神器!用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。

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

若想要多增加一些屬性值，只要在同一個 [] 中括號中，將每個屬性值用空格隔開就可以了。如在上個例子中，想要設定 HTML 網站在新分頁開啟，我們就輸入輸入「[a[href="https://www.tedu.tw" target="blank"]{達內教育}」後按下 Ctrl+E。

2019年7月16日星期二

前端工程師省時神器!用Emmet快速複製元素、設定編號!

前端工程師省時神器Emmet!想要快速複製元素、設定編號就看過來!

前端工程師必備「Emmet」基礎教學目錄：

複製元素

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

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

編號

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

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

設定起始編號

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

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

2019年7月15日星期一

前端工程師省時神器!用Emmet快速產生階層!

前端工程師省時神器Emmet!想要快速產生階層就看過來!

前端工程師必備「Emmet」基礎教學目錄：

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

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

父子元素一次輸入

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

兄弟階層一次輸入

繼上頭「父子元素一次輸入」的範例，若想在 p 的上方放置 h2 標題，但是 h2 標題不屬於 p 的父元素，位階是跟 p 同等的，則 h2 與 p 互為兄弟元素。
上方提到：元素間互為父子關係則用 > 隔開；若為兄弟元素，就用「+」隔開。因此此例為輸入「.news_p#paragraph1>h2+p>ol>li」

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

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

上一層

承上面「群組 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 即可。

本例的 div 元素使用 ^ 符號來往上爬一個階層，如果想要爬兩層的話，就是 ^^ 符號。
想成為前端工程師，這些快速鍵要記得多練習幾次，熟練後才能在編寫 HTML 時更有效率。

相關文章

前端工程師省時神器!用Emmet快速產生標籤名稱!

前端工程師省時神器!用Emmet快速複製元素、設定編號!

前端工程師省時神器!用Emmet快速設定顯示文字、自訂屬性值!

暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~

單一技能已被淘汰讓Java課程使你充實自我還能媒合高薪職缺

上台報告常常說不出話?別擔心~讓人工智慧教練推你一把!!

Netflix:"人工智慧預測為我們省下10億美元"-真假的?

訂閱：文章 (Atom)

2020年5月7日 星期四

CSS 的 float (浮動) 屬性

float 浮動屬性的使用時機

2020年5月6日 星期三

CSS：Positioning Elements 定位元素

靜態定位（position: fixed）

固定定位（position:fixed）

相對定位（position:relative）

絕對定位（position:absolute）

2020年4月29日 星期三

CSS：display 屬性

display:block

display:inline

display:none

visibility 屬性

2019年7月29日 星期一

一、首先我們要理解  HTML5、CSS、JavaScript 分別是什麼?

二、零基礎學前端工程師難學嗎?

2019年7月17日 星期三

顯示文字

自訂屬性值

2019年7月16日 星期二

複製元素

編號

設定起始編號

2019年7月15日 星期一

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

父子元素一次輸入

兄弟階層一次輸入

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

上一層

2020年5月7日星期四

2020年5月6日星期三

2020年4月29日星期三

2019年7月29日星期一

一、首先我們要理解 HTML5、CSS、JavaScript 分別是什麼?

2019年7月17日星期三

2019年7月16日星期二

2019年7月15日星期一