CSS-我的小屋CSS

所有有url(圖檔)}這個語法的地方，()通通都不準拿掉，只要把你的圖檔網址帶入()中即可
所有}後面有圖示及紅色字體加註的地方請在語法內拿掉XD

其他CSS相關教學

/*--------------------------整體頁面設定--------------------------*/
/*游標*/
BODY {
cursor:url(游標檔圖片檔網址1)};
a:hover {
cursor:url(游標檔圖片檔網址2)};
註:
body裡面放游標代表著一般時候的游標
hover裡面放游標代表當滑鼠移到超連結時候的游標
CSS的游標得用cur檔(靜態游標)、ani檔(動態游標)或ico檔，不支援gif、bmp、jpg檔案
語法都正常可是一樣無法顯示出來就要檢察一下游標連結是不是有問題

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

/*捲軸*/
html{
SCROLLBAR-FACE-COLOR:#fcfcfc;
SCROLLBAR-HIGHLIGHT-COLOR:#fc90b4;
SCROLLBAR-SHADOW-COLOR:#fc90b4;
SCROLLBAR-3DLIGHT-COLOR:#fc90b4;
SCROLLBAR-ARROW-COLOR:#fc90b4;
SCROLLBAR-TRACK-COLOR:#fc90b4;
SCROLLBAR-DARKSHADOW-COLOR:#fcb4b4;
SCROLLBAR-BASE-COLOR:#fc90b4
}
圖示

/*網頁四色加框*/
body{
border-left:10px dotted pink;
border-right:10px dotted pink;
border-top:10px dotted pink;
border-bottom:10px dotted pink;
}
註:可自由調整4個邊的顏色及寬度
dotted後面為顏色
圖示

/*留言處和回應處插圖*/
textarea {
background:url(留言處和回應處插圖圖檔網址);
background-repeat:no-repeat;
background-position:right;
padding-left:10px;
padding-right:10px;
height:195px;
}
圖示

/*--------------------------右選單設定--------------------------*/
/*右選單大標題圖*/
.post_title {
background-image:url(右選單大標題圖網址);
height:45px;
background-position:center;
padding-left:53px;
padding-right:30px;
font-size:100%;
color:#005A78;
}
圖示

/*右選單小標題圖*/
body{list-style:url(右選單小標題圖網址);
}
圖示

/*右選單背景透明*/
.postboxin {
background-image:url();
}
.postbox2 {
background-image:url();
filter:Alpha(opacity=50,finishOpacity=0,style=0);
}
圖示修改前

圖示修改後

/*欄位加框*/
li{
BACKGROUND:url(黑色部份的背景圖檔) 0% 50%;
COLOR:#FFFFFF;
BORDER-TOP-STYLE:double;
BORDER-RIGHT-STYLE:double;
BORDER-LEFT-STYLE:double;
BORDER-BOTTOM-STYLE:double;
padding-left:1px;
}
註:
黑色部份的背景圖檔請依喜好設定
修改前

修改後

不想用使用以上語法者，可以不用放進CSS語法裡。
/*--------------------------小屋主頁面設定--------------------------*/
/*背景固定*/
BODY {
background-image:url(背景圖檔網址);
background-attachment:fixed;
}
/*全板背景*/
div.left {
background: none;
}
div.leftOut1{
background: none;
}
div.leftOut2{
background: none;
}
div.leftDown {
background: none;
}
div.right {
background: none;
}
{
background: none;
}
div.rightDown {
background: none;
}
div.container {
background: none;
}
div.main {
background: none;
}
div.mainOut {
background: none;
}
div.footer {
background: none;
}
全板背景相關交學

/*----整體文字----*/
/*還未造訪連結狀態*/
TD{
color:#303030;
font-size:13px;
line-height:110%;
font-family:"Arial";
word-break: break-all;
word-wrap:break-word;
}
A:link{
color:#303030;
text-decoration:none;
}

/*造訪過後連結狀態*/
A:visited{
color:#A5873C;
text-decoration:none;
}

/*滑鼠移入連結狀態*/
A:hover{
color:#A51E00;
text-decoration:none;
}

/*特殊連結(藍色)及屋主文章留言*/
.extend{
color:#C35A78;
}
.extend a:link,.extend a:visited{
color:#C35A78;
}

/*GP數與驗證碼顏色*/
.extend2{
color:#C35A78;
}
.extend2 a:link,.extend2 a:visited{
color:#C35A78;
}

/*灰色－備註與說明文字*/
.extend3{
color:#8E8E8E;
}
.extend3 a:link,.extend3 a:visited{
color:#8E8E8E;
}

/*----其他共用部分----*/
/*虛線*/
.line{
border-bottom:1px dashed #969696;
}

