創作內容

24 GP

小屋系統預設圖片更換教學 - PART 6(按鈕完全攻略)

作者:淵│2007-09-09 16:45:42│巴幣:0│人氣:5651
好啦,圖片更換教學應該再一章就會結束...
後面讓我想想還有什麼可以寫的="=


今天要來教大家換按鈕,
就是這個↓↓↓銀色、又不得不用的醜醜按鈕,可是今天講的只限小屋首頁的部分哦~   


照慣例,怕搞錯的話請自行先備份哦~~~

廢話不多說,

教學開始。


1.↓↓↓請先打開這個 


2.看一下這段CSS,這原本是沒有的,要請各位等一下複製新增。
我知道乍看之下很複雜....
那是因為我加了很多怕我自己忘記什麼是什麼的備註敘述,
先來解釋一下框起來的部分是指什麼意思,按鈕的部分等等會說。


黑色:指你如果想要把按鈕換上你要的圖片,就是這邊。如果你的圖片很小小小一張,想直接把格子填滿的話,就把最後面那句no-repeat拿掉,這樣就會把你的一小格按鈕全部填滿。
另外註明一下,這裡的預設圖片高度是
20,不想出錯的話,就把你想放的圖片設在20以內哦。

紅色:是指你的按鈕外面還會有一圈灰色的框線,
top:上面  right:右邊  bottom:下面  left:左邊
dashed:把框線變成虛線  soild:實線
如果框線通通都不要又嫌打太多字的話,
其實把這四行濃縮成→→→『border:;』就可以了


藍色:是指你的按鈕底色,
這當你沒用圖片或是圖片變成叉燒包的時候,按鈕就會變成你這裡設定的顏色。


綠色:按鈕裡面的文字顏色。

4.這段CSS大家可以抄回家用


