html5框架布局,html5 设计布局

HTML5开发常见的7个框架，不可不知！

1、Siimpler

Siimpler 是个简单的 HTML 开发框架，他可以通过选择你自己喜欢的部分，来帮助你迅速又简单地创建 HTML5 开发结构。网络设计者们也可以通过使用 Siimpler 框架类的文件和文件夹来无缝的开始一个 Web 项目。

2、Ionic

Ionic 是个神奇的框架和强大前端开源系统，使用先进的Web技术，比如CSS、HTML 和 JS 来创建令人惊叹的手机应用。

3、Foundation

Foundation 是世界上精妙的前端响应框架，同时，它可以兼容所有的浏览器和网络设备。Foundation 拥有移动友好型的用户接口，设置了许多关键特性。

4、Enyo

Enyo是一个开源的 Jaa 框架，该框架能够让你创建顶级的 HTML5 应用程序，该应用程序能够运行在各种各样的电子设备上，比如说手机、台式机、笔记本、电视以及Web应用。

5、LimeJS

针对于所有的新的桌面浏览器和触屏设备，LimeJS 对于有用户经验的游戏开发者而言是教好的和较强大的开发框架。

6、Bootstrap

Bootstrap能让所有开发者都能迅速上手、所有设备都可以适配、所有项目都适用。此外，bootstrap的官网也有很多教程提供。

7、juery UI

juery UI 主要分为交互、微件和效果库3个部分，主打代码开源，操作继承了juery 的简单特性，兼容各主流桌面浏览器。

前端HTML5是当下很多企业都会用到的软件开发，HTML5是移动互联网前端的主流开发语言，目前还没有任何一种前端开发技术能够取代HTML5。因此，无论是PC端还是APP端的应用，前端样式都离不开HTML5.

以上就是小编今天的分享，希望对大家有所帮助，想要了解更多相关内容，欢迎关注我们!

相关问答

Q1: 怎么搭建html5 bootstrap框架布局

如何使用Bootstrap

针对 Bootstrap 的 HTML

清单 • 是一个有用的框架 HTML 文件，用于结合使用 Bootstrap 与一个固定布局和响应特性：

清单 • 用于 Bootstrap 项目的基本框架 HTML 文件 (listing1.html)

缩小版本

在 Bootstrap 下载中，请注意，每个 CSS 和 JavaScript 文件有两个版本可用(例如 bootstrap.js 和 bootstrap.min.js)。第一种形式是一个常规文件，第二种形式是压缩文件或 “缩小文件”。就像在本文中一样，使用缩小版本即可实现最有效的页面加载。

listing1.html 的开始之处的 DOCTYPE 声明将其标记为一个 HTML5 文件。head 元素内的 meta标记控制移动的小屏幕布局。(为方便起见，我将它们称作 meta/viewport 标记。)默认情况下，大多数移动设备按比例缩小 Web 页面，使之适应屏幕大小，就像在桌面浏览器窗口中一样。这就是为什么许多网站上的文本和图像在手机浏览器中看起来很小的原因。meta/viewport 声明中的 initial-scale=1.0 部分禁用了这一行为，告诉设备要保持页面的原有尺寸。该声明表示 Web 设计人员(在本例中为 Bootstrap)已经完成了实现较小屏幕的响应式设计这一任务，所以在默认情况下，没必要采用蛮力方法。

Q2: html5页面怎么布局

1）像span这样的行内标记，定义它的margin-top和margin-bottom是无效的，除非你把它设置为块状元素才可以。Display:block

2）对于块状元素，你可以自由的使用外边距来定义版式和元素之间的距离。类似 DIV 等等，

3）无论什么元素，一旦设置为是浮动显示，就拥有了完整的盒模型结构，我们就可以使用外边距，内边距，边框，高和宽来控制的大小以及与其他对象之间的位置关系。

4）浮动是从网页布局的角度来定义元素的显示，而行内和块状属性主要是从元素自身的性质来定其显示的。

5）当元素没有定义边框时，可以把内边距作为外边距使用。有时候外边距会有重叠现象的。

6）当为元素定义背景图像时，内边距区域内可以显示背景图像，而对外边距区域来说，背景图像是达不到的，他永远都是透明状态

7）用div+css设计网页结构时，设计师满脑子都是网页内容，而非内容所呈现的效果。

8）块状元素：不管块状元素宽度是多少，他总会自动占据一行，因为在他末尾附加了一个换行符，而行内元素没有这个特点。块状元素有完整的盒模型结构，可以定义宽度和高度，而行内元素没有这个特性，无法通过高度来改变文本行的行高。

块元素的代表标记 div

行内元素的代表标记 span ，行内标记不具备组织结构框架

9）网页布局分为：自然布局，浮动布局， 定位布局

10）当一个元素被定义为浮动显示时，即定义为块状元素。并且该元素就会收缩自身体积为最小状态。所以，应该有个好的习惯即把浮动元素设置高和宽。如果没有设置，则元素会按照它所包含的内容大小来确定它的大小。

11）当元素浮动后，周边的对象会自动环绕浮动元素周围，形成一种环绕关系。

12）块状元素之间的外边距会有重叠现象，但是浮动元素之间的外边距不会发声重叠现象。

13）浮动元素移动，上移：margin-top:-**; 下移：margin-botom:-*px,其他以此类推。

14）一般定位元素（绝对或是相对元素）都会覆盖在文档流对象之上。但是，select元素的窗口控件还不完全支持z-index

15）在css定位布局中，一般遵循“外部相对定位，内部绝对定位”

16）在body中设置min-width:760px,可以避免布局重叠现象。

Q3: 比较常用，成熟的针对html5的UI框架是哪些

