【小屋】CSS自訂版面：進階─方便套用的語法整理ＴＥＳＴ２

　　換個方式整理，不知道習慣否？

　　有些可以放圖片的地方，我沒把ＵＲＬ（）用ＮＯＮＥ取代，

　　因此，如果套用時系統跳出語法錯誤的警告時，

　　不要忘記用ＣＴＲＬ＋Ｆ搜尋「 url(http://) 」修改過後再送出呢ＸＤ。

　　已將中間背景設成透明，關掉網頁右下的小球球……請複製「/*」以下的全部內容。


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■◇
■本整理分類：（可善用ＣＴＲＬ＋Ｆ搜尋關鍵字）　　　　　　　　　　　　　　■
■├各區共用┬基本┬主體背景：中間背景，網頁背景。　　　　　　　　　　　　■
■│　　　　│　　└主體前景：基本文字、連結，按鈕，欄位（輸入欄），分隔線■
■│　　　　│　　　　　　　　。　　　　　　　　　　　　　　　　　　　　　■
■│　　　　├上方：廣告文字，下拉式選單，勇者小屋。　　　　　　　　　　　■
■│　　　　│　　（拆屋頂語法不便公開，因此無整理於此。）　　　　　　　　■
■│　　　　│　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　■
■│　　　　├左下┬橫　幅：背景圖，帳號暱稱，碎碎念，稱號，訂閱小屋。　　■
■│　　　　│　　├主表格：主標題背景、文字，內文，框架結束處。　　　　　■
■│　　　　│　　└選　單：主選單，次選單，次選單與主選單連接。　　　　　■
■│　　　　│　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　■
■│　　　　└右下：月曆文字，表單標題，表單內容，表單項目連結。　　　　　■
■│　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　■
■├小屋　首頁：勇者資料區，部落閣最新文章欄位。　　　　　　　　　　　　　■
■├個人部落閣：文章標題有無連結，文章內容預設字型，相關文章欄位。　　　　■
■├個人精華區：文章標題顏色，收藏人數文字顏色和底線框色，標籤使用熱門度。■
■└其他　保留：用途不明，補充說明。　　　　　　　　　　　　　　　　　　　■
◇■■■■■■■■■■■■■■■◆整理：如語娃娃（ｉｎｄｒｅａｍ２２８）◆■*/


/*────────────────各區共用─────────────────*/
/*===========================　主體背景　============================*/
/*===================================================================*/
/*主體背景─次背景*/
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-color :transparent;}
div.main {background: none;}
div.mainOut {background: none;}
div.mainOut img{visibility:visible;}
div.footer {background: none;}

/*網頁下方─不知所以的圓圈圈*/
div.footer table {visibility:hidden;}
.footer .ssize {visibility:visible;}

