切換
舊版
前往
大廳
主題

幸運女神佈景分享

想い出して、あの頃... | 2010-06-23 04:09:17 | 巴幣 0 | 人氣 1259

由於之前有人問我幸運女神的佈景怎麼做
所以我就寫了一個教學文
不過那個人好像是希望我直接幫他做...(他力本願是不好的行為)
剛好今天我做了一個新的幸運女神佈景
所以就貼上來跟大家分享一下
至於完成感覺大概像
 



 
這樣
這樣(如要完全呈現請用IE)
 
至於小屋佈景設定方式
如下:
 
進入小屋→個人設定→ 小屋佈景→自訂CSS
 
之後在把下面設定全部貼上就可以了
↓  ↓  ↓  ↓  ↓  ↓  ↓
 
/*歡迎大家使用喔!也歡迎大家修改~*/
/*--------------------------整體頁面設定--------------------------*/
/*游標*/
BODY {
cursor:url(http://hk.geocities.com/sky_85720/s4414.ani)};
a:hover {
cursor:url(http://hk.geocities.com/sky_85720/s4401.ani)};

/*---------網頁主體設定--------*/
/*背景*/
BODY {
background-image:url(http://i654.photobucket.com/albums/uu262/kac1012/2966678538_0bb28bf540_o.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center
background-color:transparent;
/*-----小屋區表單背景設定----*/
div.container {/*上方之下整個頁面區設定*/
background-color: transparent;
}
div.mainOut {
background-color: transparent;
}
div.main {
background-color: transparent;
}
div.left {/*左邊整體設定*/
background-color: transparent;
}
div.leftOut1 {
background-color: transparent;
}
div.leftOut2 {
background-color: transparent;
}
div.right {/*右邊整體設定*/
background-color: transparent;
}
{/*右上廣告區設定*/
background-color: transparent;
}
div.rightDown {/*右下選單資料區設定*/
background-color: transparent;
}
div.footer {/*下面著作權處*/
background-color: transparent;
border-top: transparent;}

/*--卷軸樣式設定--*/
SCROLLBAR-FACE-COLOR:#FEFCFC; /*軸面顏色*/
SCROLLBAR-HIGHLIGHT-COLOR:#EFC1BC; /*軸面三角左邊顏色*/
SCROLLBAR-SHADOW-COLOR:#EFC1BC; /*軸面三角右邊顏色*/

SCROLLBAR-3DLIGHT-COLOR:#FEFCFC; /*左立體邊顏色*/
SCROLLBAR-DARKSHADOW-COLOR:#FEFCFC; /*右立體面顏色*/
   
SCROLLBAR-ARROW-COLOR:#EFC1BC; /*箭頭的顏色*/
SCROLLBAR-TRACK-COLOR:#FEFCFC; /*軸軌的顏色*/
/*--基本游標設定--*/
/*若要使用,將前後的符號刪掉即可*/
/*cursor:url(http://),text;*/
}
 
/*======================背景/圖片設定======================
 【本區包含】
  小屋橫幅、看板圖、勇者資料區、選單、主標題、框架結束處、
  右下表單─標題、資料區、項目符號
 ‧若不使用請用「none」或「transparent」取代「url()」。
 ‧「height」高度,可依喜好修改0~∞,請勿將px刪掉。
 【註】背景色 :background-color:;
    背景圖 :background-image:;
    排列方式:background-repeat:;
    背景效果:background-attachment:;
    對齊位置:background-position :;
 ==========================================================*/
/*小屋橫幅圖設定.最上方大圖*/
.banner{
background-color:#000000;
background-image:url(http://img412.imageshack.us/img412/4533/bkg3.jpg);
background-repeat: no-repeat;
background-position :0% 10%;
height:562px;}
/*小屋首頁-勇者資料區背景色*/
.infom_bk{
background:none;}
/*----------------------------小屋封面圖------------------------------*/
.wide_wordbk7{
background-color:#f50505;
padding-bottom:40px;
padding-top:1px;
background-image: url(http://img257.imageshack.us/img257/5590/belldandy.gif);
filter:alpha(opacity=100);
}
.cover_pic{
background:url(http://img294.imageshack.us/img294/4804/40076418.jpg) repeat;
}/*COVER圖*/

/*留言和回應區插圖*/
textarea {
background: url(http://img42.imageshack.us/img42/2826/23571964.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 10px;
padding-right: 10px;
width:760px;/*這一行的意思是強制寬度變成720px(寬度可以自訂)*/
height:553px;
}

}/*個人部落閣文章標題顏色*/
.articlebox{
text-align: center;
border:1px solid #B487B4;
background:url();
background-repeat: no-repeat;
background-position: right;
padding-left:570px;
padding:105px;
height:570px;
width:720px;/*這一行的意思是強制寬度變成720px(寬度可以自訂)*/
.article_hr{
background-image : url(http://myhome.apbb.com.tw/indream228/line_02.gif);
background-position :100% 100%; /*背景圖片x與y軸的位置*/
background-repeat:repeat-x;
height:10px;border:none;}/*個人部落閣文章版主回應分色線*/

/*主標題一使用*/
.category_title{
background-color:transparent;
background-image : url();
height:157px;}
/*主標題二以下使用*/
.category_title2{
background:none;
height:608px;}
/*內文的背景*/
.category_bk{
background-color:none;
background-image :url(http://img36.imageshack.us/img36/9546/241oy.jpg);
background-repeat:no-repeat;
background-position : 0% 0%;}

/*框架結束部分*/
.category_footer{
background:none;
height:25px;}
/*選單背景圖*/
.menu{
background:000000;
background-repeat: no-repeat;
height:220px;}
/*選單所在頁面*/
.menuIN{
background:#000000;
background-repeat: no-repeat;
height:20px;}
/*選單非所在頁面*/
.menuout {background:none;}
.menuout a:link,.menuout a:visited {color:#8b0000;background:none;}
.menuout a:hover {
background:#000000;
background-repeat: no-repeat;
color:#F33954;
DISPLAY: block;}
/*無次選單狀態─次選單與主選單連接部分*/
.menubarA1{background:none;border:0px solid #CCCCCC;}
/*無次選單狀態─次選單結束部分*/
.menubarA2{background:none;border:0px solid #CCCCCC;}
/*有次選單狀態─次選單與主選單連接部分*/
.menubarB1{background:none;border:0px solid #CCCCCC;}
/*有次選單狀態─放次選單按鈕的背景色*/
.menubarB3{background:none;}
/*有次選單狀態─次選單結束部分*/
.menubarB2{background:none;}
/*右下表單─標題格式*/
.post_title {
background-color:none;
background-image : url();
background-repeat:no-repeat;
background-position : 0% 50%; /*背景圖片x與y軸的位置*/
height:60px;
background-repeat: no-repeat;}
/*右下表單─資料區*/
.postboxin {
background:none;
background-repeat: no-repeat;}
.postbox2 {
background:none;
background-repeat: no-repeat;}
/*右下表單─項目符號*/
.post_list a,.post_list a:hover{
background:none;
background-position : 50% 50%; /*背景圖片x與y軸的位置*/
background-repeat: no-repeat;}
/*------右下的標題格式-------*/
.post_title {
height:125px;/*圖片高度*/
background-image:url(http://img257.imageshack.us/img257/5590/belldandy.gif);
}

/*=========================框線=============================
 ==========================================================*/
.line{background-color:none;
background-image : url();
background-repeat:repeat-x;
background-position : 50% 100%; /*背景圖片x與y軸的位置*/
height:55px;
border-bottom:0px dashed #9790D4;}/*虛線*/
.line2{background-color:none;
background-image : url();
background-repeat:repeat-x;
background-position : 50% 100%; /*背景圖片x與y軸的位置*/
height:55px;
border-top:0px solid #D9ECF0;}/*實線*/
/*文章或畫作的縮圖邊框*/
.article_pic{
border:none;
height: 0px;
width: 0px;
}
/*引用文章網址欄位*/
.home_input1{color:#999999;border:1px solid #EFEFEF;background-color:transparent;}
/*搜尋、留言欄位*/
.home_input2{color:#ffffff;border:1px solid #FFFFFF;background-color:transparent;}
/*小屋首頁-勇者資料區*/
.infom_bk{border:0px solid #F88E8D;padding-top:10px;}
/*內文的背景色*/
.category_bk{border:1px solid #FBAEA9;padding:12px;}
/*表格框線顏色*/
.box1{border:1px solid none;}
/*表格標題,影響非正在瀏覽的留言區標題框線*/
.box_title{border:0px solid none;}
/*選單*/
.menu{border:1px solid #FBAEA9;}
.menuIN{border-width:0px 0px 0px 0px;
border-style :solid;}
.menubarA1{border:0px solid #CCCCCC;}
.menubarA2{border:0px solid #CCCCCC;}
.menubarB1{
border-width:0px 1px 0px 1px;
border-color:none;
border-style :solid;}
.menubarB3{
border-width:0px 1px 1px 1px;
border-color:none;
border-style :solid;
padding:6px;text-align:left;}
/*=======================連結/文字=========================
 ==========================================================*/
/*無連結*/
TD{
color:#000000;/*全篇顏色種合包刮勇者文字*/
font-size:13px;/*大小*/
line-height:150%;/*行高*/
font-family:"Monotype Corsiva"; /*字型*/
word-break:break-all;word-wrap:break-word;/*換行樣式*/
}
/*有連結-還未造訪*/
A:link{
color:#682C98;
text-decoration:none;/*無文字效果*/
}
/*有連結-造訪過後*/
A:visited{
color:#682C98;
text-decoration:none;}
/*有連結-滑鼠移入*/
A:hover{
color:#000000;
text-decoration: underline;/*底線*/
}
/*特殊連結(藍色)及屋主文章留言*/
.extend{color:#F0586A;}
.extend a:link,.extend a:visited{color:none;}
/*GP數與驗證碼顏色、「本文引用自此」*/
.extend2{color:#F88E8D;}
.extend2 a:link,.extend2 a:visited{color:#F88E8D;}
/*備註與說明文字*/
.extend3{color:#FF1100;}
.extend3 a:link,.extend3 a:visited{color:#F88E8D;}
/*勇者資料區─表格標題*/
.box_title{
color:;
font-weight:none;letter-spacing:2px;}
/*右下表單─項目*/
.post_list{
color:#00064F;
margin: 0px;padding: 0px;text-decoration:none;}
.post_list a,.post_list a:hover{
color:#8E8E8E;
border-bottom:0px;width: 100%;padding-left: 20px;display: block;}
/*主標題文字設定*/
.category_word{
color:#006BD4;
font-size:15px;
font-weight:bold;
text-align:center;
padding-left:px;padding-top:0px;padding-bottom:2px;}
/*暱稱和帳號文字*/
.banner_t1{
font-size:12px;
color:#F33954;
font-weight:bold;}
.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
font-size:13px;
color:#F33954;
font-weight:bold;
text-decoration:inherit;}
}/*暱稱和帳號文字*/
/*碎碎唸文字顏色*/
.banner_t3{
font-size:13px;
color:#F33954;
line-height:16px;height:16px;}
/*顯示官階的文字顏色*/
.banner_t4{font-size:11px;color:#000000;}
/*顯示稱號的文字顏色*/
.banner_t5{font-size:11px;color:#000000;}
.menu{height:20px;}
.menuIN{
color: #F88E8D;
font-weight:bold;
height:20px;
line-height: 20px;
text-align: center;
text-decoration: none;}
.menuIN a:link,.menuIN a:visited{
color:#F88E8D;
font-weight:bold;
height:20px;
line-height:20px;
text-align:center;
text-decoration:none;}
.menuout {
font-weight:bold;
COLOR:#F88E8D;
height:20px;
line-height:20px;
text-align:center;
text-decoration:none;}
.menuout a:link,.menuout a:visited {
font-weight:bold;
color:#F88E8D;
height:20px;
line-height:20px;
text-align:center;}
.menuout a:hover {
font-weight:bold;
color:#F88E8D;
height:20px;
line-height:20px;
text-align:center;text-decoration: none;DISPLAY: block;}

/*==========================================================
            其他細部設定
 ==========================================================*/
/*--------------------勇者基本資訊和能力表--------------------*/
.heartGP{color:none;}/*給紅心的敘述文字*/
.apprise_bg{background:none;}/*評價區底色*/
.ability {background-color:#ff9999;
border-width:1px 2px 2px 1px;
border-color:#bfbfbf #969696 #969696 #bfbfbf;
border-style: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:##F33954;font-weight:bold;}
.article_t1 a:link, .article_t1 a:visited{color:#F88E8D;font-weight:bold;}

/*----個人精華區----*/
.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:#F33954;font-weight:bold;font-size:12px;border:1px solid none;background-color:none;}/*收藏人數文字顏色和底線框色*/
/*==========================================================
 ==========================================================*/
/*----------頁面表單設定----------*/
div.left {background: none;}
div.leftOut1{background: none;}
div.leftOut2{background: none;}
div.leftDown {background: none;}
div.right {background: none;}
div.rightDown {background: none;}
div.container {background: none;}
div.main {background: none;}
div.mainOut {background: none;}
div.footer {background: none;}
/*---------------------------------*/
.post_list{background:none;}
.post_list ul{list-style-type: none;margin: 0px;padding: 0px;text-decoration:none;}
.postbox2 {border:0px;}
.postbox2 img{display:none;}
.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;}/*圓形彈珠icon*/
/*-----------------------最上方顯示大圖-----------------------*/
.banner{padding-left:70px;padding-top:50px;}/*內文與邊界設定*/
/*------------------------預設按鈕設定------------------------*/
/*--按鈕基本呈現--*/
.button2,.button3,.button4,.button_h1,.button_h2{
font-family:"Book Antiqua,Arial";
font-size:12px;
color:#F33954;
height:19px;weight:100px;
background-color:transparent;
background-image :url();
background-repeat:no-repeat;
background-position : 10% 100%; /*背景圖片x與y軸的位置*/
border:0px #f09199 solid;}
/*--「+收藏」--*/
/*文字顏色*/
.button_c1{color:#F33954;}
/*按扭去圖*/
.button_c1 img{display:none;}
.button2 img{display:none;}
.button3 img{display:none;}
/*--造訪按鈕樣式--*/
.button2:hover,.button3:hover,.button4:hover{
color:#f09199;
font-family:"Book Antiqua,Arial";
font-size:12px;
height:20px;weight:100px;
background-color:transparent;
background-image :url();
background-repeat:no-repeat;
background-position : 10% 100%; /*背景圖片x與y軸的位置*/
border:0px #f09199 solid;}
/*---------------------------頁數按鈕設定-------------------------*/
/*無連結時的頁數按鈕設定*/
.p_nolink{background :#fdeff2;color:#CCC;border:1px #f09199 solid;}
/*所在頁數按鈕設定*/
.p_nextprev{background :#fdeff2;color:#CCC;border:1px #f09199 solid;}
/*非所在頁數按鈕設定*/
.pag{background :#fdeff2;color:#fdeff2;border:1px #fdeff2 solid;}
/*滑鼠拜訪頁數按鈕設定*/
.pag:hover{background :#fdeff2;color:#f09199;border:1px #f09199 solid;}

創作回應

冒昧請教
個人將CSS複製至指定區塊後
案確地送出
但之後的小屋布景並沒有如預期變更
仍維持之前的布景
不過預覽時卻是顯示OK的
想請教這是站方更新時間的問題嗎?
2010-06-30 03:07:14
想い出して、あの頃...
完成之後你要按Ctrl+F5才會更新
2010-06-30 03:23:28
貓貓風 ฅ●ω●ฅ
感謝分享

好漂亮的佈景^^
2010-06-30 10:12:55
想い出して、あの頃...
不用客氣XD
2010-06-30 10:26:34
風羨
好厲害~佈景很漂亮




雖然最後被小愛萌到了(掩面
2010-07-01 07:29:07
想い出して、あの頃...
其實我也認為小愛的佈景做的比較好(喂)
2010-07-01 10:43:54
ズシ
好棒棒
2010-07-17 02:17:54
想い出して、あの頃...
= =|||
2010-07-21 02:05:59
電玩假面
我已經懶的不想再去變動小屋了
2010-07-17 08:04:26
想い出して、あの頃...
這篇是因為有人問我
我才發的...
2010-07-21 02:06:59

更多創作