分類彙整: CSS 教學 – 網頁排版

CSS fonw-weight 調整文字的粗細 Noto Sans TC

font-weight

我們再來修改一下 <h1> 一號標題和 <h2> 二號標題設定字型為「Noto Sans TC」, 然後<h1> 一號標題 font-weight 的粗細設定為最粗的 900 ;<h2> 二號標題 font-weight 的粗細設定為最細的 100 閱讀全文

in CSS 教學 - 網頁排版

CSS3 Filter 濾鏡特效

CSS3 Filter

CSS3 擁有 Filter 濾鏡特效模組一系列的功能,例如 filter: opacity(0.5) blur(4px); 就可以做出透明度 0.5 加上高斯模糊 4px 的效果,除此之外 Filter 濾鏡還有很多功能: 閱讀全文

in CSS 教學 - 網頁排版

CSS 排版教學 – 三欄式網頁設計教學範例

CSS排版教學 - 三欄式網頁版型

CSS 排版教學,使用 CSS 語法做一個三欄式網頁版型設計!雖然只是一個很基本的架構,這是 CSS 的基楚排版的範例教學,基礎練習是最重要的基本功,所以同學一定要好好練習喔! 閱讀全文

in CSS 教學 - 網頁排版

CSS 教學:CSS 選擇器(選取器) -群組化

CSS選取器 - css 群組化

當我們的 CSS 選擇器中有好幾個地方使用相同的設定時,可以把這幾個 CSS 選擇器合併,原本可能寫了 7~8 行相同的語法,合在一起後只剩短短的一小行,優化 CSS 並加快網頁速度。 閱讀全文

in CSS 教學 - 網頁排版

【好站分享】「Flexbox Froggy」學習 Flexbox 的遊戲網站

首頁為第一關畫面

最近小編發現了一個不錯的遊戲網站 – 「 Flexbox Froggy 」,所以來跟大家分享一下~
遊戲的主旨很簡單,就是利用輸入正確 Flexbox 語法指令, 來幫助畫面中的青蛙們回到荷葉上;很重要的一點:有繁體中文版耶~!
當然,語法指令還是需要用英文輸入的啦… 閱讀全文

in CSS 教學 - 網頁排版, Free Resource 好康報報, Good Design 好站報報

Google Fonts 線上字體推出 5 款免費的中文網頁字型

思源黑體

Google 繼發表了開源的(免費的)思源黑體字型之後,又另外推出了 5 款免費的 中文網路字型,分別是:楷體、圓體、仿宋體、黑體、明體 5 種字體。比起我們這幾年一直在使用的 微中正黑體 是不是好看多了!感謝 Google 願意提供這麼多免費的開源字體給我們使用,感謝!感謝! 閱讀全文

in CSS 教學 - 網頁排版, Free Resource 好康報報