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

Andrew avatar
By Andrew
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

--

All Comments

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

刪除的文章真的就不回來了嗎Q.Q

Rachel avatar
By Rachel
at 2008-09-04T02:36
如題 剛剛打完文章因為類個 所以按了4次確認 所以導致同一篇文章跑出4份來 但因為剛剛不小心D太快 連上一篇也D掉了,超幹的 可以救得回來嗎??? - ...

Pixnet新版迴響區CSS分享(超大留言區塊)

Ivy avatar
By Ivy
at 2008-09-04T02:07
剛剛做了三款新版的PIXNET迴響區樣板 回應區塊 我做的很大 所以可以不用在原本提供那個小區塊留言了 *粉紅色的夜空 (適合淺色系) *沉思的黑喵 (適合淺色系) *PINK FLOWER (適合深色系) 有興趣的人 可以到下面的網址套用 http://terisawu.pixnet.net/bl ...

提升流量

Freda avatar
By Freda
at 2008-09-04T00:30
奇摩的部落格好像是認IP 同ㄧ個IP一天不管看了幾天都算一個流量數 是這樣嗎?? 另外看到有些人會在部落格上放很多不同的欄位 像有人會連結知識通 有沒有什麼是最有效可以幫忙增加流量的工具呢? -- http://tw.myblog.yahoo.com/urdrliau-beauty/ - ...

請推荐像郭采潔相簿的部落格?

Ivy avatar
By Ivy
at 2008-09-03T23:43
用Pixnet直接大量上傳 不需壓縮的方法 相簿的管理後台 → 相片/影音上傳 → 其它上傳工具 會看到 Windows XP 內建上傳精靈 然後下載安裝那個設定檔3.0版 之後就可以直接從你放圖的資料夾上傳 接上來的方法pixnet的後台都有寫^^ -- The end is ...

Re: PTT Blog板友簽到簿(PTTBlogRolling!)

Suhail Hany avatar
By Suhail Hany
at 2008-09-03T22:50
ID:eight 網址:http://blog.xuite.net/zutoalone/wine3000 站名:葡萄酒迷航 wine3000 架站環境:Xuite (大部分葡萄酒界的朋友們都搬到Xuite來了) 簡介:就是寫葡萄酒啦,以 ...