鐵人檔案
前端領域十分廣闊，不僅需要學習程式邏輯，切版更是你/妳成為前端工程師必要的技能之一， 想學會跑，就必須先學會走；想做出一個厲害的動態網頁，就必須先掌握好靜態網頁， 藉由這次自我挑戰讓網頁設計師、前端工程師們更好上手 Tailwind CSS 框架，學習之旅即將啟航。
邊框 善用邊框對於元素有很好的輔助效果，像是方形的方塊加上圓角可以使元素看起來更圓滑，input 標籤加上 :foucs改變邊框顏色讓使用者清楚目前點擊的元素...
間距 間距在網頁中是不可或缺的，間距不僅能使版面看起來更舒服，也豐富了網頁版面的多樣性。 間距單位 p/m-0 ⇒ 0px p/m-1 ⇒ 0.25rem...
寬度/高度單位 昨日 Day12 - 掌握空間與距離，版面不再跑版 有提到 Tailwind CSS 中，間距的數字會以 4 的倍數為單位，舉例來說：1.25...
效果 網頁元素增添許多效果產生不同的視覺變化，效果的輔助讓元件更有多樣性。 陰影（Box Shadow） shadow-sm shadow shadow-m...
在先前 Day07 - Display 的大小事 有針對 Display 屬性做說明，Flex 也是 Display 屬性之一，那麼開始今天的 Flex 章節...
網格 什麼是網格？網格的概念是，類似一套層級系統，同時給你豐富的多樣性，網格完全沒變，變得是網格裡面的東西，早期螢幕寬度約為1024，還需要扣除瀏覽器的 Sc...
變換（Transforms） 透過 transform 屬性藉此變換元素。 Scale（縮放） scale-0 scale-50 scale-75 scal...
偽類 以一個冒號 ： 作為前綴詞宣告使用，後面接偽類名稱。 :hover 藉由 hover: 滑鼠停留在元素時變更樣式，舉個例子： <div class...
偽元素 昨日我們介紹了偽類，與偽類不同的偽元素則是以兩個冒號 :: 作為前綴詞宣告使用，後面接偽元素名稱。 ::before 與 ::after 藉由 ::b...
Transition 什麼是 Transition？顧名思義就是為了改變兩個外觀間轉換的屬性，加上 transition 可以補足兩個外觀間轉換的補間動畫，使...
