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

By Andrew
at 2008-09-04T13:47
at 2008-09-04T13:47
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
--
一般來說我都是在header放一張背景圖,裡面有我想要連結的圖案
alubm、blog那些...
像:http://p2.p.pixnet.net/albums/userpics/2/1/103321/1208498033.gif

但是我覺得這樣最方便,可以順便連其他的欄位一起做好
再來就是把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
--
Tags:
部落格
All Comments

By Damian
at 2008-09-09T09:03
at 2008-09-09T09:03

By Skylar Davis
at 2008-09-11T02:39
at 2008-09-11T02:39

By Anonymous
at 2008-09-14T23:52
at 2008-09-14T23:52

By Yuri
at 2008-09-17T07:45
at 2008-09-17T07:45

By Ula
at 2008-09-21T16:39
at 2008-09-21T16:39

By Quanna
at 2008-09-25T20:25
at 2008-09-25T20:25

By Vanessa
at 2008-09-28T06:08
at 2008-09-28T06:08

By Eartha
at 2008-10-02T14:08
at 2008-10-02T14:08

By Dinah
at 2008-10-03T06:18
at 2008-10-03T06:18

By Noah
at 2008-10-07T22:00
at 2008-10-07T22:00
Related Posts
刪除的文章真的就不回來了嗎Q.Q

By Rachel
at 2008-09-04T02:36
at 2008-09-04T02:36
Pixnet新版迴響區CSS分享(超大留言區塊)

By Ivy
at 2008-09-04T02:07
at 2008-09-04T02:07
提升流量

By Freda
at 2008-09-04T00:30
at 2008-09-04T00:30
請推荐像郭采潔相簿的部落格?

By Ivy
at 2008-09-03T23:43
at 2008-09-03T23:43
Re: PTT Blog板友簽到簿(PTTBlogRolling!)

By Suhail Hany
at 2008-09-03T22:50
at 2008-09-03T22:50