鐵人檔案
在這個30天的挑戰中，我將深入探索前端網頁開發的基礎，專注於 HTML 和 CSS 的學習。從最基本的標籤和屬性，到現代化的排版和布局技巧，我會每天學習並實踐一個新的主題。這段時間不僅僅是學習理論，還包括實際操作和小範例的練習，以加深對這些技術的理解。所以這30天的文章可以算是我自己的學習筆記，如果內容有誤，也歡迎大家告訴我。
顏色屬性: 顏色是網頁設計中的關鍵要素之一。CSS 提供了多種方式來定義顏色，包括以下幾種常見方式： 色彩名稱：如 red, blue, green 等。...
浮動佈局是一種經典的佈局方法，雖然現在 Flexbox 和 Grid 更加靈活和強大，但理解 float 的運作原理依然非常重要。 什麼是浮動？ float 屬...
Flexbox 是什麼？ Flexbox（Flexible Box Layout） 是一種新的 CSS 佈局模式，專門用來設計一維的佈局（行或列），可以更靈...
CSS Grid 是什麼？ CSS Grid Layout 是一種基於二維網格的佈局系統，允許你在行和列的軸上同時進行佈局和對齊。 它比 Flexbox 更...
Flexbox和Grid都是在CSS裡十分好用的佈局工具，那他們的差別在哪?這篇就是來比較他們的功能 佈局方向 Flexbox：主要用於 一維佈局（單行或單...
介紹： 隨著設備種類和屏幕大小的多樣化，響應式設計已成為現代網站設計的必要部分。今天我們將學習 CSS 的媒體查詢（media queries），並了解如何為不...
響應式圖片的概念 響應式圖片是一種能夠根據不同設備和視窗大小自動調整大小的圖片，這樣可以保證圖片在不同的屏幕上呈現良好的效果，提升用戶體驗。 為什麼需要響應式圖...
定位 (Positioning) 是 CSS 中的一個重要概念，用來控制元素在頁面中的位置。透過不同的定位方法，我們可以精確地控制元素相對於其父元素或其他元素的...
** Flexbox 概念複習** Flex 容器 (Flex Container)：包含 flexbox 元素的父容器，使用 display: flex;...
Grid Template Areas (網格模板區域) 定義: 使用 grid-template-areas 屬性來命名網格區域，讓我們可以更直觀地排版網...
