iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

喪屍黑白切 系列

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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, 像我這樣的邊緣人, 可以用這個來製造出有人跟我對話的假象, 好像也是滿實用的啦 本篇關鍵字...

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

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

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

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

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

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

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