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

Google Fonts 線上字體推出 5 款免費的中文網頁字型

思源黑體

Google 繼發表了開源的(免費的)思源黑體字型之後,又另外推出了 5 款免費的 中文網路字型,分別是:楷體、圓體、仿宋體、黑體、明體 5 種字體。比起我們這幾年一直在使用的 微中正黑體 是不是好看多了!感謝 Google 願意提供這麼多免費的開源字體給我們使用,感謝!感謝! 閱讀全文

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

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

範例完成圖

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

in CSS 教學 - 網頁排版

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

sublime_download

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

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

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

sublime text-install package

不知道大家還記得上一回做的 Sublime Text 基本下載與安裝嗎?這次我們要延續上一次的進度,也就是已安裝好的「 package control 」套件,現在就要利用它,來進行其他外掛的安裝作業… 閱讀全文

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