Dreamweaver CC教程:检查“实时”视图中的代码

Dreamweaver CC教程:检查“实时”视图中的代码

Dreamweaver CC教程:检查“实时”视图中的代码

检查“实时”视图中的代码
检查模式与“实时视图”一起使用有助于快速识别 HTML 元素及其关联的 CSS 样式。打开检查模式后,将鼠标悬停在页面上的元素上方即可查看任何块级元素的 CSS 框模型属性。
除在“检查”模式下查看框模型的可视化表示形式外,您还可在将鼠标悬停于“实时”视图的元素上方时使用 CSS Designer。
在“当前”模式下打开 CSS Designer,并将鼠标悬停在页面上的元素上方时,CSS Designer 中的规则和属性将自动更新,以显示该元素的规则和属性。
此外,与您将鼠标悬停其上的元素关联的任何视图或面板(例如“代码”视图、标签选择器、属性检查器等等)也会更新。
1、在文档窗口中打开文档后,请单击“视图”>“检查”。
注意:
如果尚未进入“实时视图”,则检查模式将自动启用该视图。
2、将鼠标悬停在页面上的元素上方以查看 CSS 框模型。检查模式对边框、边距、填充和内容高亮显示不同颜色。
3、(可选)按计算机键盘上的左箭头键,以高亮显示当前高亮显示的元素的父级。按右箭头键恢复对子元素进行高亮显示。
4、(可选)单击某个元素以锁定高亮显示的部分。
注意:
单击某个元素以锁定高亮显示的部分将关闭检查模式。

 

推荐阅读