善用瀏覽器元素檢測-模擬調校CSS樣式配置

用PhotoShop設計頁面視覺的設計師可直接在PS上調校配色或大小配置,但如果像我們並不是專業的視覺設計師只想在部落格或已產生的頁面要微調配色或字體大小配置時,若每次要調完再看結果那就很耗工和耗時。

PC的瀏覽器像Chrome和Firefox等就很貼心,在啓動檢測元素後,除了可檢查元素的CSS設定值,還可直接修改元素的CSS設定來模擬結果,等定案後我們再一次修改就可避免反覆的修訂、存檔和檢視。

除了直接修改元素內有定義樣式的參數值或隱藏該樣式外,也可添加樣式。只要在元素內最後一個樣式後面空白區點一下,會出現一個框,打上樣式開頭英文字母就會自動出現該字母開頭的樣式選單,例如要添加font-size的設定,只要打上f就會出現選單不用完整背出來也可以,但若連開頭字母都不清楚,那就從a開始瞎猜吧^-^。

在瀏覽器上如何打開元素檢測,可以參考先前這篇「調校網頁版面-善用Chrome和FireFox元素檢測功能」介紹

在chrome上原始的CSS元素設計
在chrome上修訂CSS元素模擬結果,可修訂多個元素,要記得隨時抄下設定值,若重整頁面則會回到原始的設計哦
FireFox也提供模擬修訂元素的功能
可以添加樣式哦!

這個網誌中的熱門文章

沒印表機沒關係 便利商店找印去

被時代淘汱的英文怎麼說

探訪神秘的烏法魯神殿

色情廣告視窗關不掉? 動手解解看吧~

玩轉水晶石工作室 妝點個人部落