April 13,2005 01:13
樣式summer的修改
因為很喜歡[ 時光。記事本 ]這個部落格的風格,所以在修改站內現成的樣式時,決定選擇summer來做修改。
參閱了think of joe的樂多Blog更換banner最速法,創造更具個人特色的Blog!之後,初步修改了summer的三項樣式:
1.banner圖片
2.sidetitle
3.calendarweek
其詳細設定值如下:
1.#banner
{ BACKGROUND: url(http://blog.roodo.com/yoren/f673ee0b.jpg) no-repeat 50% 0px;
WIDTH: 740px;
HEIGHT: 100px
}
2..sidetitle
{ PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #7f8eb7; PADDING-BOTTOM: 3px; COLOR: #fff; PADDING-TOP: 3px; LETTER-SPACING: 2px; TEXT-ALIGN: left
}
3..calendarweek
{ FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #fff
}
此外,為了使說明更為容易閱讀,又增加了樣式:
.em {
COLOR:red;
}
因此,可以為上面樣式詳細設定值加上重點提示:
1.#banner
{ BACKGROUND: url(http://blog.roodo.com/yoren/f673ee0b.jpg) no-repeat 50% 0px;
WIDTH: 740px;
HEIGHT: 100px
}
2..sidetitle
{ PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #7f8eb7; PADDING-BOTTOM: 3px; COLOR: #fff; PADDING-TOP: 3px; LETTER-SPACING: 2px; TEXT-ALIGN: left
}
3..calendarweek
{ FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #fff
}
紅色字體為修改過的部分。
1.banner圖片
2.sidetitle
3.calendarweek
其詳細設定值如下:
1.#banner
{ BACKGROUND: url(http://blog.roodo.com/yoren/f673ee0b.jpg) no-repeat 50% 0px;
WIDTH: 740px;
HEIGHT: 100px
}
2..sidetitle
{ PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #7f8eb7; PADDING-BOTTOM: 3px; COLOR: #fff; PADDING-TOP: 3px; LETTER-SPACING: 2px; TEXT-ALIGN: left
}
3..calendarweek
{ FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #fff
}
此外,為了使說明更為容易閱讀,又增加了樣式:
.em {
COLOR:red;
}
因此,可以為上面樣式詳細設定值加上重點提示:
1.#banner
{ BACKGROUND: url(http://blog.roodo.com/yoren/f673ee0b.jpg) no-repeat 50% 0px;
WIDTH: 740px;
HEIGHT: 100px
}
2..sidetitle
{ PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #7f8eb7; PADDING-BOTTOM: 3px; COLOR: #fff; PADDING-TOP: 3px; LETTER-SPACING: 2px; TEXT-ALIGN: left
}
3..calendarweek
{ FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #fff
}
紅色字體為修改過的部分。
引用URL
http://cgi.blog.roodo.com/trackback/72701
回應文章 
當然,banner的圖片是事先準備好的,我將自己拍攝的照片以photoshop剪裁出734*100px的大小,然後上傳到樂多。
所以圖片實際的寬度只有734px,和設定裡的740px有點差距,但是很小,視覺上不太明顯。理論上圖片和語法的數值應該要設定相等才對。
所以圖片實際的寬度只有734px,和設定裡的740px有點差距,但是很小,視覺上不太明顯。理論上圖片和語法的數值應該要設定相等才對。
| 檢舉 |
Posted by yoren
at April 14,2005 00:55
Yoren 你好:
可不可以請教一下,我也將我的banner高度改短了,可是要如何縮短banner和內文的距離?
謝謝你,也祝你開心!
可不可以請教一下,我也將我的banner高度改短了,可是要如何縮短banner和內文的距離?
謝謝你,也祝你開心!
| 檢舉 |
Posted by yoren
at July 6,2005 08:28
Hi Yoren:
謝謝你的說明。已經可以了。
Have a nice day!!!