From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- files/zh-cn/tools/3d_view/index.html | 102 +++++++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 files/zh-cn/tools/3d_view/index.html (limited to 'files/zh-cn/tools/3d_view/index.html') diff --git a/files/zh-cn/tools/3d_view/index.html b/files/zh-cn/tools/3d_view/index.html new file mode 100644 index 0000000000..60ea480269 --- /dev/null +++ b/files/zh-cn/tools/3d_view/index.html @@ -0,0 +1,102 @@ +--- +title: 三维视图 +slug: Tools/Page_Inspector/3D_view +translation_of: Tools/3D_View +--- +
{{ToolsSidebar}}
+ +
+

三维视图在 Firefox 47 被移除。

+
+ +

{{ fx_minversion_header("11") }}

+ +

当你点击"三维视图"按钮之后,当前页面会进入三维视图模式,在该模式中, 页面中的HTML嵌套结构,会以图形化的方式,由外到内,从页面底部一级一级凸显出来. 这种视图可以让你很容易的看清楚页面的嵌套结构.

+ +

3dview.png

+ +

按住左键拖拽视图, 你可以旋转整个页面,从不同的角度查看页面的DOM层次,理清页面的结构. 页面显示区域以外的元素也变为可见状态,你能看到这些游离元素相对于页面可见区域所处的位置. 你可以点击区块选择对应的元素,该元素对应的HTML和CSS会在 HTML面板和Style面板显示出来.反回来, 你也可以在HTML面板中点击所要查看的元素,该元素也会在三维视图中成为被选择状态.

+ +

如果你的页面查看器里没有三维视图按钮,则最有可能的原因是你的显卡驱动需要更新了. 查看blocklisted drivers page了解更多信息.

+ +

控制三维视图

+ +

通过键盘快捷键和鼠标操作可以控制三维视图的显示模式.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
功能键盘快捷键 鼠标操作
放大/缩小+/-             滚轮向上/向下滚动
向左/向右旋转a / d按住左键向左/向右拖动
向上/向下旋转w / s按住左键向上/向下拖动
向左/向右平移← / →按住右键向左/向右拖动
向上/向下平移↑ / ↓按住右键向上/向下拖动
重置放大级别到默认状态0无
将焦点转移到当前选择的节点,确保当前选择的节点是可见的{{ fx_minversion_inline("13.0") }}f无
重置整个视图到默认状态(放大级别,旋转角度,移动位置等){{ fx_minversion_inline("12.0") }}r无
隐藏当前选择的节点,确保当前选择的节点是不可见的, 这样可以看到下层被遮挡的节点{{ fx_minversion_inline("12.0") }}x无
+ +

三维视图的用途

+ +

三维视图在很多种情形下都会派上用场:

+ + + +

相关链接

+ + + +

{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "en": "en/Tools/Page_Inspector/3D_view"} ) }}

-- cgit v1.2.3-54-g00ecf