無名怎麼用圖片式連結?

Question

我想要問的是把﹝帳號│首頁│相簿│網誌│留言﹞
這個部份的連結換成用圖片來連結
因為我覺得無名這個既定的連結列這樣很不好看
而且也不能修改自己要的連結名字
看別人有用圖片當連結
連到他無名的網誌.首頁.留言板.相簿
所以想請問語法該怎麼弄...

最後一個重點.請麻煩告訴我怎麼把連結分別用成直的排列跟橫的排列

*直的↓
首頁
相簿
網誌
留言

*橫的↓
首頁│相簿│網誌│留言

謝謝!

Answer 1

小朋友，我下面會解說如何製作，不過以長遠看，你需要一些 HTML 基礎和 CSS 基礎。

第一個問題，你希望連結列以圖片來做連結。在 HTML 裡頭，連結，所謂的 文字 包含下列的 CSS 對應的事件：

:link, :hover, :active, :visited

那你所要做的事，只要找到首頁│相簿│網誌│留言這幾個定位，把連結改成方塊顯示，把字改成 0 點，然後貼上背景即可。例如：

a#linkBlog { display:inline; background-image:url('yourURL') no-repeat; font-size:0px; } /*橫，網誌*/
a#linkBlog { display:block; background-image:url('yourURL') no-repeat; font-size:0px; } /*縱，網誌*/

上面範例只有給個大概意思，依照個人套用型版不同而不同。要照抄後果自負。

第二個，橫的這樣用

ul {float:left;}
ul li {display:inline;}

直的這樣用

a {display:block;}

一樣給個大概意思，後果自負。

看的懂 html 與 CSS 的看這個業界推崇的範例頁：