close
網誌最上面,就是招牌(也有人叫作「橫幅」)

招牌就是 #banner
怎麼改變招牌的樣子呢?在樣式表最下方,加入這一句:
#banner {
background: #FFFF00; /*招牌顏色*/
width: 800px; /*寬度*/
height: 150px; /*高度*/}
紅色的數值可以自己決定,請利用 色碼表
改變之後就像這樣~

網誌名稱就是 #pageheader h1 a
在樣式表最下方,加入這一段:
#pageheader h1 a {
font-size: 60px; /*網誌名稱的大小*/
color: #AA0000; /*網誌名稱的顏色*/}
#pageheader h1 a:hover {
color: #FFFFFF; /*網誌名稱,滑鼠移上去時的顏色*/}
就可以做出變化啦~

你也可以移動一下「網誌名稱」:
#pageheader h1 {text-align: right; /*網誌名稱靠右邊*/}
#pageheader h1 {text-align: center; /*網誌名稱靠中間*/}
#pageheader h1 {text-align: left; /*網誌名稱靠左邊*/}
網誌描述就是 .description
在樣式表最下方,加入這一段:
.description {
top: 160px; /*網誌描述跟上方的距離*/
left: 80px; /*網誌描述跟左邊的距離*/
font-size: 30px; /*網誌描述的大小*/
color: #660077; /*網誌描述的顏色*/}
就可以做變化~

先把圖片上傳到相簿,取得圖片網址,然後在樣式表加入:
#banner {background:url(圖片網址) no-repeat center top;}
就像這樣,掛上了自己做的圖片~

不過,網誌名稱會跟圖片打架,我們把它隱藏起來:
#pageheader h1 a { visibility: hidden;}
就像這樣~如果用「GIF閃圖」當招牌,應該也滿酷的…

今天就教到這裡,下課!



招牌就是 #banner
招牌的大小和顏色
怎麼改變招牌的樣子呢?在樣式表最下方,加入這一句:
#banner {
background: #FFFF00; /*招牌顏色*/
width: 800px; /*寬度*/
height: 150px; /*高度*/}
紅色的數值可以自己決定,請利用 色碼表
改變之後就像這樣~

網誌名稱
網誌名稱就是 #pageheader h1 a
在樣式表最下方,加入這一段:
#pageheader h1 a {
font-size: 60px; /*網誌名稱的大小*/
color: #AA0000; /*網誌名稱的顏色*/}
#pageheader h1 a:hover {
color: #FFFFFF; /*網誌名稱,滑鼠移上去時的顏色*/}
就可以做出變化啦~

你也可以移動一下「網誌名稱」:
#pageheader h1 {text-align: right; /*網誌名稱靠右邊*/}
#pageheader h1 {text-align: center; /*網誌名稱靠中間*/}
#pageheader h1 {text-align: left; /*網誌名稱靠左邊*/}
網誌描述
網誌描述就是 .description
在樣式表最下方,加入這一段:
.description {
top: 160px; /*網誌描述跟上方的距離*/
left: 80px; /*網誌描述跟左邊的距離*/
font-size: 30px; /*網誌描述的大小*/
color: #660077; /*網誌描述的顏色*/}
就可以做變化~

怎麼用自己的圖片當招牌
先把圖片上傳到相簿,取得圖片網址,然後在樣式表加入:
#banner {background:url(圖片網址) no-repeat center top;}
就像這樣,掛上了自己做的圖片~

不過,網誌名稱會跟圖片打架,我們把它隱藏起來:
#pageheader h1 a { visibility: hidden;}
就像這樣~如果用「GIF閃圖」當招牌,應該也滿酷的…

今天就教到這裡,下課!



★這堂課的重點★
‧招牌就是 #banner
‧網誌名稱就是 #pageheader h1 a
‧網誌描述就是 .description
‧用自己的圖片當招牌
‧招牌就是 #banner
‧網誌名稱就是 #pageheader h1 a
‧網誌描述就是 .description
‧用自己的圖片當招牌
全站熱搜