鐵人檔案
在這個30天的挑戰中，我將深入探索前端網頁開發的基礎，專注於 HTML 和 CSS 的學習。從最基本的標籤和屬性，到現代化的排版和布局技巧，我會每天學習並實踐一個新的主題。這段時間不僅僅是學習理論，還包括實際操作和小範例的練習，以加深對這些技術的理解。所以這30天的文章可以算是我自己的學習筆記，如果內容有誤，也歡迎大家告訴我。
過渡效果 (Transitions) CSS 過渡效果允許你在元素的屬性發生變化時，控制其變化的時間和方式，使元素平滑地過渡。常見應用包括： 元素大小、顏色、...
CSS 關鍵幀 (Keyframes) 關鍵幀允許你定義動畫在不同時間點的狀態，並指定每個狀態下的 CSS 屬性變化。使用 @keyframes 規則，可以指定...
使用 div 元素創建基本形狀 我們將主要使用 <div> 元素來創建形狀。這些形狀通常通過設定寬度、高度、邊框和邊框圓角來實現。 正方形和矩形 &...
什麼是 CSS 預處理器？ CSS 預處理器是一種擴展 CSS 功能的工具，讓開發者可以使用變數、函數、嵌套等功能來簡化編寫 CSS 的過程，並最終編譯成標準...
Sass 簡介 Sass 是一種 CSS 的預處理器，它讓你能使用變數、嵌套、繼承等功能來編寫更具結構和維護性的 CSS。當我們寫完 Sass 代碼後，會被編譯...
什麼是 Sass 的 Mixin（混入）？ 定義：Mixin 是一組可重複使用的 CSS 規則，允許你將一組樣式定義成一個可重複調用的模塊。可以根據參數進行...
為什麼要簡化媒體查詢？ 在開發響應式網站時，我們經常需要針對不同設備設置媒體查詢（Media Queries）。但隨著設計複雜度的增加，CSS 文件可能會變得很...
瀏覽器相容性問題 瀏覽器相容性是指在不同的瀏覽器（例如 Chrome、Firefox、Safari、Edge 等）中，網頁的顯示效果和行為可能會不一樣。這是因為...
在網站性能優化中，CSS 的減重和優化非常關鍵。過大的 CSS 文件會導致頁面加載緩慢，特別是在移動設備上，可能嚴重影響用戶體驗。 簡化選擇器和規則 減少不...
這30天的學習就像一場探險，從HTML的基礎到CSS的各種酷炫技巧，每一天都讓我有「哇，原來可以這樣！」的驚喜。剛開始可能還是個完全陌生的領域，但一步一步深入後...
