新 Yuren's 文舖連結

最近在 Yuren’s 文舖做了一個新連結，長這樣：

細心的朋友應該有注意到 HTML Code 長這樣：

通常如果這樣的 HTML 結構應該會做出下面這樣的結果：

• 留言板
• 我的書櫃
• Picasa 相簿
• Yuren’s Info Area

但是利用一點 CSS 的小技巧，可以把文字替換成圖。這個用法是我在 Mono 的網站上看到的，我發現他右上角的連結很妙，所以就拿來用。步驟大概是這樣：

1. 把 ul li 的 list-stlye 改成 none

2. 把 a 的 display 設定成 block

3. 讓文字跑到最左邊去：text-indent: -1000em;

4. 接著連結移到上面去的變化是用 a:hover 加上 border 做的

詳細的 CSS Code 就這樣：

大致就是這樣囉。