diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/tools/page_inspector | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2 translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip |
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/tools/page_inspector')
-rw-r--r-- | files/zh-cn/tools/page_inspector/3d_view/index.html | 102 | ||||
-rw-r--r-- | files/zh-cn/tools/page_inspector/how_to/edit_fonts/index.html (renamed from files/zh-cn/tools/page_inspector/how_to/view_fonts/index.html) | 0 |
2 files changed, 0 insertions, 102 deletions
diff --git a/files/zh-cn/tools/page_inspector/3d_view/index.html b/files/zh-cn/tools/page_inspector/3d_view/index.html deleted file mode 100644 index 60ea480269..0000000000 --- a/files/zh-cn/tools/page_inspector/3d_view/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: 三维视图 -slug: Tools/Page_Inspector/3D_view -translation_of: Tools/3D_View ---- -<div>{{ToolsSidebar}}</div> - -<div class="warning"> -<p>三维视图在 Firefox 47 被移除。</p> -</div> - -<p>{{ fx_minversion_header("11") }}</p> - -<p>当你点击"三维视图"按钮之后,当前页面会进入三维视图模式,在该模式中, 页面中的HTML嵌套结构,会以图形化的方式,由外到内,从页面底部一级一级凸显出来. 这种视图可以让你很容易的看清楚页面的嵌套结构.</p> - -<p><img alt="3dview.png" class="default internal" src="/@api/deki/files/6123/=3dview.png"></p> - -<p>按住左键拖拽视图, 你可以旋转整个页面,从不同的角度查看页面的DOM层次,理清页面的结构. 页面显示区域以外的元素也变为可见状态,你能看到这些游离元素相对于页面可见区域所处的位置. 你可以点击区块选择对应的元素,该元素对应的HTML和CSS会在 <a href="/zh-cn/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML面板</a>和<a href="/zh-cn/Tools/Page_Inspector/Style_panel" title="Style panel">Style面板</a>显示出来.反回来, 你也可以在HTML面板中点击所要查看的元素,该元素也会在三维视图中成为被选择状态.</p> - -<p>如果你的页面查看器里没有三维视图按钮,则最有可能的原因是你的显卡驱动需要更新了. 查看<a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">blocklisted drivers page</a>了解更多信息.</p> - -<h2 id="控制三维视图">控制三维视图</h2> - -<p>通过键盘快捷键和鼠标操作可以控制三维视图的显示模式.</p> - -<table class="standard-table" style="width: auto;"> - <tbody> - <tr> - <td class="header">功能</td> - <td class="header">键盘快捷键 </td> - <td class="header">鼠标操作</td> - </tr> - <tr> - <td>放大/缩小</td> - <td>+/- </td> - <td>滚轮向上/向下滚动</td> - </tr> - <tr> - <td>向左/向右旋转</td> - <td>a / d</td> - <td>按住左键向左/向右拖动</td> - </tr> - <tr> - <td>向上/向下旋转</td> - <td>w / s</td> - <td>按住左键向上/向下拖动</td> - </tr> - <tr> - <td>向左/向右平移</td> - <td>← / →</td> - <td>按住右键向左/向右拖动</td> - </tr> - <tr> - <td>向上/向下平移</td> - <td>↑ / ↓</td> - <td>按住右键向上/向下拖动</td> - </tr> - <tr> - <td>重置放大级别到默认状态</td> - <td>0</td> - <td>无</td> - </tr> - <tr> - <td>将焦点转移到当前选择的节点,确保当前选择的节点是可见的{{ fx_minversion_inline("13.0") }}</td> - <td>f</td> - <td>无</td> - </tr> - <tr> - <td>重置整个视图到默认状态(放大级别,旋转角度,移动位置等){{ fx_minversion_inline("12.0") }}</td> - <td>r</td> - <td>无</td> - </tr> - <tr> - <td>隐藏当前选择的节点,确保当前选择的节点是不可见的, 这样可以看到下层被遮挡的节点{{ fx_minversion_inline("12.0") }}</td> - <td>x</td> - <td>无</td> - </tr> - </tbody> -</table> - -<h2 id="三维视图的用途">三维视图的用途</h2> - -<p>三维视图在很多种情形下都会派上用场:</p> - -<ul> - <li>如果一些结构不良好的HTML引起了页面的布局问题, 三维视图可能能够帮你找到问题所在. 通常情况下,布局问题是由页面内容的嵌套错误引起的.在三维视图下,嵌套错误的那些元素可以比较明显的被显示出来.</li> - <li>如果一个元素没有显示在页面上,你会希望能够快速的找到问题所在.三维视图提供了缩小页面显示的功能,可以显示出那些正常情况下页面可见区域之外的元素, 所以你可以通过这种方法找到那些游离的无法显示的元素.</li> - <li>可以查看你的页面结构,找到如何优化页面布局的方法.</li> - <li>当然,还有一点,就是它看起来很炫.</li> -</ul> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="/zh-cn/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> - <li><a href="/zh-cn/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li> - <li><a href="/zh-cn/Tools/Page_Inspector/Style_panel" title="zh-cn/Tools/Page_Inspector/Style panel">Style panel</a></li> - <li><a href="/zh-cn/Tools" title="Tools">Tools</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li> -</ul> - -<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "en": "en/Tools/Page_Inspector/3D_view"} ) }}</p> diff --git a/files/zh-cn/tools/page_inspector/how_to/view_fonts/index.html b/files/zh-cn/tools/page_inspector/how_to/edit_fonts/index.html index a5a6ae1e6e..a5a6ae1e6e 100644 --- a/files/zh-cn/tools/page_inspector/how_to/view_fonts/index.html +++ b/files/zh-cn/tools/page_inspector/how_to/edit_fonts/index.html |