Category: CSS
-
[CSS] Image Sprites
在做網頁設計時,我們時常為了網站美感,在網頁中放入許多小圖(ex: 按鈕、文章標題背景、標籤) 。然而,當一個網頁有多個圖檔要載入時(ex: 30張以上),瀏覽器在解析時,會不停地發送Http Requests,使得流暢度降低,也易造成client端負擔。因此,利用CSS Sprites可減少瀏覽器對圖檔的Http Requests。此一技巧是將網頁中會用到的背景圖檔,全部集中放在一個圖片檔中,並利用 CSS 的 background-image 與 background-position 屬性將欲顯示的按鈕圖等部分顯示出來。如此,便可降低Http Requests。 例如以下語法: img.next{width:43px;height:44px;background:url(img_navsprites.gif) -91px 3px;}便是將要顯示的next區塊,背景圖設定為: 寬度:43px 高度:44px 讀取的圖檔位置:img_navsprites.gif 位移量:將圖檔向左偏移91px,向下偏移0px後,開始讀取。(若是要將圖檔向右偏移30px,向上偏移20px,則設定為background:url(img_navsprites.gif) -91px 3px;有關偏移量的解釋,請見”CSS Tutorial – The background-position Property“一文) 註:詳細CSS Sprites的教學,可參考”W3School“另外,筆者對這個還蠻有興趣的,就隨手找了幾篇文章做整理。從保哥的文章指出,IE瀏覽器跟某些個案有時候不支援background-image這種做法。因此,我們可以換另一個方式來替代:(截自extending css spriting).menu-about { width: 106px; height: 29px; position: relative; top: 0; left: -293px; }.menu-about img { position: absolute; clip: rect(0 399px 29px 293px); }…
-
PHP樣板引擎:Smarty
筆者在「網站製作學習誌」這個豐富的Blog內,看到許多有關「PHP樣板引擎:Smarty」的介紹,筆者挑出一些比較重要的文章出來,好讓各位對Smarty有概略的了解與應用: Smarty入門 Smarty手冊正體中文版 Smarty小技巧整理 另外,對於CodeIgniter這個MVC framework來說,能不能結合Smarty呢?答案是:「Yes!」 CodeIgniter結合Smarty
-
[網頁設計] CSS語法
最近常常在摸這個東西,遇到一些問題,就動手記下來…。 CSS 中文教學手冊 (很詳盡,建議新手可以去看看) 利用CSS建立導覽列 CSS在IE與Firefox都可以兼容的設計要點 如何利用CSS製作下拉選單,完全不用JavaScript 用legend、fieldset實現文字在邊線上的效果 IE6下解決Fixed屬性的問題 同場加映: 消除按下連結時會產生周圍虛線的CSS語法。 /*———-消虛線———*/ /* For IE, onFocus 的 F 要大寫*/a{noFocusline:expression(this.onFocus=this.blur());} /* For Firefox */a:focus{-moz-outline-style:none;}