meta data for this page
差異處
這裏顯示兩個版本的差異處。
下次修改 | 前次修改 | ||
blog:2020:12:13-word-card [2020/12/13 06:49] 127.0.0.1 外部編輯 |
blog:2020:12:13-word-card [2022/11/18 23:23] (目前版本) ghsrobert ↷ 鏈結因頁面移動而自動修正 |
||
---|---|---|---|
行 3: | 行 3: | ||
技術拆解/, | 技術拆解/, | ||
- | - [[BlueGriffon]] = __HTML 編輯器__,自不待言 | + | - [[web-designing: |
- 先把 100 多個字串打好(共 22 種不同的韻尾。其實這步本來也可以用試算表輔助複製相同的韻尾來加速的,但我打字很快就打完了 XD) | - 先把 100 多個字串打好(共 22 種不同的韻尾。其實這步本來也可以用試算表輔助複製相同的韻尾來加速的,但我打字很快就打完了 XD) | ||
- 打完字後用 Sublime Text regex 全部轉成 ``div.card``⭐,就丟到 BlueGriffon 裡開始設定 CSS:< | - 打完字後用 Sublime Text regex 全部轉成 ``div.card``⭐,就丟到 BlueGriffon 裡開始設定 CSS:< | ||
行 16: | 行 16: | ||
- 想用清楚、好看的粗體 sans-serif 字型: | - 想用清楚、好看的粗體 sans-serif 字型: | ||
- 先用 Typeface 找系統現有 → 仍不滿意 | - 先用 Typeface 找系統現有 → 仍不滿意 | ||
- | - → 上 FontSquirrel 很快就從 ``Bold`` 標籤中找到↓< | + | - → 上 FontSquirrel 很快就從 ``Bold`` 標籤中找到一個字型並下載安裝↓<code css> |
font-family: | font-family: | ||
- | * ⭐順便還把該網頁用 [[mao> | + | * ⭐順便還把該字型網頁用 [[mao> |
- 巧皇后本來還交代希望「同韻」的單字要有相同的文字顏色,以便分類 ← 我本來抱怨太麻煩,否決掉((大膽,不要命了 XD))\\ 後來想到,只要用把同韻的 card 都加上相同的 class 再用 CSS 賦予個別的文字 color 就好,那 HTML 編輯方式很簡單,一樣用 regex 搜出同韻的各行,再把該韻加上 class 即可 | - 巧皇后本來還交代希望「同韻」的單字要有相同的文字顏色,以便分類 ← 我本來抱怨太麻煩,否決掉((大膽,不要命了 XD))\\ 後來想到,只要用把同韻的 card 都加上相同的 class 再用 CSS 賦予個別的文字 color 就好,那 HTML 編輯方式很簡單,一樣用 regex 搜出同韻的各行,再把該韻加上 class 即可 | ||
- 本來要用 Sublime Text 把 22 種韻尾取代 22 輪的 | - 本來要用 Sublime Text 把 22 種韻尾取代 22 輪的 | ||
行 38: | 行 38: | ||
} | } | ||
</ | </ | ||
+ | * 學到試試 '' | ||
+ | #container { | ||
+ | width: 21cm; | ||
+ | } | ||
+ | </ | ||
+ | * 後來改為 '' | ||
+ | * 不過列印時有超出去邊界 → 再學到在列印 dialog 中設定 fit content to page width(([[g> | ||
</ | </ | ||
{{tag> | {{tag> |