iT邦幫忙

鐵人檔案

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

喪屍黑白切 系列

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

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

Day 01 | 前言

介紹一下自己 大家好,我是 Zombie@Dump,住在垃圾場的喪屍。 今年年初時離開前份工作準備轉職,沒想到碰上疫情, 出國玩的計畫泡湯,只好很認真的配合防疫...

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

Day 02 | 訂位?!定位?! - position

講到切版,其中最重要的就是各種定位 position 啦~ CSS 中的定位有:static | fixed | relative | absolute | s...

2020-09-17 ‧ 由 Zombie@Dump 分享
DAY 3

Day 03 | 順序有那麼重要嗎?Part 1 - :link, :visited, :focus, :hover, :active

今天要介紹的這幾種偽類 pseudo-class,算是 CSS 中使用率最頻繁的幾個, 我自己很常忘記這幾個的優先權順序,所以特地寫一篇筆記下來。 什麼是偽類?...

2020-09-18 ‧ 由 Zombie@Dump 分享
DAY 4

Day 04 | 順序有那麼重要嗎?Part 2

今天要來舉例子了,廢話不多說直接開始。 要用到的 HTML 只有這行 <a href="#">Zombie@Dump</a...

2020-09-19 ‧ 由 Zombie@Dump 分享
DAY 5

Day 05 | 以前要的不是這種以後?! - ::before, ::after

切版時,如果遇到裝飾性的元素,大多會使用偽元素 pseudo-element 來製作, 在我自己的切版經驗中,我覺得他們是網頁很靈魂的存在。 什麼是偽元素?...

2020-09-20 ‧ 由 Zombie@Dump 分享
DAY 6

Day 06 | 就是那麼有層次 - 多重背景

今天要來講 金魚都能懂的這個網頁畫面怎麼切: No.001 - 圖文滿版區塊 未來的程式碼範例,前面都會有一個 css reset * { margin:...

2020-09-21 ‧ 由 Zombie@Dump 分享
DAY 7

Day 07 | 有沒有別的辦法? - 不使用多重背景

昨天介紹了多重背景的用法, 今天想挑戰一樣的畫面,用不同的方法做出來。 切版沒有絕對的對跟錯,只有適合什麼情境或是在什麼條件下相比起來比較好,多嘗試練習才能發...

2020-09-22 ‧ 由 Zombie@Dump 分享
DAY 8

Day 08 | 看我的影分身 - 不規則邊緣

今天要來講 金魚都能懂的網頁切版 : 不規則邊緣 NO021 通常這類的圖都會直接請設計師作圖出來, 只是讓大家知道有做圖之外的方式, 藉此能更靈活的運用 CS...

2020-09-23 ‧ 由 Zombie@Dump 分享
DAY 9

Day 09 | 給我動起來 - SVG animation

今天想要分享一下我看 Youtube 看到的效果, 先分享連結, 裡面有使用到的 wave.png 請直接 YT 下載。 本篇關鍵字 animation...

2020-09-24 ‧ 由 Zombie@Dump 分享
DAY 10

Day 10 | 我常卡住的導覽列 - Navbar

今天要來講 金魚都能懂的網頁切版 : 導覽列 NO007, 切版網頁,免不了得製作導覽列, 算是非常非常基本的要求, 前期我在練習切版的時候,常常莫名其妙的就卡...

2020-09-25 ‧ 由 Zombie@Dump 分享