iT邦幫忙

網頁教學相關文章
共有 96 則文章
鐵人賽 影片教學 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 30

技術 金魚都能懂網頁設計入門 : 接下來呢?(鐵人賽第三十天)

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 金魚的意義由你訂 對各位有無幫助 回文告訴 Amos 你對金魚的想...

鐵人賽 Modern Web DAY 30

技術 Amos除了這超過25種垂直置中外還有別的方式嗎?

老實說 Amos 從一開始寫垂直置中系列開始也想不到今天可以寫出 25種垂直置中技巧,其實鐵人賽寫到今天為止其實也生出了超過25種垂直置中的方式,只是有些概念頗...

鐵人賽 Modern Web DAY 29

技術 蓋版廣告的垂直置中技巧跟支援

數位生態 蓋板廣告太常見到了,目前幾乎人手多機的情況下,我們每天幾乎都離不開上網這行為,上網除了上班用電腦以外,幾乎都是用行動裝置上網了,也就經常會看到蓋版廣告...

鐵人賽 影片教學 DAY 29

技術 金魚都能懂網頁設計入門 : JQuery動畫(鐵人賽第二十九天)

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 影片中提到的動畫類型有哪些 動畫的原理是利用什麼原理 如何利用一個...