CSS tricks 練習與筆記

CSS Grid 與 CSS Flexbox 比較

教學文章連結

• A Complete Guide to CSS Media Queries

CSS Flexbox layout

• A Complete Guide to Flexbox

CSS Grid Layout

• A Complete Guide to Grid
• CSS GRID. --- 列舉25種 grid 應用方式

CSS Animated Backgrounds

• 33 Animated Backgrounds Examples [With Pure CSS]
• 10+ CSS Wave Animation Examples
• The Best-Looking CSS Animated Background Examples

Sample

Example: 用CSS Grid取代<table>語法

若只是設計靜態表格，用傳統的<table><tr><td>... 的語法仍可以滿足。
然而現在都要求表格要支援 RWD 效果，這時建議用CSS Grid這個新設計的CSS功能語法會好過一些。
當然CSS Grid除了可以取代<table>還可以做很多事。

• 前進 GitHub Pages 模式展示成果