http://twpcsx2.blogspot.com/2014/02/css3.html
- 2月 12 週三 201402:02
使用 CSS3 讓文字比較多比較長的連結自動換行
- 2月 12 週三 201401:19
為 a:hover 的連結和底線指定不同的顏色
http://twpcsx2.blogspot.com/2014/02/ahover.html
- 8月 24 週五 201206:34
:hover 適用於任何 HTML 標籤（CSS）
首先要注意的是 :hover 不能用 inline CSS 來寫，只能寫在 <style> 標籤裡或 .css 檔案裡。
:hover 常與 <a> 連用，構成 a:hover，其實 :hover 也可與其他 HTML 標籤連用，也有效。
譬如 h6:hover {background-color:#D2EBFF}，同學把滑鼠指標移到下一行，就可以看到效果：
把滑鼠指標移過來，背景顏色會變成 #D2EBFF
:hover 常與 <a> 連用，構成 a:hover，其實 :hover 也可與其他 HTML 標籤連用，也有效。
譬如 h6:hover {background-color:#D2EBFF}，同學把滑鼠指標移到下一行，就可以看到效果：
把滑鼠指標移過來，背景顏色會變成 #D2EBFF
- 9月 21 週三 201121:28
利用 HTML Table 及其 th td 的背景顏色差異偽裝成 HTML Table 的 border
效果如下：
一四七 二五八 三六九
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
- 9月 21 週三 201118:49
使用 CSS 把 HTML Table 及其 cell 的 border 都變成 1px
效果如下：
一四七 二五八 三六九
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
- 7月 27 週三 201121:20
IE 的某些 CSS 相容性問題可透過網頁第一行加入 HTML DTD 解決
範例：令網頁只有這一行內容：
<hr style=border-style:none>
此時用 Firefox 開網頁就會像預想的那樣一片空白，而用 IE8 開網頁依舊顯示一條 <hr> 水平線。
若要 IE8 顯示正確的結果，就在網頁的第一行寫 HTML 的 DTD。
可以用殺很大的 XHTML 1.1 DTD：
<hr style=border-style:none>
此時用 Firefox 開網頁就會像預想的那樣一片空白，而用 IE8 開網頁依舊顯示一條 <hr> 水平線。
若要 IE8 顯示正確的結果，就在網頁的第一行寫 HTML 的 DTD。
可以用殺很大的 XHTML 1.1 DTD：
- 7月 27 週三 201117:43
使用 CSS 製作含有背景圖片的彩色 <hr>
給 <hr> 套用特定的 CSS，每次寫 <hr> 都能達到像這樣的最終效果：
首先決定 <hr> 裡使用的背景圖片。這裡是用一個 41x20 像素的圖片：
圖片高度是 20 像素，所以 <hr> 的高度也要 20 像素以便剛好裝下圖片：
- 6月 08 週一 200915:25
維基百科樣式的連結背景圖片（CSS）
含有背景圖片的維基百科樣式的連結 Wikipedia 使用的 CSS
a {
background:url(背景圖片.png) right no-repeat;
padding-right:13px;
}
- 3月 20 週五 200915:32
使用 CSS 美化 <hr> 水平線
<hr /> 預設是這個樣子：
通過 CSS：取消 <hr> 預設留有的 border，再指定 height 為 1 像素，並弱化 <hr> 的背景顏色。背景顏色這邊 IE6 不認 background-color，但可以使用 color 達到同樣效果。這樣所有瀏覽器的相容性就都不會有問題。
通過 CSS：取消 <hr> 預設留有的 border，再指定 height 為 1 像素，並弱化 <hr> 的背景顏色。背景顏色這邊 IE6 不認 background-color，但可以使用 color 達到同樣效果。這樣所有瀏覽器的相容性就都不會有問題。
- 3月 06 週五 200904:05
圖片形式的連結透過 a:hover 達到更換圖片的效果（CSS）（不支援 IE6）
聲明：不支援 IE6。因為有用到 a:hover img {display:none} 這樣的形式，經測試 IE6 中無效、IE7 和 IE8 RC1 沒問題。所以應該是 IE6 的 BUG。
預設不顯示連結使用的圖片，而是使用一個維度相同的問號圖片替代。a:hover 時才顯示連結所使用的圖片。
示例 HTML 原始碼：
<a href="http://localhost"><img src="50.png"></a>
PCSX2 (19)