登入 註冊
 

調整導航列和搜尋列的位置
閱讀 2711 次 0 會員 與 1 訪客 正在閱讀本文。
七月 24, 2011, 02:49:30 下午
LOGO圖片雖然換好了,不過因為模版的關係,導致導航列和搜尋列的位置太上面,這個範例最主要示範如何用FireFox除錯CSS
 用FireFox進入首頁後發現致導航列的位置太高,導致搜尋列被LOGO圖片擋住,因此導航列之後的物件都必須下移:
 ec-099
 按鍵盤的「F12」開啟Firebug視窗,並點擊工具列的「觀察元素」圖示:
 ec-100
 滑鼠移到頁面中找尋找可以調整高度的元素,滑鼠經過的元素會顯示藍色外匡,直到你按下滑鼠才會固定該元素:
 ec-101
 元素固定之後可以從下方的樣式表檢視視窗中看出,這個樣式設定位於 style.css 187行之後,而將原本 padding-top:15px; 改為 padding-top:120px; 再觀察頁面的變化似乎又多了些,於是改為 padding-top:85px; :
 ec-102
 這些調整動作只是方便觀察頁面上的變化,設定值只是提供你稍後修改的依據,並沒有更動檔案:
 ec-103 

 打開 style.css 約187行找到此設定,改為 padding-top:85px; 存檔:
 ec-104   
ec-105
這是用FireFox來觀察元素CSS設定的方法,修改模版經常用到...

記錄