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

教學:Sublime Text 的安裝設定及入門操作 – [ 上篇 ]

sublime_download

相較於普遍多人初學網頁時,會選擇使用 Dreamweaver ,而 Sublime Text 最大的優勢就是它有著大量實用的外掛程式,每個人可以根據自己使用上的需求,安裝其所需的外掛,讓這套軟體更為完備且能發揮更大的功效。所以,只要能夠善用擴充套件的功能,其實 sublime Text 是個可以大大提高網頁建置效率的好工具喔… 閱讀全文

in CSS 教學 - 網頁排版, Dreamweaver 網頁設計, Free Resource 好康報報, JavaScript 程式設計, RWD 響應式網頁

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

步驟一:新建HTML頁面

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

in CSS 教學 - 網頁排版

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

CSS Sprite -ul-li-ok

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

in CSS 教學 - 網頁排版

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

CSS-Sprite

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

in CSS 教學 - 網頁排版

CSS 置中教學 – div 水平置中和垂直置中【一】

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

in CSS 教學 - 網頁排版

CSS3教學 Transition 轉場動畫 – 滑動廣告篇

再來一篇換湯不換藥的範例,我們稱它為滑動廣告!其觀念是與前篇一模一樣,僅僅是 HTML 結構不一樣而已!請各位仔細聽我說來…若還不熟悉請見以下兩篇文章~淺談 CSS3 Transition 轉場動畫效果 CSS3 Transition 轉場動畫應用實例 – 滑動選單篇 閱讀全文

in CSS 教學 - 網頁排版