分類彙整:CSS 語法 – 網頁設計

CSS教學分享文 – 固定背景圖之語法練習

範例完成圖

這次飛肯的教學文,要來分享的是,如何利用 CSS-div 語法排版,將背景圖片固定在自己想要的網頁位置上,雖然是個很簡單的範例,不過各種常用的 background 語法設定幾乎都可以從這次範例中一起學到喔。
此外,版型中還附加了兩個 CSS3 的特殊效果語法,來讓大家認識一下:分別是圓角效果,以及文字的陰影效果,現在就請大家跟著以下步驟,一起完成今天的 CSS 語法練習吧! 繼續閱讀

in CSS 語法 - 網頁設計

CSS 教學 – 單欄式網頁版型設計

網頁完成圖示

這一次的飛肯教學文,要跟大家分享的是,如何用 CSS 語法來做一個單欄式網頁的版型設計!
雖然只是一個很基本的架構,但是在教學文當中,大家可以跟著小編一起學習幾個常用的語法,例如「 text-indent 」 的兩種使用方式、選單之水平排列、清除浮動的寫法…. 繼續閱讀

in CSS 語法 - 網頁設計

CSS 教學 – 基本文字設定 : font-size 與 line-height

行高設定與文字水平置中

各位同學好~
年假跟元宵節都過完了,大家應該都有好好的休息跟玩樂吧~現在,歡迎大家跟著久違的飛肯的教學分享文,一起收收心、練練功~
今天要來跟大家分享 CSS 語法中,文字部分很基本卻也很重要的「字型大小(font-size)」以及「行高(line-height)」的寫法喔…. 繼續閱讀

in CSS 語法 - 網頁設計

CSS Sprite 教學 – 條例式按鈕設計

CSS Sprite -ul-li-ok

大家好,在上一次飛肯教學文中,所提到的「CSS Sprite」語法技巧,不知道各位都練習過了嗎?
延續上次教學文的主題,今天我們再來做一個也很實用的「條例式按鈕設計」語法練習;在這篇教學文中,我們會先做一次一般版本的寫法,接著,我們就會教大家如何使用「CSS Sprite」,讓自己的網頁更為精簡、優化喔~ 繼續閱讀

in CSS 語法 - 網頁設計

CSS 教學 – CSS Sprite 網頁優化技巧入門

CSS-icon-Sprite

大家好,今天飛肯教學文要來教各位一個非常實用, CSS 語法網頁設計的重要技巧之一: 「CSS Sprite」。這個技巧不但可以幫我們減輕網頁主機端的圖檔數量、加快網頁的開啟速度,更進一步還可以讓網頁的 SEO 排名提高,所以大家一定要學會這一招,將它應用在排版時,就可以輕鬆達到網頁優化的效果喔! 繼續閱讀

in CSS 語法 - 網頁設計

CSS 教學 – 設定一個 div 水平置中和垂直置中

CSS垂直置中

使用 CSS 語法要設定一個 div 水平置中,是很常見到的需求,最多人使用 margin: 0 auto; 這個方法就可以達成。但是,如果要讓一個 div 同時間做到在網頁上水平置中還要垂直置中,這就有點麻煩了… 繼續閱讀

in CSS 語法 - 網頁設計