iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

喪屍黑白切 系列

學習切版一段時間了,
紀錄一下這段時間學到的內容,
主要以金魚都能懂的網頁切版內容為主,
同時整理各種筆記,方便未來喪失記憶的時候複習。

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11 | 我包你啊你包我 - 多層次選單

今天要講的是 金魚都能懂的網頁切版 : 多層次收合選單 NO015,不過我要講的只有多層次選單的 part,收合的部分計畫明天再來打。 本篇關鍵字 ul、l...

2020-09-26 ‧ 由 Zombie@Dump 分享
DAY 12

Day 12 | 看我伸縮自如的...選單

今天一樣要講的是 金魚都能懂的網頁切版 : 多層次收合選單 NO015,昨天講了多層次選單的部分,今天要來講收合的部分啦~ 本篇關鍵字 <input...

2020-09-27 ‧ 由 Zombie@Dump 分享
DAY 13

Day 13 | 這個漢堡跟我想的不一樣

今天要來講響應式網頁出現頻率超高的漢堡選單啦,先來科普一下為什麼叫漢堡選單?照維基百科的說法,純粹就是覺得外觀長得跟漢堡相似(哪裡像),他有放一個對照圖,可以去...

2020-09-28 ‧ 由 Zombie@Dump 分享
DAY 14

Day 14 | 錯綜複雜的交錯漂浮版

今天要來講的就是 金魚都能懂的網頁切版 : 交錯漂浮版 NO004,滿適合用在介紹公司的服務,或是關於我們這類的區塊使用。 本篇關鍵字 flex-shrin...

2020-09-29 ‧ 由 Zombie@Dump 分享
DAY 15

Day 15 | 我的歷史成就你的現在 - 時間軸

鐵人賽終於過去一半了~今天要講的是金魚都能懂的網頁切版 : 時間軸 NO019,滿適合用在歷史沿革,或是一些活動時間紀錄。 本篇關鍵字 float tr...

2020-09-30 ‧ 由 Zombie@Dump 分享
DAY 16

Day 16 | 讓你的按鈕不只是按鈕 - hover

今天想要分享一些按鈕被 hover 時的效果,我的參考來源來自以下兩個 Youtube 頻道:Online TutorialsDarkCode 本篇關鍵字...

2020-10-01 ‧ 由 Zombie@Dump 分享
DAY 17

Day 17 | 來跟我互動一下啊 - 圖文互動卡片

今天要講的是金魚都能懂的網頁切版 : 互動圖文卡片 NO002 本篇關鍵字 position: absolute top: 0、right: 0、bot...

2020-10-02 ‧ 由 Zombie@Dump 分享
DAY 18

Day 18 | 邊緣人的好朋友 - 訊息對話紀錄

今天要講的是金魚都能懂的網頁切版 : 訊息對話紀錄 NO018,像我這樣的邊緣人,可以用這個來製造出有人跟我對話的假象,好像也是滿實用的啦 本篇關鍵字 ju...

2020-10-03 ‧ 由 Zombie@Dump 分享
DAY 19

Day 19 | 我比較喜歡脆笛酥 - 方塊酥版面 Part 1

今天要講的是金魚都能懂的網頁切版 : 方塊酥版面 NO010,看我的標題就知道,這個題目我想拆兩部分來講,影片中 Amos 是用 float 來排版,身為 fl...

2020-10-04 ‧ 由 Zombie@Dump 分享
DAY 20

Day 20 | 我比較喜歡脆笛酥 - 方塊酥版面 Part 2

今天要講的依舊是金魚都能懂的網頁切版 : 方塊酥版面 NO010,這次要挑戰的是完全不用 flex 做出跟昨天一樣的版面,在影片中,雖然圖片的排列是沒有用到 f...

2020-10-05 ‧ 由 Zombie@Dump 分享