原創|使用教程|編輯:況魚杰|2020-01-08 14:30:55.447|閱讀 390 次
概述:診斷和識別CSS問題的最簡單,最有效的方法之一是使用Internet Explorer開發人員工具(IE8或更高版本),Mozilla Firefox瀏覽器開發人員工具或Google Chrome中內置的開發人員工具。這些工具使您可以詳細檢查生成的HTML,并確定哪些樣式規則有助于頁面給定部分的布局和樣式。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
HelpStudio以最快的,最簡單的方式創建和出版幫助系統,并與您的桌面或基于網絡的應用程序或組件整合起來,包括. NET。
Document! X包含了最新的制作工具,它允許你在預覽自動生成的頁面中直接增加內容-自動生成的文檔與功能齊全的注釋工具的無縫集成。使用Document! X,文檔可以在整個設計和開發過程中自動生成,而不需要花費開發人員的資源,同時為開發團隊提供了準確和最新的參考,并允許新的開發人員快速的學習新的組件和架構。
診斷和識別CSS問題的最簡單,最有效的方法之一是使用Internet Explorer開發人員工具(IE8或更高版本),Mozilla Firefox瀏覽器開發人員工具或Google Chrome中內置的開發人員工具。這些工具使您可以詳細檢查生成的HTML,并確定哪些樣式規則有助于頁面給定部分的布局和樣式。
可以在這里找到有關各種瀏覽器工具的更多信息:
Chrome瀏覽器:https://developers.google.com/chrome-developer-tools/
Firefox:https: //developer.mozilla.org/en-US/docs/Tools
Edge:https://docs.microsoft.com/zh-cn/microsoft-edge/devtools-guide
Internet Explorer:http://msdn.microsoft.com/en-us/library/gg699337(v = vs.85).aspx
Opera:https: //help.opera.com/en/presto/advanced-features/#dragonfly
Safari:https://developer.apple.com/technologies/safari/developer-tools.html
在Google Chrome中使用開發者工具
構建您要檢查的輸出。構建完成后,在Chrome中打開瀏覽器幫助輸出。
注意:如果Chrome不是您的默認瀏覽器,請從默認打開的瀏覽器中的地址欄中復制地址,打開Chrome,然后將該地址粘貼到Chrome地址欄中。
在目錄中,導航至您要檢查CSS或HTML的主題。
按(F12)或(Ctrl + Shift + I)打開開發人員工具。
開發人員工具窗格頂部的按鈕條使您可以檢查頁面的各個方面。
單擊Elements(元素)選項卡以顯示元素層次結構。
單擊Developer Tools pane(開發人員工具)窗格的Elements(元素)選項卡旁邊帶上的arrow pointing the square(箭頭指向正方形)圖標-這將激活檢查模式。
將鼠標移到頁面上,然后單擊您想要更仔細地查看的元素。
現在,Developer Tools pane(開發人員工具)將在開發人員工具窗格的右下角顯示正在應用于該元素的各種樣式規則(下面的示例)
提示:您可以在Google Developer Tools主頁上找到有關使用Google Chrome Developer Tools的更多信息。
在Mozilla Firefox中使用開發人員工具
構建您要檢查的輸出。構建完成后,在Firefox中打開純HTML輸出。
注意:如果Firefox不是您的默認瀏覽器,請從默認打開的瀏覽器中的地址欄中復制地址,打開Firefox并將該地址粘貼到Firefox地址欄中。
在目錄中,導航至您要檢查CSS或HTML的主題。
按(F12)或使用Tools(工具)菜單選擇Web developer(Web開發人員)>Toggle Tools(切換工具)。
單擊Inspector(檢查器)選項卡以顯示元素層次結構。
單擊Developer Tools pane(開發人員工具)窗格的Inspector(檢查器)選項卡旁邊條上的arrow pointing the square(箭頭指向正方形)圖標-這將激活檢查模式。
將鼠標移到頁面上,然后單擊您想要更仔細地查看的元素。
現在,Developer Tools pane(開發人員工具)將在開發人員工具窗格的右下角顯示正在應用于該元素的各種樣式規則(下面的示例)
注意:您可以在Firefox開發人員工具主頁上找到有關使用Firefox開發人員工具的更多信息。
在Microsoft Edge中使用開發人員工具
構建您要檢查的輸出。 生成后,在Internet Explorer中打開純HTML輸出。
注意:如果Microsoft /Edge不是您的默認瀏覽器,請從默認打開的瀏覽器中的地址欄中復制地址,打開Edge并將該地址粘貼到Edge地址欄中。
在目錄中,導航至您要檢查CSS或HTML的主題。
按(F12)打開Developer Tools pane(開發人員工具)窗口。
單擊Inspector(檢查器)選項卡以顯示元素層次結構。
單擊arrow pointing the square(箭頭指向正方形)圖標按鈕以啟動檢查模式。
單擊要檢查的元素。
在Internet Explorer中使用開發人員工具
構建您要檢查的輸出。生成后,在Internet Explorer中打開純HTML輸出。
注意:如果IE不是您的默認瀏覽器,請從默認打開的瀏覽器中的地址欄中復制地址,打開IE,然后將該地址粘貼到IE地址欄中。
操作步驟與在Microsoft Edge中使用開發人員工具一致。
示例如下:
如果您對上面的問題有什么疑惑或者建議都可以在評論區留言,大家一起討論。
如果您對Document! X和HelpStudio感興趣,可以咨詢購買正版授權軟件。
關注慧聚IT微信公眾號 ???,了解產品的最新動態及最新資訊。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自: