網頁載入圖片技巧

以前網頁需要一堆 Icon、Logo、甚至是美美的邊框圖片等等，需要設計很多圖檔，然後在網頁中一一使用 img 標籤來載入圖檔。 現在您可以把這一大堆 Icon、Logo圖檔，全部存成一張圖，再利用 CSS background image 來設定哪個標籤需要圖檔中的哪一個部份。 這樣的好處是，大量減少 http request 而且可以很容易的用程式去控制要去讀哪個區塊的圖片 CSS Sprite Generator http://spritepad.wearekiss.com/ https://www.image-maps.com/ http://spritepad.wearekiss.com/ http://www.spritecow.com/ http://spritegen.website-performance.org/ Border Image Generator https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator http://border-image.com/#%7B%22src%22%3A%22http%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-background%2Fborder.png%22%2C%22linkBorder%22%3Atrue%2C%22borderWidth%22%3A%5B0%2C0%2C0%2C0%5D%2C%22imageOffset%22%3A%5B27%2C27%2C27%2C27%5D%2C%22fill%22%3Atrue%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A%5B%22repeat%22%2C%22repeat%22%5D%2C%22scaleFactor%22%3A3%2C%22setRepeat%22%3Atrue%7D...

Read More

CSS div 切版的問題

網頁設計中，會經常用到 div 來切版面。 在設計新手經常會無法理解，為什麼版塊會跳行、超出，永遠不如自己想像的那樣。 所以要理解 Box Model。 在W3C 定義的 Box Model ，它的寬度(width)及高度(height)，是不包含邊框線寬度(border)，也不包含留白(padding)的部份，只有內容的部份。 也就是說，利用 div 劃分出來的版面，實際寬度 = maring + border + padding + width。 同理，實際高度 = margin + border + padding + height。 所以如下的設定，預設會造成版塊跳行。 新手會很困擾，為什麼外框 100%，內框是兩個 50%，加起來不是超出版面寬度，出現捲軸，破壞畫面，再不然就是內框跳到下一行，同樣也是破壞了版面。 會以為一定要用 Javascript 去計算寬高，自行來指定寬高點數。 其實不需要這麼麻煩，只要指定 CSS 的參數：box-sizing 即可。...

Read More

網頁 Menu 文字變色及換圖

說穿了很簡單，就是定義 a:hover 等相關 CSS 設定 設定超連結預設的樣式 a:link { color:#0000ff;                // 超連結文字的顏色 text-decoration:none;   // 不顯示超連結的底線 } 設定點擊(訪問)過的超連結樣式 a:visited { color:#0000ff;                // 超連結文字的顏色 text-decoration:none;   // 不顯示超連結的底線 ...

Read More

網頁 Menu 增加 Icon 圖片的方法

設計網頁的 Menu 通常都是使用 <ul><li> 標籤來達成最方便，不需要太多的 Coding. 連結的部份就是用 <a> 來達成，不過影像的部份如果使用 <img> 標籤，會造成無法控制影像及超連結文字的對齊，畫面就會醜醜的。(如下圖，Sample)   所以要使用圖片，得利用 CSS 定義 <a> 的背景圖 background:url(圖片路徑檔名); background-repeat: no-repeat; background-size: Npx Mpx;            // 指定圖片縮放寬高，如果你的影像圖檔大小已經先處理好，這就可以省略 background-position:0px...

Read More