彩票走势图

Document! X和HelpStudio使用技巧:如何诊断CSS问题

原创|使用教程|编辑:况鱼杰|2020-01-08 14:30:55.447|阅读 330 次

概述:诊断和识别CSS问题的最简单,最有效的方法之一是使用Internet Explorer开发人员工具(IE8或更高版本),Mozilla Firefox浏览器开发人员工具或Google Chrome中内置的开发人员工具。这些工具使您可以详细检查生成的HTML,并确定哪些样式规则有助于页面给定部分的布局和样式。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

HelpStudio以最快的,最简单的方式创建和出版帮助系统,并与您的桌面或基于网络的应用程序或组件整合起来,包括. NET。

点击下载最新版HelpStudiov2019.1

Document! X包含了最新的制作工具,它允许你在预览自动生成的页面中直接增加内容-自动生成的文档与功能齐全的注释工具的无缝集成。使用Document! X,文档可以在整个设计和开发过程中自动生成,而不需要花费开发人员的资源,同时为开发团队提供了准确和最新的参考,并允许新的开发人员快速的学习新的组件和架构。

点击下载最新版Document! X v2019.1


诊断和识别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(箭头指向正方形)图标按钮以启动检查模式。

  • 单击要检查的元素。

  • 开发者工具将突出显示您在元素层次结构中单击的元素,并在右侧显示对该元素有效的样式规则(以下示例)。


注意:您可以在Microsoft Edge(EdgeHTML)开发人员工具页面上找到有关使用Microsoft Edge开发人员工具的更多信息。


在Internet Explorer中使用开发人员工具

构建您要检查的输出。生成后,在Internet Explorer中打开纯HTML输出。

注意:如果IE不是您的默认浏览器,请从默认打开的浏览器中的地址栏中复制地址,打开IE,然后将该地址粘贴到IE地址栏中。
操作步骤与在Microsoft Edge中使用开发人员工具一致。

示例如下:

如果您对上面的问题有什么疑惑或者建议都可以在评论区留言,大家一起讨论。


如果您对Document! XHelpStudio感兴趣,可以咨询购买正版授权软件。

关注慧聚IT微信公众号 ☟☟☟,了解产品的最新动态及最新资讯。

1561953111.jpg


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP