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

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

CSS選取器 - css 群組化

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

in CSS 教學 - 網頁排版

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

步驟一:HTML架構

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

in CSS 教學 - 網頁排版

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

首頁為第一關畫面

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

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

W3C 規定~ 全部 HTML 標籤的 CSS 屬性預設值

每個 HTML 標籤在 CSS 中都有不同的預設值,例如預設的文字大小、預設的間距、預設的框格模型….等。例如 <h1> 的文字大小 預設值是 2em ,<h2> 的文字大小 預設值是 1.5em,<body> 的外間距是 8px… 閱讀全文

in CSS 教學 - 網頁排版

【設計資源】 – Google Fonts 免費雲端字庫-導覽篇

google fonts index

在之前的設計資源分享文,我們跟大家介紹了新開放下載使用的思源宋體,以及「Google Noto Fonts」這個可免費下載字體的網站。
今天要跟大家進一步介紹的網站,是不僅可以下載字體到自己電腦裏頭使用,另外,還可以透過 CSS 語法功能,立即套用到網頁上的雲端字體庫 – 「Google Fonts」… 閱讀全文

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

CSS 教學 – margin-top 失效!外間距會直接影響到上一層

調整內容的上間距 調整文字元素或圖片元素的上間距,理所當然是要使用 margin-top 語法,然而,當我們高高興興完成網頁排版,心想趕快收拾包包下班走人時,慘劇往往就發生在各個瀏覽器的不一致問題之中… 閱讀全文

in CSS 教學 - 網頁排版