iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
佛心分享-IT 人自學之術

CSS破冰突圍:自學挑戰前端設計 系列

新手自學者從CSS基礎知識開始,逐步挑戰前端設計的各種技巧,快速上手應用,並掌握在實際開發中常見的設計需求。

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

Day1 : 輪播放映的動態旋轉木馬 Gotcha!

新手的驚嘆! 旋轉木馬 功能取名有點任性丫~~ 為什麼要有這功能**旋轉木馬 (Carousel)**功能是Bootstrap中靈活且功能強大的前端元件,廣泛用...

2024-09-15 ‧ 由 Odelia 分享
DAY 2

Day2 : 活動ON/OFF魔術師:自由切換顯示內容

活動狀態顯示切換功能,即時變身展開魔法的秘密~ 為什麼要有這功能活動狀態顯示切換功能就像一個神奇的開關,根據時間自動變換不同的活動訊息,讓網站充滿效果和驚喜!...

2024-09-16 ‧ 由 Odelia 分享
DAY 3

Day3 : 還沒開始輸入嗎?讓placeholder成為指路的嚮導

填空大師placeholder的提示文字,讓表單更智能、更友善~ 為什麼要有這功能Placeholder 的提示文字在表單設計中扮演著重要角色,讓使用者能夠快速...

2024-09-17 ‧ 由 Odelia 分享
DAY 4

Day4 : 空間設計師:Row和Col輕鬆搞定佈局

Row和Col的默契合作,成就完美精準的行列編排 為什麼要有這功能在網頁設計中,行列佈局 是至關重要的,它能讓網站內容具備清晰、有條理的視覺結構。Bootstr...

2024-09-18 ‧ 由 Odelia 分享
DAY 5

Day5 : 網頁的時尚名片:卡片式設計閃耀登場

##卡片裡的小宇宙,滿載無限的創意和奇思妙想,等你一探究竟! ##為什麼要有這功能在網頁設計中,使用卡片功能來展示產品或服務是非常重要的,它不僅能有效吸引使用者...

2024-09-19 ‧ 由 Odelia 分享
DAY 6

Day6 : 自由之翼:Position靈活漂浮,突破框架定位的限制

沒有框架能限制Position的飛翔,讓網站佈局隨心所欲~ 為什麼要有這功能 CSS 的 position 功能讓開發者能夠精確控制元素在網頁中的擺放位置,這對...

2024-09-20 ‧ 由 Odelia 分享
DAY 7

Day7 : 聚焦互動:創意跳脫的按鈕風格設計~

##"打破常規,這個按鈕讓點擊變得充滿驚喜!" ##為什麼要有這功能在網頁設計中,按鍵是使用者與介面互動的主要方式之一。使用不同的按鍵形狀可...

2024-09-21 ‧ 由 Odelia 分享
DAY 8

Day8 : 主軸vs.交叉軸:FLEX的棋盤佈局盡在掌握

##從零開始,FLEX 給你無限創意空間,佈局自由伸展! ##為什麼要有這功能CSS 的 flex 功能(Flexbox)是一種強大的佈局模型,它允許開發者以簡...

2024-09-22 ‧ 由 Odelia 分享
DAY 9

Day9 : 「滑過來,按一下」:觸動 Button 狀態變化的即時表演!

##給點顏色瞧瞧,按鈕也能有情緒變化,回應每次的點擊~ ##為什麼要有這功能按鈕是網頁設計中的核心互動元素之一,而不同狀態的按鈕顯示可以大幅提升使用者體驗。透過...

2024-09-23 ‧ 由 Odelia 分享
DAY 10

Day10 : 滑鼠每一步皆有蹤跡:輕按或釋放,瞬間揭示一切

##每一次移動,背後都有一個隱形的追蹤者,時刻捕捉你的軌跡。 ##為什麼要有這功能滑鼠事件是網頁設計中的重要部分,允許開發者與使用者進行互動。透過這些事件,我們...

2024-09-24 ‧ 由 Odelia 分享