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

CSS 排版教學 – 設計圖形按鈕選單 – 入門篇【二】

接續上一篇 CSS 語法 – 設計圖形按鈕選單 – 入門篇【一】 再讓同學練習一次 同樣的 <ul> <li> 項目清單結構,同樣的 CSS 基本語法,就可以做出不同的變化與創意。 設計圖形按鈕選單,在 HTML 結構… 閱讀全文

in CSS 教學 - 網頁排版

CSS 文字大小 em 和 px 的單位換算比較表

W3C 規定的文字單位是 em , 而一般的網頁設計師習慣的文字單位是 px, 使用 px 的時候~ 在 IE 瀏覽器時使用者是無法自行調整文字大小的~ 因此要製作符合「無障礙網頁」就必須使用 em 為單位… 閱讀全文

in CSS 教學 - 網頁排版

CSS 排版教學 – float 2 欄式網頁版型

CSS 排版教學,使用 CSS float 語法編排網頁版型, 在 HTML 使用 div 劃分欄位,再用 CSS 語法來做圖形與版面編排,這個範例是 CSS 網頁設計的基本練習 閱讀全文

in 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 教學 - 網頁排版