2007/02/11

新 Yuren's 文舖連結

最近在 Yuren's 文舖做了一個新連結,長這樣:
yuren blog screenshot
細心的朋友應該有注意到 HTML Code 長這樣:
Yuren's 文舖的 HTML code
通常如果這樣的 HTML 結構應該會做出下面這樣的結果:
但是利用一點 CSS 的小技巧,可以把文字替換成圖。這個用法是我在 Mono 的網站上看到的,我發現他右上角的連結很妙,所以就拿來用。步驟大概是這樣:
  1. 把 ul li 的 list-stlye 改成 none
  2. 把 a 的 display 設定成 block
  3. 讓文字跑到最左邊去:text-indent: -1000em;
  4. 接著連結移到上面去的變化是用 a:hover 加上 border 做的
詳細的 CSS Code 就這樣:
css-code
大致就是這樣囉。

3 則留言 :

  1. 哦..我懂了,太酷嚕!我試試..

    回覆刪除
  2. OK了, 請您看一下吧, 感恩! 好好玩喔! 這樣整個網頁的東西都可以連耶!

    回覆刪除
  3. 呵,還不賴吧。
    我常逛一些網站,漂亮的就看看人家怎麼設計,有些還不賴。像是 Evolution 的設計也不錯,單純用 CSS 做出一些不錯的效果 :)

    回覆刪除