/*實線*/
.line2{
border-top:1px solid #D9ECF0;
}

/*文章或畫作的縮圖邊框*/
.article_pic{
border-left:1px solid #C4C4C4;
border-right:3px solid #C4C4C4;
border-top:1px solid #C4C4C4;
border-bottom:3px solid #C4C4C4;
}

/*input實線(只用於引用文章網址處)*/
.home_input1{
color:#999999;
border:1px solid #EFEFEF;
background-color:#FFF;
}

/*input實線*/
.home_input2{
color:#464646;
border:1px solid #D5D5D5;
background-color:#FFF;
}

/*--------------------------框架------------------------------*/
/*小屋首頁－勇者資料區背景色*/
.infom_bk{
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
padding-top:10px;
background:#FFFFFF
}

/*----外部大框架設定----*/
/*部落閣最新文章使用*/
.category_title{
background:url(部落閣最新文章區背景圖網址);
height:50px;
border:1px solid #CCCCCC
}
圖示

/*最新收錄精華使用*/
.category_title2{
background:url(最新收錄精華區背景圖網址);
height:50px;
border:1px solid #CCCCCC
}
圖示

/*部落閣最新文章及最新收錄精華標題文字設定*/
.category_word{
color:#303030;
font-size:16px;
font-weight:bold;
padding-left:325px;
padding-top:0px;
padding-bottom:2px;
}

/*內文的背景色*/
.category_bk{
background:#FFFFFF;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
padding:12px;
}

/*框架結束部分*/
.category_footer{
background:url(框架結束部分背景圖網址);
height:53px;
border-right:1px solid #CCCCCC;border-left:1px solid #CCCCCC;border-
bottom:1px solid #CCCCCC;
}
圖示

/*----表格設定(置於大框架中)----*/
/*表格框線顏色*/
.box1{
border:1px solid #303030;
}

/*表格標題底色*/
.box_title{
background:#FFFFFF;
font-weight:bold;
letter-spacing:2px;
}

/*表格內文底色 1*/
.box_list1{
background-color:#FFFFFF;
}

/*表格內文底色 2*/
.box_list2{
background-color:#FFFFFF;
}

