pixnet的連結文字變圖片 - 部落格

Table of Contents

首先當然是把字先藏掉
一般來說我都是在header放一張背景圖,裡面有我想要連結的圖案
alubm、blog那些...
像:http://p2.p.pixnet.net/albums/userpics/2/1/103321/1208498033.gif
當然背景圖也可以不用全部放在header裡
但是我覺得這樣最方便,可以順便連其他的欄位一起做好

再來就是把navigation作成下面的設定
#navigation a{
display:block;
width:XXpx;
height:XXpx;
text-indent:-3000px;
}
長寬設定成跟你放在header背景圖裡的按鈕一樣大就好
然後text-indent:-3000px;可以讓字藏起來

然後把navigation裡面的按鈕排排放啦
navigation裡面的按鈕有#link-album#link-blog#link-guestbook跟#link-profile
用看的應該就知道那個是哪個按鈕
接著看你要用絕對定位放那4個按鈕還是直接用#navigation li排
個人偏好前者,雖然比較麻煩

最後關於你說還要增加其他的連結
那就必須使用側欄裡的自定欄位啦,使用方法也跟上面差不多
先在自定欄位加上自己想要的連結
然後把字隱藏再定位到自己想要的地方
這樣就想要抿什麼就有什麼啦


我盡量把這篇寫的不會CSS也能看懂(還是要會一點點啦)
所以如果還有疑問的話,就提問吧

--
鄉民的學習不能等...
http://blog.pixnet.net/ayu91035

--

All Comments

Damian avatarDamian2008-09-09
推詳盡的解說! 感謝
Skylar Davis avatarSkylar Davis2008-09-11
感謝先。
Anonymous avatarAnonymous2008-09-14
1.navigation方法其實我了解,只不過為求說明文字一致,所以
Yuri avatarYuri2008-09-17
想說用連結方式設定看看(之前連結可以設定文字說明,也就是
Ula avatarUla2008-09-21
當滑鼠移到連結字上會顯示的說明)。
Quanna avatarQuanna2008-09-25
2.自訂欄位不論將連結放在標題或內容都不能成為連結,所以你
Vanessa avatarVanessa2008-09-28
應該指的是「我的連結」吧?
Eartha avatarEartha2008-10-02
如果是這樣的話,我好像誤解你的意思了,不過使用自定欄
Dinah avatarDinah2008-10-03
位不是可以用連結的嗎?用html的語法就OK了阿
Noah avatarNoah2008-10-07
感謝:)原來是要用HTML。用自訂欄位應該可以做出我想要的東西