樣式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
}
紅色字體為修改過的部分。

 
 
 

“樣式summer的修改”有 4 則回應

  1. yoren
    14. April 2005 at 00:55

    當然,banner的圖片是事先準備好的,我將自己拍攝的照片以photoshop剪裁出734*100px的大小,然後上傳到樂多。
    所以圖片實際的寬度只有734px,和設定裡的740px有點差距,但是很小,視覺上不太明顯。理論上圖片和語法的數值應該要設定相等才對。

  2. Stephen
    6. July 2005 at 04:27

    Yoren 你好:

    可不可以請教一下,我也將我的banner高度改短了,可是要如何縮短banner和內文的距離?

    謝謝你,也祝你開心!

  3. yoren
    6. July 2005 at 08:28

    hi Stephen:

    試試看把#banner裡面的HEIGHT改為100px,
    我用Firefox去修改你網站的CSS,看過以後是可以的(如圖)。
    Good Luck!

  4. Stephen
    6. July 2005 at 17:42

    Hi Yoren:

    謝謝你的說明。已經可以了。

    Have a nice day!!!

歡迎留言: