自製小屋伊布佈景

 

今天我太閒...做了一件平時都不會做的事......那就是自己製作小屋的CSS版面(就是現在這個)!

 

我一開始是什麼都不會，什麼程式碼、語言我都看不懂。

 

於是我就自己慢慢的試，試了將近3個小時才全部大功告成!(感動)

 

我將程式碼貼在樓下，要的可以自己拿走，反正我也是拿別人來改的(咦?)

 

-------------------------------------------------(分格線)-----------------------------------------------------------

 

/*--------------------------整體頁面設定--------------------------*/

/*留言和回應區插圖*/
textarea {
background:url(https://truth.bahamut.com.tw/s01/201004/efa49ec073f9d3c256ba5481b5f3874c.JPG)  no-repeat;
background-repeat:repeat;
background-position:center;
FILTER: Alpha(opacity=100);
padding-left:10px;
padding-right:10px;
height:390px;
}

/*-----背景-----*/
body{background: url(https://truth.bahamut.com.tw/s01/201004/742a08f48e63c5268e7fe30a0e4199c1.JPG) no-repeat 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;
border: solid darkblue 0px;}--------------
/*不想用^^*/
/*游標平常*/
/*cursor:url(http://210.70.242.14/~s511039/images/yw/1.ani)};*/
/*游標連結*/
/*a:hover {*/
/*cursor:url(http://210.70.242.14/~s511039/images/yw/2.ani)};*/

 

/*-----小屋區表單背景設定----*/
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;}

 

/*右下方圖片(160x40)*/
.post_title {
background-image:url(https://truth.bahamut.com.tw/s01/201004/03bbcc7d4b1e8cbdced1d579b4c156d0.JPG)  no-repeat;

}

/*----整體文字----*/
TD{
color:#0505f5;
font-size:13px;
line-height:150%;
font-family:"Arial";
word-break: break-all;
word-wrap:break-word;
}
A:link{
color:#ff4040;
text-decoration:none;
}/*還未造訪連結狀態*/
A:visited{
color:#ff4040;
text-decoration:none;
}/*造訪過後連結狀態*/
A:hover{
color:#ff4040;
text-decoration: underline;
}/*滑鼠移入連結狀態*/
.extend{
color:#ff4040;
}
.extend a:link,.extend a:visited{
color:#ff4040;
}/*特殊連結(藍色)及屋主文章留言*/
.extend2{
color:#ff4040;
}
.extend2 a:link,.extend2 a:visited{
color:#ff4040;
}/*GP數與驗證碼顏色*/
.extend3{
color:#ff4040;
}
.extend3 a:link,.extend3 a:visited{
color:#ff4040;
}/*灰色－備註與說明文字*/
/*----其他共用部分----*/
.line{
border-bottom:1px dashed :#C90216;
}/*虛線*/
.line2{
border-top:1px solid: #C90216;
}/*實線*/
.article_pic{
border-left:1px solid: #C90216;
border-right:3px solid: #C90216;
border-top:1px solid :#C90216;
border-bottom:0px solid: #C90216;
border:none;
height: 0px;
width: 0px;
}/*文章或畫作的縮圖邊框*/
.home_input1{
color:#ff4040;
border:1px solid :#ff4040;
background-color:transparent;
}/*input實線(只用於引用文章網址處)*/
.home_input2{
color:#ff4040;
border:1px solid :#C90216;
background-color:transparent;
}/*input實線*/
/*--------------------------框架------------------------------*/
.infom_bk{
border-left:1px solid :#C90216;
border-right:1px solid :#C90216;
padding-top:10px;
background:transparent;
}/*小屋首頁－勇者資料區背景色*/
/*----外部大框架設定----*/
.category_title{
background:transparent;
height:40px;
border:1px solid: #C90216;
}/*主標題一使用*/
.category_title2{
background:transparent;
height:40px;
border:1px solid :#C90216;
}/*主標題二以下使用*/
.category_word{
color:#ff4040;
font-size:15px;
font-weight:bold;
padding-left:340px;
padding-top:0px;
padding-bottom:2px;
}/*主標題文字設定*/
.category_bk{
background:transparent;
border-left:1px solid: #C90216;
border-right:1px solid :#C90216;
padding:12px;
}/*內文的背景色*/
.category_footer{
background:transparent;
height:25px;
border-right:1px solid: #C90216;
border-left:1px solid noneborder-bottom:1px solid none
}/*框架結束部分*/
/*----表格設定(置於大框架中)----*/
.box1{
border:1px solid: #C90216;
}/*表格框線顏色*/
.box_title{
background:transparent;
font-weight:bold;
letter-spacing:2px;
}/*表格標題底色*/
.box_list1{
background-color:transparent;
}/*表格內文底色 1*/
.box_list2{
background-color:transparent;
}/*表格內文底色 2*/
.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{
background: url(https://truth.bahamut.com.tw/s01/201004/8661b268724237b67425ad238279b87f.JPG)  no-repeat;
height:500px;
padding-left:40px;
padding-top:40px;
}/*小屋上方主圖*/
.banner_t1{
color:#3838ff;
font-weight:bold;
}
.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
color:#ff4040;
font-weight:bold;
text-decoration:inherit;
}/*暱稱和帳號文字*/
.banner_t3{
color:#3838ff;
line-height:18px;
height:42px;
}/*碎碎唸文字顏色*/
.banner_t4{
color:#3838ff;
}/*顯示官階的文字顏色*/
.banner_t5{
color:#ff4040;
}/*顯示稱號的文字顏色*/

 

/*---------------------------主選單---------------------------*/
.menu{
background:transparent;
height:35px;
}/*選單背景圖*/

 

/*----選單所在頁面狀態----*/
.menuIN{
background:transparent;
font-weight:bold;
color: #3838ff;
height:35px;
line-height: 35px;
text-align: center;
text-decoration: none;
}
.menuIN a:link,.menuIN a:visited{
font-weight:bold;
color:#3838ff;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}

 

/*----選單非所在頁面狀態----*/
.menuout {
font-weight:bold;
COLOR:#ff4040;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}
.menuout a:link,.menuout a:visited {
font-weight:bold;
color:#ff4040;
height:35px;
line-height:35px;
text-align:center;
}
.menuout a:hover {
background:transparent;
font-weight:bold;
color:#ff4040;
height:35px;
line-height:35px;
text-align:center;
text-decoration: none;
DISPLAY: block;
}

 

/*---------------------------次選單---------------------------*/
/*----無次選單狀態----*/
.menubarA1{
background:#C90216;
border-left:1px solid :#C90216;
border-right:1px solid :#C90216;
border-top:0px;
border-bottom:1px solid :#C90216;
}/*次選單與主選單連接部分*/
.menubarA2{
background:transparent;
border-left:1px solid :#C90216;
border-right:1px solid :#C90216;
border-top:0px;
border-bottom:0px;
}/*次選單結束部分*/

 

/*----有次選單狀態----*/
.menubarB1{
background:transparent;
border-left:1px solid :#C90216;
border-right:1px solid :#C90216;
border-top:0px;
border-bottom:0px;
}/*次選單與主選單連接部分*/
.menubarB3{
background:transparent;
border-left:1px solid :#C90216;
border-right:1px solid :#C90216;
border-top:0px;
border-bottom:1px solid :#C90216;
padding:6px;
text-align:left;
}/*放次選單按鈕的背景色*/
.menubarB2{
background:transparent;
}/*次選單結束部分*/

 

/*----------------------------小屋封面圖------------------------------*/
.cover_pic{
background:url(https://truth.bahamut.com.tw/s01/201004/a4ac43e298ca5011989fb55dc511fb7f.JPG) repeat;
height:350px;
padding-left:40px;
padding-top:40px;

}/*COVER圖*/

 

/*--------------------勇者基本資訊和能力表--------------------*/
.heartGP{
color:#C90216;
}/*給紅心的敘述文字*/
.apprise_bg{
background:url(https://truth.bahamut.com.tw/s01/201004/ddc91645966e6053532af5225919c539.JPG);
filter:alpha(opacity=70);
width:100%;
height:115px;
}*評價區底色*/
.ability {
background-color:transparent;
BORDER-RIGHT:transparent; 2px solid;
BORDER-TOP:transparent; 1px solid;
BORDER-LEFT:transparent; 1px solid;
BORDER-BOTTOM:transparent; 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:#ff0000;
font-weight:bold;
}
.article_t1 a:link, .article_t1 a:visited{
color:#ff0000;
font-weight:bold;
}/*個人部落閣文章標題顏色*/
.articlebox{
border:1px dashed: #ff4040;
background:url(https://truth.bahamut.com.tw/s01/201004/67313dec383e76f61df95ae3dabd6d64.JPG) no-repeat;
background-position:left;
text-align:center;
height:100px;
width:720px;/*這一行的意思是強制寬度變成720px(寬度可以自訂)*/
/*width:100%;*/
}/*個人部落閣最新文章及GP值底色*/
.article_hr{
border:none;
background-color:#007fff;
height:1px;
color:#007fff;
}/*個人部落閣文章版主回應分色線*/

 

/*----個人精華區----*/
.elite{
color:#ff4040;
font-size:15px;
font-weight:bold;
}
.elite a:link, .elite a:visited{
color:#007fff;
font-size:15px;
font-weight:bold;
}/*個人精華文章標題顏色*/
.elite_ppl{
color:#007fff;
font-weight:bold;
font-size:12px;
border:1px solid :#C90216;
background-color:transparent;
}/*收藏人數文字顏色和底線框色*/

 

/*----------上方勇者小屋----------*/

 

.wide_password1{color:#ff4040;
}/*這什麼鬼阿*/

 

.wide_password2{color:#ff4040;
}/*ID的字體顏色*/
.wide_line{
border:0px;/*信箱銀行和勇造VIP中間那條線，如果想拿掉的話就用0px，不想拿掉的話可以把這句border:0px拿掉*/
background-color:#ff4040;
background:transparent;
}/*勇造VIP旁邊的箭頭底色*/
.wide_sev{
background-color:#ff4040;
background:transparent;
}/*信箱銀行勇造VIP的底色*/
.wide_sign{color:#ff4040;
/*等級的字體顏色*/
background-color:#ff4040;
background:transparent;
}/*等級的底色*/
.wide_wordbk7{
background-color:#C90216;
padding-bottom:1px;
padding-top:1px;
background-image: url(https://truth.bahamut.com.tw/s01/201004/fd3bd26f3537afa14b154f070d5d62f6.JPG);
filter:alpha(opacity=100);
border:0px solid pink;
}/*剩下的底色*/
.wide_wordbk7 img {visibility:hidden;
}/*左上大頭圖消失*/

/*----------------右下的標題格式-----------------*/

height:40px;/*圖片高度*/
FILTER: Alpha(opacity=50);
background-color: transparent;/*背景透明*/
/*background-image:url(http:/背景圖片/);*/
background-position:center;
COLOR:#0049aa;/*主標題文字顏色*/
PADDING-left:60; /*←文字與左方的距離，請自行調整。*/
PADDING-top :5; /*←文字與上方的距離，請自行調整。*/
}
/*------右下的標題list格式-------(就是白色那一塊)*/
.post_list{
PADDING-left:10px; /*文字與左方的距離*/
PADDING-top :0px; /*文字與上方的距離*/
border-top: 0px solid :#C90216;
border-right:0px solid :#C90216;
border-bottom:0px solid :#C90216;
border-left:0px solid :#C90216;
background-color: transparent;/*背景透明*/
COLOR:#360ff5;/*內容文字顏色*/
list-style:url();/*背景圖片*/
}
/*-----今日訪客等等的灰色外框-----(紅色那一塊)*/
.postbox2{
border:0px dashed: #C90216;/*其實灰色框框外面還有一圈很細的灰色框線，這
讓你改那一條*/
FILTER: Alpha(opacity=65);
background-color: transparent;/*背景透明*/
}
/*-----post_list裡面改不掉的那一圈白色-----(藍色那一塊)*/
.postboxin{
background-color: transparent;/*背景透明*/
}
/*--------------------------上面頭條廣告文字------------------------*/

.hotext{
FONT-SIZE: 10pt; COLOR: #C90216}/*基本文字樣式*/

.keynews a:link{
FONT-SIZE: 10pt; COLOR: #C90216; TEXT-DECORATION: none}/*連結文字樣式*/

.keynews a:visited{
FONT-SIZE: 10pt; COLOR: #C90216; TEXT-DECORATION:none}/*造訪過後的文字樣式*/

.keynews a:hover{
FONT-SIZE: 10pt; COLOR: #C90216; TEXT-DECORATION:underline}/*滑鼠移入的文字樣式*/

/*--------------------------頂端選單文字------------------------*/

.wide_toptext {
FONT-SIZE: 8pt; COLOR: #C90216; TEXT-DECORATION: none
}/*基本文字樣式*/

.wide_toptext A:link{
FONT-SIZE: 8pt; COLOR: #C90216; TEXT-DECORATION: none
}/*連結文字樣式*/

.wide_toptext A:visited{
FONT-SIZE: 8pt; COLOR: #C90216; TEXT-DECORATION: none
}/*造訪過後的文字樣式*/

.wide_toptext A:hover{
FONT-SIZE: 8pt; COLOR: #C90216; TEXT-DECORATION: underline
}/*滑鼠移入的文字樣式*/