iT邦幫忙

金魚相關文章
共有 89 則文章
鐵人賽 Modern Web DAY 16

技術 :checked 表單狀態選取器 - 讓你可以開開關關好開勳

總算把插播的兩個偽元素 ( pseudo-element ) 主題都講完了,接下來讓我們回到偽類 ( pseudo-class ) 選取器的部分,這次來談 :c...

鐵人賽 影片教學 DAY 15

技術 金魚都能懂的這個網頁畫面怎麼切 : 動態收合式側邊選單

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 15

技術 ::selection 選取狀態僞元素 - 讓你沒有選擇困難

前一天看完了常見的 ::before 與 ::after 僞元素之後,我們繼續來看看另外一個少見的僞元素選取器 ::selection,這個僞元素特別之處如同該...

鐵人賽 影片教學 DAY 14

技術 金魚都能懂的這個網頁畫面怎麼切 : 側邊選單怎麼切

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 14

技術 ::before & ::after 無中生有的僞元素選取器 - 傑克這真是太神奇啦

學過了偽類選取器之後,讓我們在鐵人賽中插播一個很重要的 CSS 選取器,那就是 CSS 偽元素 (pseudo-element),簡單的來說就是假的元素,再簡化...

鐵人賽 影片教學 DAY 13

技術 金魚都能懂的這個網頁畫面怎麼切 : 表格怎麼切

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 13

技術 常用於超連結的動態僞類選取器 - 讓你網頁互動變豐富

歡迎進入 CSS 內建分類選取器的領域 - 偽類(pseudo-class)選取器,偽類選取器是屬於 CSS 內建的分類,意思就是你可以直接使用這種選取器來選到...

鐵人賽 影片教學 DAY 12

技術 金魚都能懂的這個網頁畫面怎麼切 : 破格式設計

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 12

技術 僞類選取器 - 何謂僞類選取器

如果有在跟金魚系列的朋友,到目前為止一些基本的選取方式大概都看完了,前面我們從基本的 Tag、class、ID、屬性(Attribute Selector )、...

鐵人賽 影片教學 DAY 11

技術 金魚都能懂的這個網頁畫面怎麼切 : 方塊酥版面

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 11

技術 子代選取器 - 一個最安全且不會讓你株連九族的選取器

談完了兄弟之間的親代選取器,現在我們來聊聊長幼之間的子代選取器吧,這個選取器的語法長這樣 選取對象A > 選取對象B ,作用是選取到「子層」物件,當然很多...

鐵人賽 影片教學 DAY 10

技術 金魚都能懂的這個網頁畫面怎麼切 : 網站麵包屑

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 10

技術 親代選取器之妹妹選取器與鞭炮串選取器

親代選取器在新手圈算是比較常被忽略的,尤其在目前 CSS3 選取器盛行的時期,這類選取器更加的容易被忽略,但其實這些老選取器還是很好用的啊,當然今天要講的選取器...

鐵人賽 影片教學 DAY 9

技術 金魚都能懂的這個網頁畫面怎麼切 : 變化你的導覽列

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 9

達標好文 技術 CSS 屬性選取器 - 一個選取自由度超高的選取器

CSS 屬性選取器,一個變化自由的選取器!在早期的時候CSS屬性選取器曾經是被詬病為效能不佳的一種選取器,時至今日拜電腦效能強大及瀏覽器的進步與優化來說,已不太...

鐵人賽 影片教學 DAY 8

技術 金魚都能懂的這個網頁畫面怎麼切 : 導覽列

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 8

技術 CSS 通用選取器 - 一個你我都該熟知的老朋友

CSS 通用選取器是一個新手入門必定會接觸到的選取器,每個網頁新手在接觸 CSS 時,多少都會聽過 CSS reset 這名詞,且多少都會聽說過使用星號(*)來...

鐵人賽 影片教學 DAY 7

技術 金魚都能懂的這個網頁畫面怎麼切 : 網頁頁尾版塊

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 7

技術 CSS 層疊式宣告 - 讓你快速選到特定元素內的物件的選取器

在開始解說之前,讓我們先回到最基本的知識,CSS 原名 Cascading Style Sheets,翻譯成中文的名稱有「串樣式列表、級聯樣式表、串接樣式表、階...

鐵人賽 Modern Web DAY 6

技術 CSS 組合式宣告 - 新手開發從這裡開始進步

談完了 CSS 群組式宣告,接下就來談組合式宣告了,組合式宣告的方式基本上就是將多個選取方式合起來一起寫的作法,例如你有個物件同時是 <p> 標籤,...

鐵人賽 影片教學 DAY 6

技術 金魚都能懂的這個網頁畫面怎麼切 : 1到5切版技巧原理彙整

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 影片教學 DAY 5

技術 金魚都能懂的這個網頁畫面怎麼切 : 超通用橫式版面

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 5

技術 CSS 群組式宣告 - 每個開發者都該學會的選取方式

瞭解了 CSS tag、class、ID 三大基礎選取器之後,接著我們可以來了解選取器的另外一種不同的宣告方式。由於在製作網頁時我們會利用選取器去選取到物件後對...

鐵人賽 影片教學 DAY 4

技術 金魚都能懂的這個網頁畫面怎麼切 : 切一個交錯漂浮版

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 4

技術 #ID 選取器 - 程式設計最常用到的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎

CSS 的 ID 選取器對於網頁開發來說,占了不小的份量與歷練,每個新手在接觸網頁時應該要畢恭畢敬的叫他一聲前輩才對,這話怎麼說呢? 容我後面再解釋。 先來看看...

鐵人賽 影片教學 DAY 3

技術 金魚都能懂的這個網頁畫面怎麼切 : 人員介紹卡片

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 3

技術 CSS class 選取器 - 切版與前端框架最常使用的CSS選取器 - 金魚都能懂了你還怕學不會嗎

在CSS選取器中,class算是比 tag 選取器更加常用到,尤其在現在開發框架盛行的年代更是氾濫。class 選取器的翻成中文的意思就是「分類、類別」,簡單的...

鐵人賽 Modern Web DAY 2

技術 Tag 元素選取器 - 網頁中最常用到的基本設定選取器 - 金魚都能懂了你還怕學不會嗎

Tag 元素選取器是CSS選取器中最基本的選取器之一,先離題解釋一下 Tag 是什麼? 白話文就是 HTML 標籤統稱啦,一般來說我們在溝通時為了文字的精準度,...

鐵人賽 影片教學 DAY 2

技術 金魚都能懂的這個網頁畫面怎麼切 : 製作一個互動圖文卡片

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 影片教學 DAY 1

達標好文 技術 金魚都能懂的這個網頁畫面怎麼切 : 圖文滿版區塊

本篇重點問題回顧: 列出重點希望各位可以好好的將影片回放複習喔,另外幾個重點問題中,Amos已經有影片的會直接附上連結給各位參考取用。 為何需要reset...