分類彙整: 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 好康報報

CSS教學 – 重複背景圖之語法練習

步驟一:HTML架構

今天要來分享的 CSS 語法練習,其實是之前有一篇「固定背景圖教學文」的延伸版,要教大家利用上一篇的網頁版型,來做重複背景圖片的語法練習。
如果是第一次加入的新朋友,要請您先參考上一篇之後,再來 follow 本篇教學才會比較銜接得上喔!請大家先準備好兩張素材圖片,我們就要進入正式的練習囉!
Ready~~~ Go!… 閱讀全文

in CSS 教學 - 網頁排版

CSS 教學:Google Fonts 免費雲端字體-實作篇

步驟一:新建HTML

大家好,上次已經有介紹過「 Google Fonts 」這個雲端字體的免費資源,這次的教學分享,小編會利用一個簡單的網頁版型來作示範,實際教大家如何將雲端上面的字體套用到自己的網頁裡。不論是「 Google Fonts 」或是 CSS 語法的初學者,都別錯過這次練習的好機會喔… 閱讀全文

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