日誌2008-02-06 15:20

css - 按鈕教學

本文引用自此
本文引用自此

如果這篇看的一點都不懂的話，請看css - 超級新手教學
如果找不到自己想要的，請看css - 導引 (看圖說故事)
如果沒有自己想要的效果，請看css - 語法說明
想要找小細部的設定，請看css - 各區塊分類解說圖(2009/4/13)
(不過這要20元喔!!不想花錢的可以看巴哈提供的分類區塊解說圖)

這裡是其他大大的css教學css - 巴哈css教學網
色碼表、上傳空間、螢幕檢色器css - 好用軟體+好文推薦

這教學是寫給我自己看的..
可以問問題..但是我自己也不是很懂XD

◎圖片要上傳到http://..某處..不能放在自己電腦..
我是放在這裡樂多日誌(不過沒有資料夾可以編輯,有點麻煩><)

1.這次要改的是按鈕..button2：藍色　　button3：紫色　　button4：綠色

2.打開『小屋首頁』> 『自訂面板』

3.下面這串文字原本沒有,將以下複製貼到CSS最下面,自行修改,.button2：藍色　　button3：紫色　　button4：綠色

/*---------------------------按鈕：------------------------------*/
.button3,.button4{/*-----勇造下的按鈕+[給紅心]+[搜尋]-----*/
border-top:#757575 0px dashed;
border-right:#757575 0px dashed;
border-bottom:#757575 0px dashed;
border-left:royalblue 0px solid;
background:none;
text-align: center;
color:#000;}

.button2,.button_h2{/*-----[看更多]+[訂閱他的小屋]-----*/
background:none;
border:#000 0px dashed;
}

.button_c1{color:#000;}   /*按鈕文字顏色*/
/*.button_c1 img{display:none;}*//*--隱藏收藏『+』--*/

/*------------------滑鼠移入按鈕---------------*/
.button2:hover,.button3:hover,.button4:hover{
background:none;
border-top:#757575 0px dashed;
border-right:royalblue 0px solid;
border-bottom:royalblue 0px dashed;
border-left:royalblue 0px solid;
}---5/2改


4.『完成』

藍色部分按鈕的文字顏色(3/5補充)
.button_c1{color:#F5F1E8;}
.button_c1 img{display:none;}/*隱藏收藏『+』*/

另外..給紅心的按鈕..可以另外設定..邊框..高度------2008.3.10
.apprise_bg input{
position:relative;
top:20px;/*這一行就是改變你的上下位置*/
border: 1px dashed #f5a6c0;
color:#cc7382;
}
可以看這篇..相關設定
css - 給紅心

收藏人數
1.就是這裡

2.在這裡設定
.elite_ppl{
color:#49A1B3;
font-weight:bold;
font-size:12px;
border:1px solid #9A9A9A;
background-color:#FFF;
}/*收藏人數文字顏色和底線框色*/

若要連結會跳動,在css最下面增加這段文字

/*連結跳動*/
a{
text-decoration:none}
a:hover{
position: relative; top: 1px;left:3px;}

↑這段會使得【即時通知】跳動，點不到喔! ----2010/5/25

『訂閱他的小屋』
1.就是這裡

2.以下複製貼上
/*-------訂閱小屋按鈕(一般狀態)------------*/
.home_order_button{
background: url() repeat;
background:transparent;
width:100px;
text-align: center;
border-top:;
border-right:;
border-bottom:;
border-left:;
color:deeppink;
}

/*-------訂閱小屋按鈕(一般狀態的字顏色)------------*/
.banner a:visited{
color:#c93030;
background:transparent;
}

/*-------訂閱小屋按鈕(滑鼠移入狀態)------------*/
.home_order_button:hover{
background: url() repeat;
background:transparent;
width:100px;
text-align: center;
border-top:;
border-right:;
border-bottom:;
border-left:;
color:#c93030;
text-decoration: underline;
}

3.若是之前寫過
.banner_t1{
color:#c93030;
font-weight:bold;
filter: Alpha(opacity=0);
}
.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
color:#c93030;
font-weight:bold;
text-decoration:inherit;
font-size:14px;
}/*暱稱和帳號文字*/
以上那段文字的..
會以2.為優先處理..我也不知道為什麼><
自己試試看吧..

◎如果要改成純色,可將這行background: url(http://網址) repeat;
改成:background-color:#F6CDD7;　#f6cdd7為色碼..可自行更改..英文的話不用加『#』,可參考色碼表
◎若要使圖片完全透明的話,可改成background:transparent;
◎若要使圖片半透明,可寫 filter:Alpha(opacity=70,finishOpacity=1,style=0);更改70這個數字的大小即可。

ps.repeat:圖片重複　　　　　no-repeat:圖片不重複

邊框　　
　　border-top:#FFF 1px dashed;/*邊框上面 顏色 寬度 樣式*/
　　border-right:#FFF 1px dashed;/*邊框右邊*/
　　border-bottom:#FFF 1px dashed;/*邊框下面*/
　　border-left:#FFF 1px dashed;/*邊框左邊*/

　　邊框樣式屬性有：
　　　　dotted：點狀線　　　dashed：虛線　　　solid：實線　　　outset:凸起狀
　　　　double：雙實線　　　groove：溝道狀　　ridge：山脊狀　　inset：凹陷狀

　　當四邊都一樣時，可寫成
　　　　 border: 1px dashed #fff; /* 邊框 寬度 樣式 顏色 */

  紫色.綠色的按鈕~
除了這裡邊框的設定之外..
裡面還會有一圈body顏色的實線設定喔!!!-----------2008.3.10
請看下圖..我設定藍色的虛線框線..
我背景是白色的..
   

若有不懂的語法,可參考css - 語法說明以上引用自 小屋系統預設圖片更換教學 - PART 6(按鈕完全攻略)
異(U4) 【CSS】討厭帳號旁的訂閱我的小屋? 那就動手改吧★080103更新

2

2

LINE 分享

相關創作

火狐Firefox CSS樣式：美化套件管理按鈕

2024 的個人網頁設計

火狐Firefox CSS樣式：隱藏書籤、歷史按鈕選單的多餘選項完整版

留言

• 2008-04-03 20:54夏：
  謝謝^^

  2008-04-09 19:39小角落..：不會^^

• 2010-05-23 01:32Sticky Fingers：
  即時通知的按鈕要改成可以點要去哪邊啊0.0
  大大現在的小屋背景就是不能點即時通知的那種@@

  2010-05-25 22:48小角落..：主要是這行，連結會跳動
  a:hover{position: relative; top: 0px;left:0px;}
  把他刪除，或是註解起來就可以了
  /*a:hover{position: relative; top: 0px;left:0px;}*/

• 送出