2010年3月11日 星期四

【css】更換檔頭banner

把檔頭換成擁有自己風格的圖片才夠炫呀~~


從此以後再也不會跟人撞檔頭XD


更能搭配動畫設計來製作檔頭


GIF製作參考:


 製作gif圖片的工具-Microsoft GIF Animator


線上製作gif圖像的工具-gifninja


讓自己的網頁更搶眼!


/*檔頭*/
#banner{
    margin: 0px 0px 0px 0px;
    padding: 0px;
    height: 300px;
    background-image: url(圖片網址);
    background-repeat: no-repeat;
    background-position: center top;
    width: 970px;
    left: 0px;
}


一般xuite的檔頭css語法應該就差不多是這樣


語法解說:


margin: 0px 0px 0px 0px; 定義圖片擺放的位置


height: 300px; 圖高


width: 970px;  圖寬


background-image: url(圖片網址);  使用圖片來作為檔頭且輸入圖片的網址


background-repeat: no-repeat;  檔頭圖片單貼一張


left: 0px;  向左對齊 距離左側的值


 


只要將background-image:
url(圖片網址);


 (圖片網址)填入已上傳到網路空間圖片的位置即可


位置也能自己更改


做成gif檔頭一定能更搶目光~




 


 


 


 


 


沒有留言:

張貼留言