小屋創作

日誌2007-09-15 12:01

【小屋】CSS自訂版面:六、各文章列表區(下方)篇<完>

作者:莉薇婭莞夢

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

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

───────────────────────────────────────────
───────────────────────────────────────────
/*----------------------各文章列表區(下方)----------------------*/
/*------------個人部落閣-----------*/
/*文章內文預設顯示*//*這段是如語自己加上的。*/
.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%; /*背景圖位置*/
}

7

8

LINE 分享

相關創作

[AI tutorial] 劍星 Stellar Blade EVE 製作技巧

Anya Melfissa - 口說練習的秘訣

[AI tutorial] 如何做風格類似的圖片 | 似顏繪

留言

開啟 APP

face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】