当前位置:首页 > 网站制作 > Html/CSS教程 > 正文

可视化CSS布局块

  • 2011-06-05
  • 来源:阿龙网
  • 作者:
  • 人气:0
  • 评论:0
可视化CSS布局块 在“设计”视图中工作时,可以使CSS布局块可视化。CSS布局块是一个HTML页面元素,您可以将它定位在页面上的任意位置。更具体地说,CSS布局块是不带display:inline的div标签,或者是包括display:block、position:absolute或position:relativeCSS声明的任何其它页面元素。下面是几个在Dreamweaver中被视为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 布局背景”。
查看 CSS 布局块框模型
 选择“查看”>“可视化助理”>“CSS 布局框模型”。
通过单击“文档”工具栏上的“可视化助理”按钮,也可以使用 CSS 布局块可视化助理选项。

将可视化助理与非 CSS 布局块元素配合使用
可以使用设计时间样式表来显示通常未被视为 CSS 布局块的元素的背景、边框或框模型。为此,必须首先创建设计时间样式表,此表会将 display:block 属性分配给相应页面元素。

创建外部 CSS 样式表,方法是:选择“文件”>“新建”,然后在“类别”列中选择“基本页”,在“基本页”列中选择“CSS”,然后单击“创建”。
在新样式表中,创建规则,这些规则会将 display:block 属性分配给要显示为 CSS 布局块的页面元素。
例如,如果要显示段落和列表项目的背景颜色,可以创建具有以下规则的样式表:

p{
display:block;
}
li{
display:block;
}
保存此文件。
在“设计”视图中,打开要附加新样式的页面。
选择“格式”>“CSS 样式”>“设计时间”。
在“设计时间样式表”对话框中,单击“只在设计时显示”文本框上方的加号 (+) 按钮,选择刚才创建的样式表,然后单击“确定”。
单击“确定”以关闭“设计时间样式表”对话框。
样式表将附加到文档中。如果使用上面的示例创建了样式表,则会使用 display:block 属性对所有段落和列表项目进行格式设置,从而允许对段落和列表项目启用或禁用 CSS 布局块可视化助理。

相关推荐

网友评论

共有0条评论

您的评论需要经过审核才能显示!

热门评论

热门排行

图文信息

相关专题

最新信息