1.Aliceui

Aliceui是支付宝的样式解决方案，是一套精选的基于 spm 生态圈的样式模块集合，是 Arale 的子集，也是一套模块化的样式命名和组织规范，是写 CSS 的更好方式。

2.Amazeui

Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。

3.sui

SUI是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。

通过SUI，可以非常方便的设计和实现精美的页面。

同时sui还有移动端版本msui，msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库，减少重复工作。

4.FrozeUI

Frozen UI是一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。

5.uiKit

uiKit是一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。

6.H-ui

H-ui是轻量级前端框架，简单免费，兼容性好，适用于中国网站。

7.Weui

weUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

8.layui

Layui 诞生于2016年金秋，是一款带着浓烈情怀的国产前端UI框架，她追求极简，又不失丰盈的内在，说她是史上最轻量的结晶，似乎并不为过。一切都源自于她对原生态的执着，对前端社区的那些噪杂声音的过滤，以及她本身的精心雕琢。

9.YDUI Touch

YDUI Touch 专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高;使用 Flex 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局;实现强大的屏幕适配布局，等比例适配所有屏幕。什么？用得不开心？轻松切换 px;自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。

Q4: 手机html5前端开发用什么框架

jquery mobile和bootstrap都是较好的框架。为了使用便利，下文列举了目前最强大应用最广泛的几款前端开发框架。

1. Bootstrap

Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美，直观并且给力的web设计工具包，可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件，栅格系统以及一些常用的JavaScript插件。

2. Fbootstrapp

Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML，包括排版、表单、按钮、表格、栅格、导航等等，风格与Facebook类似。

3. BootMetro

BootMetro框架的灵感来自于Metro UI CSS，基于Bootstrap 框架构建，用于创建Windows 8 的Metro风格的网站。它包括所有Bootstrap的功能，并添加了几个额外的功能，比如页面平铺，应用程序栏等等。

4. Kickstrap

Kickstrap是Bootstrap的一个变体。它基于Bootstrap，并在它的基础上添加了许多app，主题以及附加功能。这使得这个框架可以单独地用于构建网站，而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上，然后用就可以了。

5. Foundation

Foundation 是一款强大的，功能丰富的并且支持响应式布局的前端开发框架，你可以通过Foundation快速创建原型，利用它所包含的大量布局框架，元素以及最优范例快速创建在各种设备上可以正常运行的网站以及app。Foundation在构建的时候秉承移动优先的策略，它拥有大量实用的语义化功能，并且使用Zepto类库来取代jQuery，这样可以带来更好的用户体验，并且提高运行的速度。

6. GroundworkCSS

GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一个高级响应式的HTML5，CSS以及JavaScript工具包，可以用于快速创建原型并且建立在各种浏览设备上可以正常工作的网站和app。

7. Gumby

Gumby 是一款基于Sass和Compass的简单灵活并且稳定的前端开发框架。

它的流式-固定布局（fluid-fixed layout）可以根据桌面端以及移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局，包括多列混杂的嵌套模式。Gumby提供两套PSD的模板，方便你在12列和16列的网格系统上进行设计。

8. HTML KickStart

HTML Kickstart 是一款可以用来方便创建任何布局的集合HTML5，CSS和jQuery的工具包。它提供了干净，符合标准以及跨浏览器兼容的代码。

9. IVORY

IVORY 是一款轻量，简单但是强大的前端框架，可以用于320到1200像素宽度的响应式布局。它基于12列的响应式网格布局，包含表格，按钮，表格，分页，拨动开关，工具提示，手风琴，选项卡等网站中常用的组件和样式。

10.Kube

最后，如果你的新项目需要一款实在的，不需要复杂的额外功能组件的，足够简单的框架，那么 Kube 将会是你正确的选择。Kube是一款最小化的，支持响应式的前端框架，它没有强加的样式设计，因此给了你充分的自由来开发自己的样式表。它提供了一些web元素的基本样式，比如网格，表单，排版，表格，按钮，导航，链接以及图片等等。

Q5: HTML5有哪些主流框架

对于参加杭州Web前端培训班的人来说，他们的课程安排是从基础到进阶，并由专业的老师引导教学。在具备一定的理论基础之后，还需要学习前端框架，目的是减少重复的劳动，提高工作效率并增加安全性，而这也是很多企业在面试过程中经常提问的知识点。今天就给大家介绍一下Web前端三大主流框架。

目前比较流行的前端三大框架是Angular、React、Vue，三者各有所长。

1、Angular

Angular是一个JavaScript框架，最为核心的是：MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。Angular通过指令扩展了HTML，以一个 JavaScript文件形式发布，通过script标签添加到网页中。Angular的优势在于：零配置、深度整合设计模式、约定才是框架的本质。不过对于JavaScript工程师来说，少有工程化的经验，学习起来会比较痛苦。

2、React

React是一个Facebook和Instagram用来创建用户界面的JavaScript库，用于构建页面、Javascript库。主要功能是对DOM操作，声明式设计，更快的开发出Web应用系统。借助React，你可以非常轻松地创建用户交互界面，为你应用的每一个状态设计简洁的视图。在数据改变时，React也可以高效地更新渲染界面。

3、Vue

Vue是用于构建交互式的Web界面的库，它提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲，Vue集中在MVVM模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的DOM操作和输出格式被抽象出来成指令和过滤器，相比其它的MVVM框架，Vue更容易上手。

综上所述，在大型超大型Web应用开发上比较看好Angular，个性化需求、中型应用更倾向选择React，在小型应用上则看好Vue。当然不同企业会有不同的需求，所选用的框架也不一样，但只要你具备扎实的理论基础，就可以很快上手这些框架。