当前位置:首页> 正文

Dreamweaver CC教程:CSS布局块

Dreamweaver CC教程:CSS布局块

Dreamweaver CC教程:CSS布局块

CSS 布局块
在“设计”视图中工作时,可以使 CSS 布局块可视化。CSS 布局块是一个 HTML 页面元素,您可以将它定位在页面上的任意位置。更具体地说,CSS 布局块是不带 display:inline 的 div 标签,或者是包括 display:block、position:absolute 或 position:relative CSS 声明的任何其他页面元素。下面是几个在 Dreamweaver 中被视为 CSS 布局块的元素的示例:

div 标签 指定了绝对或相对位置的图像 指定了 display:block 样式的 a 标签 指定了绝对或相对位置的段落

注意:
出于可视化呈现的目的,CSS 布局块不包含内联元素(即代码位于一行文本中的元素)或段落等简单块元素。
Dreamweaver 提供了多个可视化助理,以供查看 CSS 布局块。例如,在设计时可以为 CSS 布局块启用外框、背景和框模型。将鼠标指针移动到布局块上时,也可以查看显示有选定 CSS 布局块属性的工具提示。
下面的 CSS 布局块可视化助理列表描述 Dreamweaver 为每个助理呈现的可视化内容:
CSS 布局外框
显示页面上所有 CSS 布局块的外框。
CSS 布局背景
显示各个 CSS 布局块的临时指定背景颜色,并隐藏通常会出现在页面上的任何其他背景颜色或图像。
每次启用可视化助理查看 CSS 布局块背景时,Dreamweaver 都会自动为每个 CSS 布局块分配一种不同的背景颜色。(Dreamweaver 使用一个算法过程选择颜色 — 您无法自行指定颜色。)指定的颜色在视觉上与众不同,可帮助您区分不同的 CSS 布局块。
CSS 布局框模型
显示所选 CSS 布局块的框模型(即填充和边距)。

查看 CSS 布局块

如果需要,可以启用或禁用 CSS 布局块可视化助理。要查看所有 CSS 布局块,请选择“查看”>“设计视图选项”>“可视化助理”。
您可以启用或禁用 CSS 布局背景、CSS 布局框模型和 CSS 布局外框。

 

展开全文阅读

相关内容