CSS經驗分享二,用firebug快速瞭解網頁布局

文章目錄

• 可視化的CSS尺標
• CSS調試

Firebug是Firefox下的一款開發類外掛程式，現屬於Firefox的 五星級強力推薦外掛程式之一。它集HTML查看和編輯、Javascript控制台、網路狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發人員帶來很大的便利。這是一款讓 人愛不釋手的外掛程式.

我用在使用的是1.2.1版本,在這我以用firebug查看部落格園新聞模組來講解,它的使用方法 .

 

部落格園新聞,是典型的兩欄式布局,按f12鍵我們就可以看到HTML代碼,這裡看到是經過格式化的HTML代碼，它有清晰的層次，你能夠方便地分辨出每一個標籤之間的從屬並行關係，標籤的摺疊功能能夠協助你集中精力分析 代碼。原始碼上方還標記出了DOM的層次，如所示，它清楚地列出了一個hml元素的parent、child以及root元素，配合Firebug自 帶的CSS查看器使用，會給div+css頁面分析編寫帶來很大的好處。你還可以在HTML查看器中直接修改HTML原始碼，並在瀏覽器中第一時間看到修 改後的效果.

可視化的CSS尺標

我們可以利用Firebug來查看頁面中某一區塊的CSS樣式表，如果進一步展開右側Layout tab的話，它會以尺規的形式將當前區塊佔用的面積清楚地標識出來，精確到象素，更讓人驚訝的是，你能夠在這個可視化的介面中直接修改各象素的值，頁面上 區塊的位置就會隨改動而變化。在頁面中某些元素出現錯位或者面積超出預料值時，該功能能夠提供有效協助，你可以籍此分析offset、margin、 padding、size之間的關係，從而找出解決問題的辦法。

 

當你滑鼠移動sideleft時,你可以看到瀏覽器中的效果, sideleft層的內容加了顏色.

 

CSS調試

Firebug的CSS調試器是專為網頁設計師們量身定做的。

如今的網頁設計言必稱div+css，如果你是用table套出來的HTML頁面，就得按這規矩重構一遍，否則顯得你不夠時髦！用div做出來的頁 面的確能精簡HTML代碼，HTML標籤減肥的結果就是CSS樣式表的編寫成了頁面製作的重頭戲。Firebug的CSS查看器不僅自下向上列出每一個 CSS樣式表的從屬繼承關係，還列出了每一個樣式在哪個樣式檔案中定義。你可以在這個查看器中直接添加、修改、刪除一些CSS樣式表屬性，並在當前頁面中 直接看到修改後的結果。

一個典型的應用就是頁面中的一個區塊位置顯得有些不太恰當，它需要挪動幾個象素。這時候用CSS調試工具可以輕易編輯它的位置——你可以根據需要隨意挪動象素。
4中正在修改一個區塊的背景色。

提示：如果你正在學習CSS樣式表的應用，但是總記不住常用的樣式表有哪些值，可以嘗試在CSS調試器中選中一個樣式表屬性，然後用上下方向鍵來改變它的值，它會把可能的值一個個遍曆給你看。