/*------------------------------按鈕:------------------------------*/
.button,.button2,.button3,.button4,.button_h1,.button_h2{
background:url(http://圖片網址);
border-top:#F67383 1px dashed;/*顏色和框線樣式粗細請自行更換*/
border-right:#F67383 1px dashed;
border-bottom:#F67383 1px dashed;
border-left:#F67383 1px dashed;
background-color:#FCD8D8;
color:#7D055A;
}



差點忘記...這段文字我是放在最底下,



4.按『確定送出』





--
以下是進階教學....



1.如果搞不清楚可以換的按鈕有哪些的話,可以看一下我下面這張圖,有標顏色。
不過這只有小屋首頁的部分,其他比較細的地方請自行測試="=
因為一個button通常會牽扯到好幾個按鈕...這裡只提比較看得懂的三個
button2:黃色    button3:綠色    button4:藍色


2.那像各位看到我的按鈕分成兩種,
是因為我的按鈕是分成兩部分寫的,
我寫的方式是像這樣↓↓↓↓


換成文字敘述的話就是...



/*------------------------------按鈕:------------------------------*/
/*-----button3[勇者造型相本]、[加為好友]、[設黑名單]-----*/
/*-----button3[給評價]、[(大)看更多]、[搜尋]-----*/
/*-----button3個人部落閣的[我推][收藏][編輯]-----*/
/*-----button4[寫信給他]、[留言給他]、[送禮給他]、[觀看留言]、[看結果]-----*/
/*-----button4個人部落閣的[刪除]-----*/
.button,.button3,.button4,.button_h1{
background: url(http://圖片連結) no-repeat;
border-top:;
border-right:;
border-bottom:;
border-left:;
background-color:#FCD8D8;
color:#7D055A;
}
/*-----button2[(小)看更多][更多新文章]、[收藏]-----*/
/*-----button2[新增文章][最新留言](這只有自己看得到)-----*/
/*-----button2[確定送出][載入前次設定][預覽頁面]-----*/
.button2,.button_h2{
background:;
border-top:#F67383 1px dashed;
border-right:#F67383 1px dashed;
border-bottom:#F67383 1px dashed;
border-left:#F67383 1px dashed;
background-color:#FCD8D8;
color:#7D055A;
}



當然啦,這些都可以自行摸索。
就這樣嚕~~


好...我記性超級不好的,
都忘記說這篇是根據
u4大這篇【CSS】巴哈預設按鈕更動法,然後作出這篇新手也可以看懂的教學嚕~



09/05補充:我昨天去翻過如語娃娃大的文章,她這一篇
【心得】一個按鈕套用一堆設定做啥,試到眼睛都花了XP
各位可以參考看看。不過....頭昏眼花我不負責~~ (逃走)
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=667766
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 32 篇留言

淚痕〞
噢耶!成功了!謝謝淵姊。

09-09 17:02


不客氣^^有成功就好09-09 19:11
路人喵
雖然我的按鈕已經改好了!

不過… 我覺得妳寫的好仔細…

我還是有拿一些去用@@"

gp收下> <

09-09 17:05


謝謝^^09-09 19:12
CP LV.100
好複雜~"~

看不懂呢@@

09-09 17:09


可以問我沒關係,我就我會的部分可以教你09-09 19:12
威志
這次有點複雜,晚點再來研究看看好了....

09-09 17:29

Beautiful Things
淵姐的教學對我來講,還是較為簡單易懂~推一個^^

09-09 17:50

昨日夢醒今日醉
寫的好詳細,我打包回去研究^^~推

09-09 17:53

御風
感恩呢~~~~~~~ 先拿回去收藏嚕

09-09 18:09

Beautiful Things
我還想知道的是button3裡能像你這樣po的來做細部設定嗎??
button3[勇者造型相本]、[加為好友]、[設黑名單]-----*/
button3[給評價]、[(大)看更多]、[搜尋]-----*/
button3個人部落閣的[我推][收藏][編輯]-----*/
意思就是button3的按鈕能不能分開設定??

09-09 19:00


可以,後面要設button_h1
設h2不會有反應哦09-09 19:05
鉛筆貓
可以的話想問問淵姐HINET的網頁空間怎麼使用?
點進去有看沒有懂ˊˇˋ"(我很笨..)
還是可以提供一下其他的網頁空間呢?
因為之前放無名((無名則是不能放寬750的圖..)
或是HINET相簿.PCHOME等都不能顯示出圖片...
可以的話教教我吧! 拜託哩..m(_ _)m
(站內信就可以了ˊˇˋ")

09-09 19:32


http://www.myweb.hinet.net/
按左上角的 我要註冊
它會要你輸入你的hinet連線帳密
設定好你的個人網頁密碼之後
這部分絕對跟那個xuite扯不上邊哦,要記得。

接下來你要上傳圖片的話其實可以用IE開...不用什麼FTP軟體
在網址列那裡打ftp://ftp.myweb.hinet.net/
然後用你申請的帳密登入就可以了09-09 20:16
小屋因故停止更新
好厲害!!
收藏(已經part6了呀~~)

09-09 19:46

威志
為什麼我單獨設定button2,而且照妳的語法打上去
可是button2可是部分的顏色不會變耶
.button2,.button_h2{
background:;
border-top:;
border-right:;
border-bottom:;
border-left:;
background-color:#FCD8D8;
color:#ff4500;
}

09-09 20:07


我看你的小屋是有變色的哦
可能多按幾次F5試試~
或是把cookie清掉看看09-09 20:11
☜♀★初戀★♂☞
淵大寫的真好~來推一下!
怎麼好像我用的語法跟妳不一樣阿= =?(錯覺嗎?)

09-09 21:11

Beautiful Things
還是不懂....
button_h1、button_h2這語法是什麼意思是幹嗎的??(我想這應該是做多種細部設定的關鍵)

就是button3的按鈕又分成四個部份,我要如何把button3的這四個如何個別做設定??
(所以才問button_hX語法到底是幹嗎的0.0)

我自己又分開幾個部份
/*-----button3[勇者造型相本]、[加為好友]、[設黑名單]-----*/
/*-----button3[(大)看更多]、[搜尋]-----*/
/*-----button3[給評價]-----*/
/*-----button3個人部落閣的[我推][收藏][編輯]-----*/
/*-----button4[寫信給他]、[留言給他]、[送禮給他]、[觀看留言]、[看結果]-----*/
/*-----button4個人部落閣的[刪除]-----*/
/*-----button2[(小)看更多][更多新文章]-----*/
/*-----button2[收藏]-----*/
/*-----button2[新增文章][最新留言](這只有自己看得到)-----*/
/*-----button2[確定送出][載入前次設定][預覽頁面]-----*/

舉個例
button2有四個部份,我button_hX就是設成1~4嗎??
(1.[(小)看更多][更多新文章]2.[收藏]-----*/以此類推...)
我用到腦快爆炸了...@@

總而言之
/*-----button2[(小)看更多][更多新文章]-----*/
/*-----button2[收藏]-----*/
/*-----button2[新增文章][最新留言](這只有自己看得到)-----*/
/*-----button2[確定送出][載入前次設定][預覽頁面]-----*/
button2的四個部份按鈕,要怎樣的語法才能去做細部設定0.0?
有詳細的語法嗎>"<??




09-10 03:00


如果照我寫的語法 把button2+button_h2
和button3另外拆開來寫的話會這樣

.button,.button3,.button4,.button_h1{
background: url(http://houup.myweb.hinet.net/bahahouse/MTbutton1.PNG) no-repeat;
border-top:;
border-right:;
border-bottom:;
border-left:;
background-color:#FCD8D8;
color:#7D055A;
}
.button3,{
background:;
border-top:;
border-right:;
border-bottom:;
border-left:;
background-color:;
color:#7D055A;
}
/*-----button2[(小)看更多][更多新文章]、[收藏]-----*/
/*-----button2[新增文章][最新留言](這只有自己看得到)-----*/
/*-----button2[確定送出][載入前次設定][預覽頁面]-----*/
.button2,.button_h2{
background:;
border-top:#F67383 1px dashed;
border-right:#F67383 1px dashed;
border-bottom:#F67383 1px dashed;
border-left:#F67383 1px dashed;
background-color:#FCD8D8;
color:#7D055A;
}09-10 10:27

後來我去爬過別人小屋的文...(好像是看了如語娃娃大的文
button_hX也是一個按鈕才對。09-10 10:29
龍薩爾達
感謝分享=^-^=

09-10 03:09

魔獸過夜
感謝分享喔 !

09-10 10:28

炎髮灼眼的殺手!!
喔喔!!有點了解= =

要再試試!!謝謝妳囉!!愛死妳啦XD!!

我拿來收藏嚕!!感恩感恩!!

09-10 14:42

炎髮灼眼的殺手!!
讚!感恩!!

09-10 14:42

Glass
狂推+打包啦 XD

老實說,在沒有基礎的人來說

淵姐的攻略算是最淺顯易懂的 ^^~

09-10 15:16

小于
淵姐的教學太讚了!!

是所有教學裡面唯一我看的懂得!!

感謝分享~我推!

09-10 17:01

陳香妹
用了你語法
謝謝你的提供
很詳細
顆顆:D

09-19 17:59

楓紅
感謝教學

09-24 12:38

~Ceylon錫蘭~
非常實用資訊,感恩啊!>口<

09-25 19:02

被分屍的路人
感謝!^^

10-03 03:36

H.
請問一下,

那 .. 移入連結後呢 = " =

游標跑到那邊又會變回預設值那樣欸 ..

((上方小屋首頁那串也是 ~"~ ))

10-07 11:31


這個嘛...其實我偷偷假裝忘記教XD10-08 17:25
H.
好吧,那我替你說,敬請期待。

= " =

10-10 00:35

蕭瑟印
挖勒 給你推一推~

10-31 14:22

Aquarius楓
讚...偷偷收藏了@@"

11-17 00:42

Jigang
謝謝分享XD

11-22 10:47

小角落..
寫的太讚了~~感謝你的教學>Q<

02-13 16:21

人性本懶....
請問
像是看更多那邊有一個紅色三角形的圖
要怎麼弄掉呢?

03-22 19:33

虎鐵
一直css格式錯誤...
我是把它貼到最下面,是不是需要刪掉哪些呢?

05-08 21:05

凡人
大大您很用心教我們也很開心用.永遠推

07-05 21:20

我要留言提醒:您尚未登入,請先登入再留言

24喜歡★houup 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:小屋游標更換圖文教學... 後一篇:被閃...

追蹤私訊切換新版閱覽

作品資料夾

shane8124各位帥哥美女們
《耶雷弗:契約醫生》88 【情歸何處】 更新 :)看更多我要大聲說昨天22:02


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】