initial commit

1 files changed, 98 insertions, 0 deletions

diff --git a/files/zh-cn/tools/page_inspector/ui_tour/index.html b/files/zh-cn/tools/page_inspector/ui_tour/index.html
new file mode 100644
index 0000000000..be7ac2b66b
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/ui_tour/index.html
@@ -0,0 +1,98 @@
+---
+title: UI 导览
+slug: Tools/Page_Inspector/UI_Tour
+translation_of: Tools/Page_Inspector/UI_Tour
+---
+<div>{{ToolsSidebar}}</div><p>这篇文章是一个页面查看器用户界面主要部分的快速导览。</p>
+
+<p>查看器的 UI 包含了三个顶级组件：</p>
+
+<ul>
+ <li>“选择元素”按钮</li>
+ <li>HTML面板</li>
+ <li>CSS面板</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10029/inspector-ui.png" style="display: block; margin-left: auto; margin-right: auto; width: 918px;">本指南尽量保持简洁。并提供了各种如何使用查看器细节指导的链接。</p>
+
+<h2 id="选择元素按钮">选择元素按钮</h2>
+
+<p>查看器可以给你关于当前选择元素的详细信息，选择元素按钮是你可以选择一个元素进行检查的方式：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10031/select-button.png" style="display: block; height: 640px; margin-left: auto; margin-right: auto; width: 1674px;"></p>
+
+<p>注意：该按钮实际上是<a href="/zh-CN/docs/Tools/Tools_Toolbox#Toolbar">工具箱工具栏</a>上的一部分，所以你可以马上从任何工具切换到选择模式，不仅仅是查看器。</p>
+
+<p>了解如何选择一个元素，查看指南——<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Select_an_element">选择一个元素</a>。</p>
+
+<h2 id="HTML_面板">HTML 面板</h2>
+
+<p>查看器被分成两半，左边的一半就是HTML面板：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10033/html-pane.png" style="display: block; margin-left: auto; margin-right: auto; width: 835px;"></p>
+
+<p>想要了解更多关于HTML面板的结构，查看指南——<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">检查和编辑HTML</a>。</p>
+
+<h2 id="CSS_面板">CSS 面板</h2>
+
+<p>占据查看器右边就是CSS面板：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10035/css-pane.png" style="display: block; margin-left: auto; margin-right: auto; width: 835px;">CSS面板分为5个视图：</p>
+
+<ul>
+ <li>规则视图</li>
+ <li>计算后视图</li>
+ <li>字体视图</li>
+ <li>盒模型</li>
+ <li>动画视图</li>
+</ul>
+
+<p>使用顶部的选项卡在不同视图之间切换。</p>
+
+<h3 id="规则视图">规则视图</h3>
+
+<p>规则视图列出了适用于所选元素的所有规则，规则排列有低级到高级：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10017/css-rules.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">查看和编辑CSS</a> 的更多细节。</p>
+
+<h3 id="计算后视图">计算后视图</h3>
+
+<p>计算后视图显示你所选元素的完整计算CSS。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10013/css-computed.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">查看和编辑CSS</a> 的更多细节。</p>
+
+<h3 id="字体视图">字体视图</h3>
+
+<p>字体视图显示页面中的所有字体。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10015/css-fonts.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/View_fonts">字体视图</a> 的更多细节。</p>
+
+<h3 id="盒模型视图">盒模型视图</h3>
+
+<p>盒模型视图提供了一个所选元素的盒模型的可编辑视图。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10011/css-box-model.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">查看和编辑盒模型</a> 的更多细节。</p>
+
+<h3 id="动画视图">动画视图</h3>
+
+<p>动画视图显示所选动画元素的细节和一个暂停控制器：</p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10009/css-animations.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Work_with_animations">处理动画</a> 的更多细节。</p>
+
+<h3 id="显示隐藏_CSS_面板">显示/隐藏 CSS 面板</h3>
+
+<p>从Firefox 40起，在工具栏增加了一个按钮，您可以使用用它来控制显示或隐藏CSS窗格：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10817/inspector-show-hide.png" style="display: block; height: 266px; margin-left: auto; margin-right: auto; width: 739px;"></p>