iT邦幫忙

網頁教學相關文章
共有 96 則文章
鐵人賽 影片教學

達標好文 技術 史上最完整的新手網頁入門學習地圖 - 金魚都懂的網頁學習路徑懶人包

免費的教學資源,但卻絲毫不減教學品質 經歷了兩屆的鐵人賽,總算是把想要做卻積了很久的一些網頁教學,用錄的、寫的給製作出來了,這一些網頁教學基本上不單單是給所有人...

鐵人賽 Modern Web DAY 30

技術 學習路徑懶人包 - CSS 選取器學習地圖

經歷了29天的 CSS 選取器的洗禮,感謝各位的訂閱、支持與觀看,不知道大家對於 CSS 選取器是否有變的更加熟悉了呢?今天就讓我們來快速地回顧一下這 29 天...

鐵人賽 Modern Web DAY 29

技術 :root 根目錄選取器 - 叫你阿爸出來講

這個選取器應該是所有選取器裡面最特別的了,且目前這個選取器使用的地方還滿受限的,先來瞭解一下這個選取器的名字吧,root 顧名思義就是「根」的意思,網頁的「根」...

鐵人賽 影片教學 DAY 29

技術 金魚都能懂的這個網頁畫面怎麼切 : 拼拼版重構

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

鐵人賽 影片教學 DAY 28

技術 金魚都能懂的這個網頁畫面怎麼切 : 快速版面拼拼樂

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

鐵人賽 Modern Web DAY 28

技術 :disabled & :enabled 表單用僞類選取器 - 一眼看穿那些不能按的按鈕

介紹了這麼多針對一班網頁標籤的選取器之後,總算我們可以進入到針對表單的選取器了,針對表單的選取器其實還不少,但是目前來說除了 :checked 之外,可能比較有...

鐵人賽 Modern Web DAY 27

技術 :nth-of-type() & :nth-last-of-type() - 你覺得燒腦但其實根本不燒腦的選取器趴兔

總算...金魚都能懂的 CSS 選取器 講了20幾篇,總算可以講到這個大家都很有興趣的 :nth-of-type 選取器了,看到這邊又要再再再老話一句了 ( 夠...

鐵人賽 Modern Web DAY 26

技術 :nth-child() & :nth-last-child() - 你覺得燒腦但其實根本不燒腦的選取器

總算...金魚都能懂的 CSS 選取器 講了20幾篇,總算可以講到這個大家都很有興趣的 :nth-child 選取器了,看到這邊又要老話一句了 ( 夠了你! )...

鐵人賽 影片教學 DAY 26

技術 金魚都能懂的這個網頁畫面怎麼切 : 文字排版-下集

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

鐵人賽 Modern Web DAY 25

技術 :only-of-type 類型獨子選取器

:only-of-type 跟 :only-child 非常相似,但也如同之前的篇章中有講到的,認清 child 與 of-type 差異的人,就能擁有世界輕鬆...

鐵人賽 影片教學 DAY 25

技術 金魚都能懂的這個網頁畫面怎麼切 : 文字排版-中集

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

鐵人賽 Modern Web DAY 24

技術 :only-child 獨子選取器 - 這是啥媽寶選取器

:only-child 獨子選取器,簡單的說就是選取到那個只有唯一一個子層的子物件,注意! 他是選取倒獨子物件,不是選取父層喔。而這個選取器也很容易跟另外一個...

鐵人賽 影片教學 DAY 24

技術 金魚都能懂的這個網頁畫面怎麼切 : 文字排版-上集

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

鐵人賽 Modern Web DAY 23

技術 :first-of-type & :last-of-type 首項分類與尾首分類選取器 - 一個不會讓你看錯男女的選取器

前一篇提到了選取第一個與最後一個物件的 :first-child 與 :last-child 選取器,接下來我們繼續來看看跟他們很像似的 :first-of-t...

鐵人賽 影片教學 DAY 23

技術 金魚都能懂的這個網頁畫面怎麼切 : 不規則邊緣

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

鐵人賽 Modern Web DAY 22

技術 :first-child & :last-child 頭尾選取器 - 有頭有尾有始有終的選取器

:first-child 以及 :last-child 兩個選取器剛好是相對的,一個選第一個 ( :first-child ),一個選最後一個 ( :last-...

鐵人賽 影片教學 DAY 21

技術 金魚都能懂的這個網頁畫面怎麼切 : 旋轉拼接方塊

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

鐵人賽 Modern Web DAY 21

技術 :not() 否定選取器 - 一個搞排擠的選取器

not 如其字面意義就是否定的意思,而 :not() 選取器,就是一個排擠(不選取)非我族群的選取器,這個選取器在一開始推出的時候,其實 Amos 非常的不習慣...

鐵人賽 影片教學 DAY 20

技術 金魚都能懂的這個網頁畫面怎麼切 : 時間軸怎麼切

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

鐵人賽 Modern Web DAY 20

技術 :empty 空值選取器 - 比谷關的空氣更乾淨的選取器

:empty 空值選取器!這個選取器真是超有趣的!他專門選取那些內容是空的物件,你以為是像谷關的空氣這樣純淨透明的選取器嗎? 不! 它比谷關的空氣更乾淨,它是連...

鐵人賽 影片教學 DAY 19

技術 金魚都能懂的這個網頁畫面怎麼切 : 訊息對話紀錄

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

鐵人賽 Modern Web DAY 19

技術 ::first-line 首行選取器 - 低調到不行的選取器

有了首字之後,當然要來個首行選取器囉,首行選取器故名思義就是選取第一行的意思了,與前個選取器一樣是個被IE耽誤的僞元素選取器,使用方式就是直接讓被設定的物件內容...

鐵人賽 影片教學 DAY 18

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

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

鐵人賽 Modern Web DAY 18

技術 :first-letter 首字選取器 - 玩轉首字設計的好功能

首字放大在平面設計的領域中是經常可見的一種設計手法,也是司空見慣的方式了,不管是報章雜誌還是海報傳單都可以見到首字放大的設計風格,但是在網頁上面呢?好像不是這麼...

鐵人賽 影片教學 DAY 17

技術 金魚都能懂的這個網頁畫面怎麼切 : 訂單進度條

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

鐵人賽 Modern Web DAY 17

技術 :lang 語言僞類選取器 - 多長的單字都不煩惱

:lang 僞類選取器是針對語言設定的一個選取器,應該算是一個 Amos 極少用到的一個選取器,主要原因是因為使用上有點小小的麻煩處,另外還有實用度的部分。一般...

鐵人賽 影片教學 DAY 16

技術 金魚都能懂的這個網頁畫面怎麼切 : 進化了!多層次收合選單!

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 影片教學 DAY 15

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

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

鐵人賽 Modern Web DAY 15

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

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