香港新浪網 MySinaBlog
« 上一篇 | 下一篇 »
MySinaBlog | 3rd Apr 2006 | CSS教學 | (20243 Reads)
這篇文章將會教大家如何修改網誌的Header

首先打開CSS樣版圖,可以看到相關Header的CSS標示為:

  1. #header
  2. #title
  3. .description

 

目標1:更改Header高度、顏色和背景:

#header{

margin       : 5px;
height        : 120px;                
background-color : #FFFFFF;   
}

 i. 以上的CSS中Header的高度為120px, 這個數字可自由調整。如:height: 150px;

ii. 如要更改Header顏色,如之前更改背景一樣,可修改顏色碼。如:background-color: #00FF00; (綠色)

iii. 如果更改Header圖像,如之前更改背景一樣,可使用background-image。如:

#header{

margin       : 5px;
height        : 120px;               
background-image: url(http://csstyle.mysinablog.com/resserver.php?resource=132206-header.gif);

}

 

目標2:更改Title字型、顏色:

#title{ 

padding             : 0px 20px 0px 20px;
position            : relative;
top                    : 30%;
text-align          : left;
font                : bold 25px arial, sans-serif;
}

i. 要調整Title字型大小、font-size, 可修改:font : bold 25px arial, sans-serif;。如,改為:font : normal 15px times;

ii. 如要修改Title相對Header的水平位置,可改top的百份比。

 

目標3:更改Title顏色:

#title a{

color           : #232323;
text-decoration : none;
}

#title a:hover{

color               : #000000;
text-decoration     : none;
}

i. 修改Title連結顏色,可改#title a內的color屬性。

ii. 修改Title連結在滑鼠經過時的顏色,可改#title a:hover內的color屬性。

 

目標4:更改網誌描述字型、顏色:

.description{ 

font            : 15px arial, sans-serif;
color           : #666666;
line-height     : 1.5;
}

i. 修改網誌描述字型,可改font這個屬性。

ii. 修改網誌描述顏色,可改color屬性。

如想知更多關於字型的CSS設定,可到這裡

 

下次再會﹗

Picture

 

註:關於這篇文章的內容上的問題,請留言發問。

至於其他的CSS問題,可在這裡問。


[13] Re: ~vincy~

已上傳的圖片了,其大小也是適合的


[引用] | 作者 buy steroids | 4th May 2012 | [舉報垃圾留言]

[12]

這個無名也可以用嗎
超級新手
怎樣才把網誌背景
改成自己的生活照阿


[引用] | 作者 洋洋 | 19th Jan 2011 | [舉報垃圾留言]

[11]

真是很好的CSS教材, 可以打做一個有個人風格的網誌.


[引用] | 作者 Blogger | 28th Jun 2010 | [舉報垃圾留言]

[10] header可否用flash啊?

header可否用flash啊?還是一定只可以用圖片?

車位皇
[引用] | 作者 車位皇 | 26th Jun 2010 | [舉報垃圾留言]


只可以用圖片, 暫時不支援FLASH 啊...

[引用版主回覆] | 作者 MySinaBlog | 28th Jun 2010

[9] 唔要"Title"呢欄得唔得??

唔要"Title"呢欄得唔得?? 因為自己有設計好header已連title資料....
唔該晒!! :)

MaKei瑪姬
[引用] | 作者 MaKei瑪姬 | 10th Jul 2008 | [舉報垃圾留言]

[8]

how to change to the title style to 'bold' and 'italic'?


[引用] | 作者 PAPER | 19th Jun 2007 | [舉報垃圾留言]

[7] 文字filter

你好, 我想請問怎樣在css template中加入文字效果的filter如:

filter:blur(add=1,direction=120,strength=5);

但沒有任何效果, 我查過外面的css filter例子對文字都是需要用上span指令, 所以我想知道在css template應該怎麼做. 謝謝


[引用] | 作者 ifurkend | 11th Jan 2007 | [舉報垃圾留言]

[6] 點解

我用進階設定修改header的圖片,按自選圖片後選擇了已上傳的圖片了,其大小也是適合的,但最後header空白一片,為什麼?


[引用] | 作者 me | 1st Nov 2006 | [舉報垃圾留言]

[5] help....

請問怎樣先至可以整到個標題d字同個backgroung image 分開呢?(我想d字o係左邊,而右邊係用我自己upload gei圖做background)


[引用] | 作者 ~vincy~ | 6th Sep 2006 | [舉報垃圾留言]

[4]

我想全部還原,可為甚麼在css按了回復後,在預覽看到預期的,但啟用後上自己的blog度就發現咩都冇變?css同一開始一模一樣,header都冇display none,點解我既不能背景還原?而且header冇左…

http://toplanthappiness.mysinablog.com/


[引用] | 作者 植聿 | 21st Jul 2006 | [舉報垃圾留言]

Next