【小屋】CSS自訂版面：六、各文章列表區(下方)篇＜完＞

＜本文發表於2007/09/15 最後修改於2007/09/15 11:40　如語娃娃＞
前言：
　　以下內容可以對照「CSS自訂面板」的語法內容。
　　‧本篇說明方向各文章列表區(下方)：個人部落閣（含首頁最新文章、版主回應分隔線）、個人精華區。
　　‧只要是有「#」後接著6個英數混合成的色碼──十六進位數值，第一組表示紅色數量、第二組表示綠色、第三組表示藍色──都可以不同的色碼替代原本的色碼，只是「#」不要忘記加了。例如：#FFFFFF(白色)可換成#b23535(咖啡紅)，簡單取得色碼的方法
　　　1.參考巴哈小屋提供的色盤
　　　2.到日本網站的「原色大辭典(連結)」
　　‧說明文字會以「 /**/ 」包夾，「/**/其中的說明文字」以及「CSS編輯中空格跟空行」皆不會造成語法上的影響，可以放心留著。

　　話說，越說越後面講得越簡易，應該不會被巴吧，哈哈。
　　本篇最需要注意的部份是設定屋主回應分隔線的地方──如果要設定分隔線的背景，原本在其中的「ｃｏｌｏｒ：＃ＸＸＸ」就要刪掉。

───────────────────────────────────────────
───────────────────────────────────────────
/*----------------------各文章列表區(下方)----------------------*/
/*------------個人部落閣-----------*/
/*文章內文預設顯示*//*這段是如語自己加上的。*/
.home_h4{
color:#68699b; /*文字預設色彩*/
font-size:13px; /*文字的大小*/
}

/*--文章標題顏色--*/
/*瀏覽文章時的標題文字設定*/
.article_t1{
color:#ef7781; /*文字顏色*/
font-weight:bold; /*文字粗體*/
}
/*文章列表的標題文字設定*/
.article_t1 a:link, .article_t1 a:visited{
color:#ef7781; /*文字顏色*/
font-weight:bold; /*文字粗體*/
}

/*--最新文章及GP值底色--*/
.articlebox{
color:#028760; /*文字顏色*/
border:1px solid #fcb4b4; /*最新文章摘要文的外框*/
background-color:#FFF; /*背景色*/
background-image : url(http://); /*背景圖址*/
background-repeat:no-repeat; /*背景圖不重複*/
background-position:105% 100%; /*背景圖的位置，XY軸*/
padding:20px; /*內文與四邊界的距離*/
width:100%; /*寬度100%，巴哈預設的寬*/
height:160px; /*表格高度，影響最新文章的表格高度*/
vertical-align:top; /*垂直向上對齊*/
}

/*--版主回應分色線--*//*若要設定分隔線的圖，COLOR文字色設定一定要刪掉*/
.article_hr{
background-image : url(http://); /*圖址*/
background-repeat:no-repeat; /*背景圖不重複*/
background-position : center; /*背景圖置中*/
height:37px; /*分隔線的高度*/
weight:100%; /*分隔線的寬度*/
}

/*------------個人精華區-----------*/
/*個人精華文章標題顏色*//*影響點看精華的摘要時，該文標題*/
.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; /*背景色*/
background-image : url(http://); /*背景圖*/
background-repeat:no-repeat; /*背景圖不重複*/
background-position:105% 100%; /*背景圖位置*/
}