用 javascript 觸發 CSS 屬性
例子1 :https://www.daconote.com/sample/javascript-trigger-CSS.php 例子2 :h...
分類： css
CSS: transition 轉場/過場
transition 最常使用在滑鼠移到物件上時 (hover) 觸發的變化。 ▼比如說如下例子，當滑鼠移上去時人物會「立即」以Y軸為軸心旋...
CSS: transform：旋轉 rotate、縮放 scale、平移 translate、歪斜 skew、3D 透視 perspective
transform 屬性 transform 語法用來翻轉區塊，但不適用於「行內元素」(inline element)，除非把行內元素設定為...
CSS 遊戲，邊玩邊學，包含 flex, grid 的遊戲
CSS Dinner CSS Dinner 是一款關於 CSS 選擇器套用語法的遊戲。 要通過關卡你可能需要這一篇裡面的 CSS 知識：選擇...
CSS 偽元素：before, after
before, after 如果你是用 WordPress 架設網站，before, after 這偽元素將會非常有助於調整版面的細節。比之...
CSS 語法 16：彈性排版 flex
彈性排版 flex flex 或 flexbox 是 CSS 排版的大怪獸，只要學會這幾行 CSS ，就可以取代許多 CSS 的排版框架。尤...
CSS：書寫方向 writing-mode
書寫方向 writing-mode 雖然網頁的文字方向大都是水平由左至右，但如果因為種種原因想要由上到下，由右至左，也是有方法的。 writ...
CSS 語法 19：滑鼠游標 cursor
鼠標 cursor 改變滑鼠游標？這是是90年代的網頁設計流行嗎？可能是用行動裝置瀏覽網頁已經是主流，而手機當然是沒有鼠標這種東西，CSS ...
CSS語法18：對齊 align、 text-align
對齊( align, text-align ) text-align text-align 用來定義文字的對齊規則 text-align:l...
CSS 語法 17：媒體類別 @media
媒體類別 (media) media 的屬性，通常用在宣告在不同裝置、不同螢幕尺寸下，要使用那一個不一樣的 CSS 樣式表。比如說列印時字想...
CSS 語法 15：格線 grid, 單位 fr
格線 grid 格線會用到幾個屬性來定義，row (列) 指的是水平方向的，column (欄) 指的是垂直方向。 給定大小的值可以用 px...
CSS 語法 14：顯示 display, inline, block, inline-block
顯示 display display 常見的屬性有： <td>元素為區塊，沒有特別設定的話，下一個 block 會換行，可以設定...
CSS 語法 13：浮動 float / 清除 clear
浮動 float float 的用法有點像圖繞文的效果。但如果認為他只有圖繞文的效果，就太小看它了。 因為現在的網頁設計 RWD (Resp...
CSS 語法 12：位置 static, absolute, relative, z-index, overflow
位置 position 用 position 來定義元素位置時，有意下幾種參數值。 • static position:static;(預設...
CSS 語法 11：表格 table
表格 table 在 HTML 語法裡面和 table 有關的標籤，像是 table, th, tr, td 都可以宣告其內的 CSS 樣式...