/*三角形箭頭icon*/
.box_icon1{
background-image:url(http://pic.bahamut.com.tw/home/list_icon1.gif)
no-repeat;
}

/*圓形彈珠icon*/
.box_icon2{
background-image:url(http://pic.bahamut.com.tw/home/list_icon2.gif)
no-repeat;
}

/*-----------------------最上方顯示大圖-----------------------*/
/*小屋上方主圖*/
.banner{
background: url() repeat;
height:50px;
padding-left:20px;
padding-top:15px;
}
小屋上方主圖相關教學

/*暱稱和帳號文字*/
.banner_t1{
color:#303030;
font-weight:bold;
}

.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
color:#303030;
font-weight:bold;
text-decoration:inherit;
}

/*碎碎唸文字顏色*/
.banner_t3{
color:#303030;
line-height:18px;
height:42px;
}

/*顯示官階的文字顏色*/
.banner_t4{
color:#008E25;
}

/*顯示稱號的文字顏色*/
.banner_t5{
color:#235BD3;
}

/*---------------------------主選單---------------------------*/
/*選單背景圖*/
.menu{
background:url(選單背景圖網址) no-repeat;
height:35px;
}
圖示

/*----選單所在頁面狀態----*/
.menuIN{
background:url() no-repeat;
font-weight:bold;
color: #0055CB;
height:31px;
line-height: 40px;
text-align: center;
text-decoration: none;
}
.menuIN a:link,.menuIN a:visited{
font-weight:bold;
color:#0055CB;
height:35px;
line-height:31px;
text-align:center;
text-decoration:none;
}

/*----選單非所在頁面狀態----*/
.menuout {
font-weight:bold;
COLOR:#7C7C7C;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}
.menuout a:link,.menuout a:visited {
font-weight:bold;
color:#7C7C7C;
height:31px;
line-height:31px;
text-align:center;
}
.menuout a:hover {
background:url(選單背景圖網址) no-repeat;
font-weight:bold;
color:#0055CB; height:px;
line-height:35px;
text-align:center;
text-decoration: none;
DISPLAY: block;
}
圖示

/*---------------------------次選單---------------------------*/
/*----無次選單狀態----*/
/*次選單與主選單連接部分*/
.menubarA1{
background:url();
border-left:0px solid #CCCCCC;
border-right:0px solid #CCCCCC;
border-top:0px;
border-bottom:0px solid #CCCCCC;
}

/*次選單結束部分*/
.menubarA2{
background:url();
border-left:0px solid #CCCCCC;
border-right:0px solid #CCCCCC;
border-top:0px;
border-bottom:0px;
}

/*----有次選單狀態----*/
/*次選單與主選單連接部分*/
.menubarB1{
background:#AFE8F0;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:0px;
}

/*放次選單按鈕的背景色*/
.menubarB3{
background:#D8F1F4;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:1px solid #5CBAC8;
padding:6px;
text-align:left;
}

/*次選單結束部分*/
.menubarB2{
background:#EBEBEB;
}

/*----------------------------小屋封面圖------------------------------*/
/*COVER圖(就是勇造右邊那張大圖)*/
.cover_pic{
background:url(COVER圖網址) repeat;
}

/*--------------------勇者基本資訊和能力表--------------------*/
/*給紅心的敘述文字*/
.heartGP{
color:#303030;
}

/*評價區底色*/
.apprise_bg{
background-color:#FFFFFF;
}

/*顯示個人能力數值的底圖*/
.ability {
background-color:#FFF;
BORDER-RIGHT:#969696 2px solid;
BORDER-TOP:#bfbfbf 1px solid;
BORDER-LEFT:#bfbfbf 1px solid;
BORDER-BOTTOM:#969696 2px solid;
PADDING-RIGHT:4px;
PADDING-LEFT:4px;
PADDING-BOTTOM:1px;
PADDING-TOP:1px;
LINE-HEIGHT:14px;
HEIGHT:0pt;
TEXT-ALIGN:center;
TEXT-DECORATION:none;
}

/*---------------------各文章列表區(下方)---------------------*/
/*----個人部落閣----*/
/*個人部落閣文章標題顏色*/
.article_t1{
color:#C35A78;
font-weight:bold;
}
.article_t1 a:link, .article_t1 a:visited{
color:#C35A78;
font-weight:bold;
}

/*個人部落閣最新文章及GP值底色*/
.articlebox{
border:1px solid #303030;
background:url(個人部落閣最新文章及GP值底色圖網址);
background-position:right;
background-repeat:no-repeat;
padding:20px;
height:30px;
width:720;
}
個人部落閣最新文章及GP值底色相關教學

/*部落閣巴哈logo*/
.article_pic{
border:none;
height: 0px;
width: 0px;
}
把部落閣最新文章的巴哈logo圖變不見
不想把LOGO變不見。可以不用放進CSS語法裡。

/*個人部落閣文章版主回應分色線*/
.article_hr{
border:none;
background-color:#D9ECF0;
height:1px;
color:#D9ECF0;
}

/*----個人精華區----*/
/*個人精華文章標題顏色*/
.elite{
color:#0055CB;
font-size:15px;
font-weight:bold;
}
.elite a:link, .elite a:visited{
color:#0055CB;
font-size:15px;
font-weight:bold;
}

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

LINE 分享

留言

2007-10-01 19:34小四生：
厲害ㄋ
2007-10-01 20:13米兒軒絲：
好可愛呢 Q"Q

薔薇一定整理很久哦？
2007-10-01 23:35武藤奈奈：
小屋設定完整公開教學呢
整理辛苦了，這樣又有更深一層的設計小屋方法
2007-10-02 02:00魅月娃：
真是辛苦您了!!!
不過也超感謝你無私的分享耶~~~
我也要好好的來給我的小屋變身~^^

謝謝尼~~~
2007-10-02 09:30Zacks：
好可愛
2007-10-02 11:49威廉：
這麼完整的教學還是第一次見到
這一定要推啦!!
這段時間辛苦了
2007-10-02 11:54昨日夢醒今日醉：
大人這篇我要收藏，回家研究~推
2007-10-02 12:21MOMO姐姐：
薔薇 ~太棒了啦~~~你這篇語法讓我寫信給你的那些問題解決了~~~三q嘍
2007-10-02 14:44不想說：
很實用，謝謝
2007-10-03 02:07遺忘：
圖文並貌寫很久才有這篇文章的出現，感謝夏大無私的分享...現在都懶的改了說qq"..
2007-10-03 09:46MOMO姐姐：
夏日是我的老師@@
2007-10-03 21:57　夏の空色°　：
謝謝妳~這都是很實用的語法 ^____^
2007-10-04 19:15赫斯蒂亞：
這這這...怎麼能不推???
2007-10-05 13:09斑鳩：
只能說
你真的有在用功
給你鼓勵
加油
不能氣餒
不清楚妳是不是遇到小白
但是還很多人支持你阿
2007-10-10 19:05Naki：
很棒的教學！！
2007-10-19 23:56卡拉崩嘎：
真是太感人了XD
2007-10-22 12:31夏日薔薇：沒那麼誇張吧-.-"
2007-10-20 22:20屁穎：
好文:D
2007-10-23 20:10狼喚夜：
好文!!!!!(偷偷加收藏XD!!)
2007-10-24 14:41JokerMouth：
造福大眾!!
2007-11-04 11:58°蹦★小喳﹑：
謝謝你嘎，

我也會努力變好的嘎 !! :D
2007-11-10 18:10ファントム：
太棒了
2007-11-10 20:34暫時關閉：
我太笨...
都看不懂= ="
2007-11-12 02:41samlikem：
請問，我不能改游標....

哪裡出錯了。

還有阿，

下面還有一個三角型箭頭那邊要改嗎。
2007-11-12 17:08夏日薔薇：/*游標*/
BODY {
cursor:url(游標檔圖片檔網址1)};
a:hover {
cursor:url(游標檔圖片檔網址2)};
註:
body裡面放游標代表著一般時候的游標
hover裡面放游標代表當滑鼠移到超連結時候的游標
CSS的游標得用cur檔(靜態游標)、ani檔(動態游標)或ico檔，不支援gif、bmp、jpg檔案
語法都正常可是一樣無法顯示出來就要檢察一下游標連結是不是有問題
2007-11-25 20:54極地熊熊：
妳好棒喔0.0
我剛好不會用小屋= =
這篇文章我就收下了
2007-11-27 21:17靈兒。：
哇~~妳好用心哦^^~
雖然我還不太會用..但我會努力的.
2007-11-28 19:59趙靈兒：
好棒的文章唷!!

我會好好收藏的QQ
2007-12-17 09:21混沌的六翼天使：
感謝你的教學!
2007-12-22 03:25齊木黑昀☆QMA★：
我的小屋有得忙了= =
2007-12-23 00:42冰鋒：
請問怎麼把個人相關資訊、部落格最新文章、最新收錄精華區、好友創作紀錄等的背景色弄成透明?
2007-12-23 15:35夏日薔薇：把那幾區的語法裡面的background:後面的顏色或網址通通拿掉
像這樣=>background:;
2007-12-24 20:29我看到了什麼：
看不到大大的圖．．
2008-01-02 14:52油蒟蒻：
3Q3Q 幫了好大的忙!
2008-01-02 14:55油蒟蒻：
薔薇3Q~ 多虧了薔薇的各種講解我的小屋終於不再是那麼單調了,不過還是有一個疑問,不知道是我漏看還是薔薇還沒把這方面的解說擺上來,我看薔薇的小屋勇者旁邊那張圖,會動耶! 看了好心動,不知道薔薇能不能教我怎麼處理才能變那樣,拜託哩~.
2008-01-04 14:06夏日薔薇：請看gif教學
雖然裡面的圖檔被吃掉了= =
有空再把它們補回去
2008-01-08 23:00＊粉檸×櫻〃：
為什麼他會一直說，格式錯誤啊！！

/*背景固定*/
BODY {
background-image:url(背景圖檔網址);
background-attachment:fixed;
}

我將網址貼上去了，可是他一直說格式錯誤…　（？）
2008-01-09 01:26＊粉檸×櫻〃：
我剛的發問，我會用了，但是又有了一個新問題。

那就是，我更改成功了，可是沒有圖出現呢…
2008-01-14 18:50夏日薔薇：解決了= =?
2008-01-12 11:09微微地：
請問一下!!
小屋"底部"中央那塊"白色"的大區塊(小屋原設定正中央那一大塊白色區..)
該怎樣改顏色阿?或是改底圖or透明化
不知道這樣問看不看的懂@@"..不知道那個該叫什麼
2008-01-14 18:49夏日薔薇：看不懂你說的是那一區-.-
2008-01-29 11:38夏侯嵐.沛國：
圖片都失連了~"~
2008-02-11 17:50Qwest：
感謝教學= )
2008-07-10 09:46小桔：
謝謝教學
2008-07-10 09:46小桔：
推
2008-08-30 20:59綠芙＊碧藍自耕農：
好文當然要收藏~
2009-06-22 23:56糖果無敵：
感謝教學！受益良多~

小屋創作

日誌2007-10-01 19:26
CSS-我的小屋CSS

相關創作

CSS自定板面-板面特效

巴哈勇者小屋秋之精靈素材包

CSS-勇者小屋重置

留言

日誌2007-10-01 19:26CSS-我的小屋CSS

相關創作

CSS自定板面-板面特效

巴哈勇者小屋秋之精靈素材包

CSS-勇者小屋重置

留言

日誌2007-10-01 19:26
CSS-我的小屋CSS