無名樣式製作教學－文章區－小咘

文章區就是 #content

下一張(熱鍵:c)

它包含了「日期」、「文章標題」、「內文」、「作者」這幾樣東西。

文章區的顏色

首先，我們來幫文章區換顏色。在樣式表最下方，加上這句：

#content {background: #AAFFEE;}
紅色的數值就是色碼，你可以自己決定，請參考色碼表

就像這樣，換上你想要的色彩～

下一張(熱鍵:c)

你也可以幫文章區加個外框，用下面這一句：

#content {border:#55AA00 solid 10px;}
10px就是外框的粗細，你可以自己決定數值

回上一層(熱鍵:b)

日期

日期就是 .date　要怎麼改變呢？

回上一層(熱鍵:b)

只要在樣式表最下方，加入這一段：

.date {
font-size: 16px; /*日期的大小*/
background: #FFB3FF; /*日期的背景顏色*/
font-color: #FFFFFF; /*日期的文字顏色*/
border: #FFFFFF solid 2px ; /*日期的外框顏色*/}
數值都可以自己決定，如果不要外框，就設成0px

就能幫日期做變化了～

下一張(熱鍵:c)

文章標題

文章標題就是 .title 只要在樣式表最下方，加入這一段：　

.title {
font-size: 18px; /*文章標題大小*/
color: #5599FF; /*標題字的顏色*/
padding-left: 30px; /*文章標題跟左邊的距離*/}

就能幫文章標題做變化～

下一張(熱鍵:c)

你可能會想在標題前面，放個小圖案。加上這一句就可以了：

.title {background:url(圖片網址) no-repeat;}

回上一層(熱鍵:b)

內文

內文就是 .innertext 在樣式表最下方，加入這一段：

.innertext {
font-size: 16px; /*內文字體大小*/
color: #550088; /*內文顏色*/}

就能幫內文做變化～

回上一層(熱鍵:b)

作者區

「作者區」就是 .posted 在樣式表最下方，加入這段：

.posted {font-size: 12px; /*作者區文字大小*/
color: #7700BB; /*發文時間顏色*/}
.posted a {color: #FFAA33; /*回覆、引用、轉寄、檢舉的顏色*/}
.posted a:hover {color: #8C0044; /*滑鼠經過的顏色*/}

就能幫「作者區」做變化～

下一張(熱鍵:c)

繼續閱讀

「繼續閱讀」就是 .extended 在樣式表加入這段：

.extended {font-size: 18px; /*繼續閱讀的大小*/}
.extended a {color: #FF0088; /*繼續閱讀的顏色*/}
.extended a:hover {color: #C10066; /*滑鼠經過時的顏色*/}

就能幫「繼續閱讀」做變化：

回上一層(熱鍵:b)