如何创建流体网格布局

添加时间：2020-11-03 13:26:15   浏览次数： 次    【 大 中 小 】   打印   关闭窗口

 您可以在 Dreamweaver CC 2017 中编辑现有的流体网格布局。但是，您无法创建流体网格布局。 

 

相反，在 Dreamweaver CC 2017 中可使用 bootstrap 创建响应性布局。有关 Bootstrap 的详细信息，请参阅使用 Bootstrap 文件。

保定网站设计培训帮助大家了解一下：

 

选择“文件”>“流体网格”（传统）。

 

媒体类型的中央将显示网格中列数的默认值。要自定义设备的列数，请按需编辑该值。

 

要相对于屏幕大小设置页面宽度，请以百分比形式设置该值。

 

还可更改栏间距宽度。栏间距是两列之间的空间。

 

指定页面的 CSS 选项。

                                                                         

单击“创建”后，系统会要求您指定一个 CSS 文件。您可以执行以下操作之一：

 

创建新 CSS 文件。

打开现有 CSS 文件。

指定作为流体网格 CSS 文件打开的 CSS 文件。

默认情况下显示适用于移动电话的“流体网格”。此外，还显示“流体网格”的“插入”面板。使用“插入”面板中选项可创建您布局。

 

要改为设计用于其他设备的布局，请单击设计视图下方选项中的相应图标。

 

保存此文件。保存 HTML 文件时，系统提示您将依赖文件（如 boilerplate.css 和 respond.min.js）保存到计算机上的某个位置。指定一个位置，然后单击“复制”。

 

boilerplate.css 基于 HTML5 样板文件。该文件是一组 CSS 样式，可确保在多个设备上渲染网页的方式保持一致。respond.min.js 是一个 JavaScript 库，可帮助在旧版本的浏览器中向媒体查询提供支持。