K-ON佈景分享＋我流佈景解說

原本想說佈景很久沒換所以做一個新的佈景，結果正好有人在問我佈景怎麼做

所以就順便發個文說明一下好了。

 

下面的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://img685.imageshack.us/img685/7499/kon2.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://i805.photobucket.com/albums/yy337/kac1976/K-ON7.jpg);
background-repeat: no-repeat;
background-position :0% 10%;
height:570px;}

/*小屋首頁－勇者資料區背景色*/
.infom_bk{
background:none;}

/*----------------------------小屋封面圖------------------------------*/
.wide_wordbk7{
background-color:#f50505;
padding-bottom:23px;
padding-top:1px;
background-image: url(http://i805.photobucket.com/albums/yy337/kac1976/K-ON11.jpg);
filter:alpha(opacity=100);
}

.cover_pic{
background:url(http://i805.photobucket.com/albums/yy337/kac1976/K-ON9.jpg) repeat;
}/*COVER圖*/

/*留言和回應區插圖*/
textarea {
background: url(http://img38.imageshack.us/img38/4840/001gpq.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 10px;
padding-right: 10px;
width:760px;/*這一行的意思是強制寬度變成720px(寬度可以自訂)*/
height:570px;
}
background:transparent;
textarea {
background-textarea {
background-color:# xxxxxx;
};
}
body{cursor:url(http://ruby-pink.myweb.hinet.net/ppp/hart01.ani)}/*移到網頁時的滑鼠游標*/
a:hover {cursor:url(http://ruby-pink.myweb.hinet.net/ppp/hart01.ani)}/*移到超連結時的滑鼠游標*/

}/*個人部落閣文章標題顏色*/

.articlebox{
text-align: center;
border:1px solid #B487B4;
background:url();
background-repeat: no-repeat;
background-position: right;
padding-left: 300px;
padding:105px;
height:350px;
width:720px;/*這一行的意思是強制寬度變成720px(寬度可以自訂)*/
.article_hr{
background-image : url(http://myhome.apbb.com.tw/indream228/line_02.gif);
background-position : 50% 50%; /*背景圖片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:785px;}

/*內文的背景*/
.category_bk{
background-color:none;
background-image :url(http://img444.imageshack.us/img444/1171/760x950.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:180px;/*圖片高度*/
background-image:url(http://i805.photobucket.com/albums/yy337/kac1976/K-ON10.jpg);
}

/*=========================框線=============================
　==========================================================*/
.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:#37B7FF;/*全篇顏色種合包刮勇者文字*/
font-size:13px;/*大小*/
line-height:150%;/*行高*/
font-family:"Monotype Corsiva";　/*字型*/
word-break:break-all;word-wrap:break-word;/*換行樣式*/
}
/*有連結-還未造訪*/
A:link{
color:#37B7FF;
text-decoration:none;/*無文字效果*/
}
/*有連結-造訪過後*/
A:visited{
color:#37B7FF;
text-decoration:none;}
/*有連結-滑鼠移入*/
A:hover{
color:#37B7FF;
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:#F88E8D;}
.extend3 a:link,.extend3 a:visited{color:#F88E8D;}

/*勇者資料區─表格標題*/
.box_title{
color:;
font-weight:none;letter-spacing:2px;}

/*右下表單─項目*/
.post_list{
color:#FF1100;
margin: 0px;padding: 0px;text-decoration:none;}
.post_list a,.post_list a:hover{
color:#FF1100;
border-bottom:0px;width: 100%;padding-left: 20px;display: block;}

/*主標題文字設定*/
.category_word{
color:#F88E8D;
font-size:12px;
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:#37B7FF;
font-weight:bold;
text-decoration:inherit;}

}/*暱稱和帳號文字*/
/*碎碎唸文字顏色*/
.banner_t3{
font-size:13px;
color:#37B7FF;
line-height:16px;height:16px;}
/*顯示官階的文字顏色*/
.banner_t4{font-size:11px;color:#000000;}
/*顯示稱號的文字顏色*/
.banner_t5{font-size:11px;color:#FF1100;}

.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;}

 

 

---

其實我的改法很簡單，大都只改圖片而已．．．

---

 

/*小屋橫幅圖設定.最上方大圖*/
.banner{
background-color:#000000;
background-image:url(http://i805.photobucket.com/albums/yy337/kac1976/K-ON7.jpg);
background-repeat: no-repeat;
background-position :0% 10%;
height:570px;}

 

再往下拉可以看到上面這排，（）內是讓人改小屋上面的的那一張大圖

在這長度是固定760，而570px這個數字是讓人改圖片的高度