/*主體背景─主背景*/
body{
/*--設定網頁外框--*/
border: 0px solid #000000;
/*---主背景設定---*/
background-color :#4984B5; /*背景底色*/
background-image : url(http://); /*背景圖片網址*/
background-position :50% 0%;
background-repeat:no-repeat; /*背景圖片不重複排列*/
background-attachment: fixed; /*背景圖片固定*/
/*--卷軸樣式設定--*/
SCROLLBAR-FACE-COLOR:# ; /*軸面顏色*/
SCROLLBAR-HIGHLIGHT-COLOR:# ; /*軸面三角左邊顏色*/
SCROLLBAR-SHADOW-COLOR:# ; /*軸面三角右邊顏色*/
SCROLLBAR-3DLIGHT-COLOR:# ; /*左立體邊顏色*/
SCROLLBAR-DARKSHADOW-COLOR:# ; /*右立體面顏色*/
SCROLLBAR-ARROW-COLOR:# ; /*箭頭的顏色*/
SCROLLBAR-TRACK-COLOR:# ; /*軸軌的顏色*/
/*--基本游標設定。若要使用，將前後的符號刪掉即可--*/
/*cursor:url(http://);*/
/*--基本項目符號設定--*/
/*list-style:url(http://);*/
}

/*===========================　主體前景　============================*/
/*===================================================================*/
/*無連結─整體文字*/
TD{
color:#464646;
font-size:13px;
line-height:150%;
font-family:"Arial";
word-break: break-all;
word-wrap:break-word;}
/*有連結─整體未造訪連結*/
A:link{
color:#464646;
text-decoration:none;}
/*有連結─整體造訪中連結*/
A:hover{
color:#0064AF;
text-decoration: underline;}
/*有連結─整體已造訪連結*/
A:visited{
color:#464646;
text-decoration:none;}

/*無連結─特殊連結(藍色)及屋主文章留言*/
.extend{
color:#326ADA;}
/*有連結─好友最新文章列表─文章標題、個人最新收錄精華連結*/
.extend a:link,.extend a:visited{
color:#326ADA;}
/*無連結─GP數與驗證碼顏色*/
.extend2{
color:#FF0000;}
/*有連結─部落閣文章「本文引用至此」的連結*/
.extend2 a:link,.extend2 a:visited{
color:#FF0000;}
/*灰色－備註與說明文字*/
.extend3{
color:#8E8E8E;}
.extend3 a:link,.extend3 a:visited{
color:#8E8E8E;}

/*按鈕─去圖*/
.button_c1 img{display:none;}
.button2 img{display:none;}
.button3 img{display:none;}
/*按鈕─無連結*/
.button2,.button3,.button4,.button_h1,.button_h2{
font-family:"Book Antiqua,Arial";
font-size:12px;
color: #85abdd;
height:19px;
background-color:transparent;
border:0px #f09199 solid;}
/*按鈕─造訪時*/
.button2:hover,.button3:hover,.button4:hover{
color:#85abdd;
font-size:12px;
height:20px;
background-color:transparent;
border:0px #f09199 solid;}
/*按鈕─「+」收藏*/
.button_c1{color:#85abdd;}

/*欄位─引用文章網址*/
.home_input1{
color:#999999;
border:1px solid #EFEFEF;
background-color:#FFF;}
/*欄位─文字輸入欄位*/
.home_input2{
color:#464646;
border:1px solid #D5D5D5;
background-color:#FFF;}
/*欄位─文字輸入欄位。外加版本，要使用的話刪掉前後符號。*/
/*textarea {
background-color: transparent;
padding-left: 10px;padding-right:10px;height:300px;}*/

/*分隔線─版主回應分隔線*/
.article_hr{
border:none;
background-color:#D9ECF0;
height:1px;
color:#D9ECF0;}
/*分隔線─虛線*/
.line{
border-bottom:1px dashed #969696;}
/*分隔線─實線*/
.line2{
border-top:1px solid #D9ECF0;}

/*──────────────前景─上方───────────────*/
/*===================================================================*/
/*廣告─基本文字樣式*/
.hotext{FONT-SIZE: 10pt; COLOR: #FFFFFF}
/*廣告─連結文字樣式*/
.keynews a:link{FONT-SIZE: 10pt; COLOR: #FFFFFF; TEXT-DECORATION: none}
/*廣告─造訪過後的文字樣式*/
.keynews a:visited{
FONT-SIZE: 10pt; COLOR: #FFFFFF; TEXT-DECORATION:none}
/*廣告─滑鼠移入的文字樣式*/
.keynews a:hover{
FONT-SIZE: 10pt; COLOR: #FFFFFF; TEXT-DECORATION:underline}

/*下拉式選單─基本樣式*/
.wide_t1 {
font-size: 9pt;
line-height:25pt;
COLOR: #b23535;
background:#edd5dc;}
/*下拉式選單─呈現位置。如要使用才將前後符號刪掉。*/
/*position : absolute;
top:-0px; left:850px;
clip: rect(2px 108px 17px 2px);*/
/*下拉式選單─選單內容：首項*/
.wide_titlebar{color:#338310; background:#F1FCDF;}
/*下拉式選單─選單內容：分類1*/
.wide_titlebar1{COLOR: ;background:#edd5dc}
/*下拉式選單─選單內容：分類2*/
.wide_titlebar2{COLOR: ;background:#fdeff2}

/*勇者小屋─隱藏此欄位的所有預設圖，要使用的話刪除前後符號。*/
/*.wide_wordbk7 img {visibility:hidden;}*/
/*勇者小屋─基本設定*/
.wide_wordbk7{
background-image : url(http://);
border:0px solid none;}
/*勇者小屋─帳號ID的字體顏色*/
.wide_password2{color:#4682b4;}
/*勇者小屋─信箱、銀行和勇造、VIP之間的分隔線，如果想拿掉的話就用0px*/
.wide_line{
border:0px;
background-color:transparent;}
/*勇者小屋─信箱、銀行、勇造、VIP的底色*/
.wide_sev{background-color:transparent;}
/*勇者小屋─等級基本設定*/
.wide_sign{
color:#4682b4;
background-color:transparent;}

/*──────────────前景─左下───────────────*/
/*============================　橫幅區　=============================*/
/*===================================================================*/
/*小屋橫幅區─橫幅主圖*/
.banner{
background: url(http://pic.bahamut.com.tw/home/banner.jpg) repeat;
height:120px;
padding-left:20px;
padding-top:15px;}
/*小屋橫幅區─暱稱和帳號文字。「()」為無連結的文字。*/
.banner_t1{
color:#0055CB;
font-weight:bold;}
.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
color:#0055CB;
font-weight:bold;
text-decoration:inherit;}
/*小屋橫幅區─碎碎唸文字顏色*/
.banner_t3{
color:#6C7A8D;
line-height:18px;
height:42px;}
/*小屋橫幅區─顯示官階的文字顏色*/
.banner_t4{
color:#008E25;}
/*小屋橫幅區─顯示稱號的文字顏色*/
.banner_t5{
color:#235BD3;}
/*小屋橫幅區─「訂閱他的小屋」按鈕設定*/
.home_order_button{
font-size:12px;
border-width:1px ;
border-color:#bfbfbf #464646 #464646 #bfbfbf;
border-style:solid;
padding:1px 4px 1px 4px ;
line-height:16px;
background:url(http://pic.bahamut.com.tw/home/but_bk.gif) repeat-x #fff;
text-align: center;
text-decoration: none;
cursor: pointer}
.home_order_button:hover {
border-width:1px ;
border-color:#464646 #bfbfbf #bfbfbf #464646;
border-style:solid;padding:1px 4px 1px 4px ;
line-height: 16px;
background:url(http://pic.bahamut.com.tw/home/but_bk.gif) repeat-x #fff;
text-align: center; text-decoration: none;}

/*============================　主選單　=============================*/
/*===================================================================*/
/*主選單─背景、主體設定(會被其表格內的其他設定影響)*/
.menu{
background:url(http://pic.bahamut.com.tw/home/menubar.gif) no-repeat;
height:35px;}
/*主選單─所在頁面*/
.menuIN{
background:url(http://pic.bahamut.com.tw/home/menu_in.gif) no-repeat;
font-weight:bold;
color: #0055CB;
height:35px;
line-height: 35px;
text-align: center;
text-decoration: none;}
.menuIN a:link,.menuIN a:visited{
font-weight:bold;
color:#0055CB;
height:35px;
line-height:35px;
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:35px;
line-height:35px;
text-align:center;
}
.menuout a:hover {
background:url(http://pic.bahamut.com.tw/home/menu_in.gif) no-repeat;
font-weight:bold;
color:#0055CB; height:35px;
line-height:35px;
text-align:center;
text-decoration: none;
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;}

/*============================　主表格　=============================*/
/*===================================================================*/
/*主標題─背景&外框*/
.category_title{
background:url(http://pic.bahamut.com.tw/home/category_title.gif) no-repeat;
height:40px;}
/*主標題─文字*/
.category_word{
color:#117E96;
font-size:15px;
font-weight:bold;
padding-left:85px;
padding-top:0px;
padding-bottom:2px;}
/*副標題(屋主才有機會看到的)*/
.category_title2{
background:url(http://pic.bahamut.com.tw/home/category_title2.gif) no-repeat;
height:40px;}
/*內文背景&外框*/
.category_bk{
background:#FFF;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
padding:12px;}
/*框架結束*/
.category_footer{
background:url(http://pic.bahamut.com.tw/home/bottom.gif);
height:25px;}

/*─────────────前景─右下────────────────*/
/*====================================================================*/
/*無連結─月曆文字顏色*/
.home_c1{COLOR: #FFFFFF}
/*右下─人氣流量圖*/
/*#Flash_curve{display:none;}*/

/*右下表單─標題格式*/
.post_title {
color:#fff;
background-color:transparent;
background-image : url(http://myhome.apbb.com.tw/indream228/baha_home_blue/POST-BG_blue.jpg);
background-repeat:no-repeat;
background-position : 0% 50%; /*背景圖片x與y軸的位置*/
height:50px;
padding-left:53px;}
/*右下表單─資料區*/
.postboxin {
background:none;
background-repeat: no-repeat;}
.postbox2 {
border:0px;
background:none;
background-repeat: no-repeat;}
.postbox2 img{display:none;}
/*右下表單─項目符號圖片設定*/
.post_list{
color:#b0c4de;
background:none;
padding-left: 14px;
margin: 0px;text-decoration:none;}
.post_list ul,.post_list a:link,.post_list a:visited,.post_list a:hover{
COLOR: #b0c4de;
padding-left: 14px;
background:url(http://) no-repeat left top;
border-bottom: #ccc 0px solid;list-style-type: none;margin: 0px;text-decoration:none;}

/*────────────────小屋首頁─────────────────*/
/*─────────────────────────────────────*/
/*首頁－勇者資料區背景色*/
.infom_bk{
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
padding-top:10px;
background:#FFF;}
/*首頁─勇者資料區：小屋封面圖、COVER圖、看版圖*/
.cover_pic{
background:url(http://pic.bahamut.com.tw/home/cover_pic.gif) repeat;}
/*勇者資料區──三角形箭頭icon*/
.box_icon1{
background-image:none;}
/*勇者資料區：表格外框*/
.box1{
border:1px solid #D9ECF0;}
/*勇者資料區─給紅心的敘述文字*/
.heartGP{
color:#FF3366;}
/*勇者資料區─評價區的底色、背景*/
.apprise_bg{
background:url(http://pic.bahamut.com.tw/home/love.jpg) no-repeat;}
/*勇者資料區─個人能力數值區*/
.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;}
/*勇者資料區─表格標題；各區共用─部落閣、精華區下方：留言區表格之非選擇中選項背景色*/
.box_title{
background:#D9ECF0;
font-weight:bold;
letter-spacing:2px;}
/*勇者資料區─表格內文底色 1；各區共用─部落閣、精華區下方：表格之選擇中之選項、回應背景色1*/
.box_list1{
background-color:#F6F6F6;}
/*勇者資料區─表格內文底色 2；各區共用─部落閣、精華區下方：表格之回應2*/
.box_list2{
background-color:#FFF;}

/*首頁─部落閣最新文章欄位前之縮圖*/
.article_pic{
border-left:1px solid #C4C4C4;
border-right:3px solid #C4C4C4;
border-top:1px solid #C4C4C4;
border-bottom:3px solid #C4C4C4;}
/*首頁─部落閣最新文章欄位背景及GP值底色*/
.articlebox{
border:1px solid #7DC8D0;
background-color:#FFFFF4;
padding:5px;
width:100%;}

/*───────────────　個人部落閣　───────────────*/
/*─────────────────────────────────────*/
/*個人部落閣─文章標題有無連結*/
.article_t1{
color:#FF6600;
font-weight:bold;}
.article_t1 a:link, .article_t1 a:visited{
color:#FF6600;
font-weight:bold;}
/*個人部落閣─文章內容預設字型*/
.home_h4{
color:#68699b;
font-size:13px;}
/*個人部落閣─相關文章欄位*/
.home_scroll{
width:650px;
height:80px;
overflow:auto;
scrollbar-arrow-color:#067180;
scrollbar-face-color:#92D1DA;
scrollbar-highlight-color:#465059;
scrollbar-3dlight-color:#C6E6E6;
scrollbar-darkshadow-color:#067180;
scrollbar-track-color: #A0C9C9;
scrollbar-shadow-color: #2BA2B3;
text-align:left;
font-size:12px;}

/*───────────────　個人精華區　───────────────*/
/*─────────────────────────────────────*/
/*個人精華區─文章標題顏色*/
.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;}
/*個人精華區─精華區標籤使用熱門度設定*/
.tag1 { color: #3399CC;}
.tag1 a:link, .tag1 a:visited, .tag1 a:hover { color: #3399CC;}
.tag2{ color: #C184C1;}
.tag2 a:link, .tag2 a:visited, .tag2 a:hover { color: #C184C1;}
.tag3 { color: #669966;}
.tag3 a:link, .tag3 a:visited, .tag3 a:hover { color: #669966;}


/*───────────────　其他保留　────────────────*/
/*─────────────────────────────────────*/
/*用意不明──圓形彈珠icon*/
.box_icon2{
background-image:url(http://pic.bahamut.com.tw/home/list_icon2.gif) no-repeat;}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■◇
　背景色　：background-color:;
　‧若不使用圖片請用「none」或「transparent」取代「url()」。
　背景圖　：background-image:url();
　排列方式：background-repeat:;
　背景效果：background-attachment:;
　對齊位置：background-position :;

　框線整合：border: 1px solid #6699cc;
　‧個別設定（順序為上、右、下、左）
　框線寬度：border-width:1px 3px 3px 1px;
　框線顏色：border-color:#C4C4C4;
　框線風格：border-style:solid;

　其他語法請爬文，很多大大有釋出整理。
◇■■■■■■■■■■■■■■■◆整理：如語娃娃（ｉｎｄｒｅａｍ２２８）◆■*/