1、创建步骤不同
创建流体网格布局
1）选择“文件”>“新建流体网格布局”。
2）媒体类型的中央将显示网格中列数的默认值。要自定义设备的列数，请按需编辑该值。
3）要相对于屏幕大小设置页面宽度，请以百分比形式设置该值。
4）还可更改栏间距宽度。栏间距是两列之间的空间。
5）指定页面的 CSS 选项。
单击“创建”后，系统会要求您指定一个 CSS 文件。您可以执行以下 *** 作之一：
默认情况下显示适用于移动电话的“流体网格”。此外，还显示“流体网格”的“插入”面板。使用“插入”面板中选项可创建您布局。
要改为设计用于其它设备的布局，请单击设计视图下方选项中的相应图标。
创建新 CSS 文件。
打开现有 CSS 文件。
指定作为流体网格 CSS 文件打开的 CSS 文件。
6）保存此文件。保存 HTML 文件时，系统提示您将依赖文件（如 boilerplate.css 和 respond.min.js）保存到计算机上的某个位置。指定一个位置，然后单击“复制”。
boilerplate.css 基于 HTML5 样板文件。该文件是一组 CSS 样式，可确保在多个设备上渲染网页的方式保持一致。respond.min.js 是一个 JavaScript 库，可帮助在旧版本的浏览器中向媒体查询提供支持。
2、HTML5的方法：
HTML 布局 - 使用表格
使用 HTML <table>标签是创建布局的一种简单的方式。
可以使用 <div>或者 <table>元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
提示：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99width:100pxtext-align:top">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEEheight:200pxwidth:400pxtext-align:top">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbbtext-align:center">
Copyright W3School.com.cn</td>
</tr>
</table>
</body>
</html>
亲爱的提问朋友，html5中常用的两种绘图元素是：Canvas和SVG。他们都是html5中支持在画布上绘制图形和放入图片的。
Canvas 是H5新出来的标签<canvas></canvas>
Canvas画布，利用JavaScript在网页绘制图像
在标签中给上宽高：<canvas width="800" height="800"></canvas>
SVG 可缩放矢量图形（Scalable Vector Graphics），基于可扩展标记语言XML 出来的时间比较老
SVG 用来定义用于网格的基于矢量的图形。
1. Twitter BootStrap （Apache v2.0；响应式）时髦、直观并且强大的前端框架，让Web开发变得更加容易。
2. Foundation （MIT；响应式）
最先进的响应式前端框架。
3. 960gs（GPL&MIT；响应式）
960gs提供了一个简单的网格系统，适合快速开发。
4. Skeleton（MIT；响应式）
非常漂亮的Web模板，适合响应式、移动友好的开发。
5. 99lime HTML KickStart（Free）
适合网站快速开发的极简HTML构建模块。
6. Kube（Free；响应式）
面向专业人员的CSS框架。
7. Less Framework（MIT；响应式）
自适应的CSS网格系统。
8. Flameinwork（Free）
适合懒人开发者的前端微框架。
9. G5 Framework（Free）
(x)HTML5、CSS、PHP前端开发框架。
10. Easy Framework（Free）
Easy Framework是一个一体化前端解决方案，分structural、 presentational、interactive三层。
11. Blueprint（Free）
一个旨在减少开发时间的前端框架。
12. YAML（Creative Commons）
(x)HTML+CSS框架，适合开发现代化浮动布局。
13. BlueTrip（Free）
一个功能全面、并且美丽的CSS框架，适合于Blueprint搭配使用。
14. YUI3:Grids CSS（BSD）
YUI Grids CSS是最著名的CSS框架之一，是由Yahoo开发小组开发而成。 YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度，六种不同的模板。
15. 52framework（Creative Commons）
对HTML5支持非常好，简单易用。
16. elastiCSS（MIT）
一个基于Web接口和印刷布局的简单CSS框架。
17. Emastic（Free）
一个与众不同的CSS框架。
18. Fluid 960 Gride System（GPL/MIT）
Fluid 960 Grid System的模版是根据Nathan Smith之前的作品而创建的。即960 Grid System：传承了MooTools和jQuery JavaScript libraries的效果。
19. xCSS（MIT）
一个面向对象的CSS框架，能让你的工作流更加简洁。xCSS基于CSS，可以在开发复杂样式时，提供面向对象的工作流。
20. EM CSS Framework（MIT/GPL）
EM CSS Framework提供了一个960px宽 + 12 列网格系统 + CSS的通用样式。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）