[发明专利]一种动态生成HTML+CSS布局的方法及装置

说明书

本发明涉及一种动态生成HTML+CSS布局的方法及装置，其中，该方法包括：步骤1，基于预设或新建的应用场景生成外部框架模型；所述应用场景根据显示尺寸预设或新建；步骤2，基于预设或新建的布局方式在外部框架内搭建内部框架，生成HTML+CSS布局方案；所述布局方式包括表格布局、浮动布局、弹性布局、网络布局中的多种。本发明能够快速完成复杂页面的布局。

技术领域

本发明属于页面布局技术领域，尤其涉及一种动态生成HTML+CSS布局的方法及装置。

背景技术

在CSS还未广泛使用前，对页面布局的选择通常是使用HTML表格，把内容组织在行与列中，这种方式虽然能快速建立页面框架，但是如需修改就需要改动大量的HTML代码。CSS出现后使得内容(HTML)和表现(CSS)分离。随着CSS技术的逐渐成熟，越来越多的布局技术出现，各种前端技术框架也是层出不穷。

CSS提供了多种布局技术可以在页面中使用，需合理的使用才能使页面设计合理。在实际应用过程中一些简单列表可以通过一两个布局技术来实现，前端框架也提供了通用的页面布局技术，但是大多数页面需通过多种布局技术嵌套才能够完成，布局过程繁琐，效率较低，对于复杂页面的布局适用性较差。

发明内容

本发明的目的是提供一种动态生成HTML+CSS布局的方法及装置，以适用于复杂页面的布局，并提高页面布局的效率。

本发明提供了一种动态生成HTML+CSS布局的方法，包括：

步骤1，基于预设或新建的应用场景生成外部框架模型；应用场景根据显示尺寸预设或新建；

步骤2，基于预设或新建的布局方式在外部框架内搭建内部框架，生成HTML+CSS布局方案；布局方式包括表格布局、浮动布局、弹性布局、网络布局中的多种。

进一步地，步骤2还包括：

基于嵌套布局方式，在生成的HTML+CSS布局中新增布局；嵌套布局方式为：嵌套1层布局、嵌套2层布局…嵌套n层布局，n为自然数。

进一步地，步骤2还包括：

基于布局定位方式，进行布局定位；布局定位方式包括相对定位、绝对定位、固定定位、Z-index中的多种。

进一步地，步骤1还包括：

将预设的应用场景保存至预设布局表中和/或将新建的应用场景保存至个人布局表中。

进一步地，步骤2还包括：

将基于新建布局方式生成的HTML+CSS布局方案保存至个人布局表中和/或将基于预设布局方式生成的HTML+CSS布局方案保存至预设布局表中。

进一步地，在步骤2之后还包括：

输出页面布局图以及HTML+CSS代码。

本发明还提供了一种动态生成HTML+CSS布局的装置，包括：

框架模型生成模块，用于基于预设或新建的应用场景生成外部框架模型；所述应用场景根据显示尺寸预设或新建；

布局方案生成模块，用于基于预设或新建的布局方式在外部框架内搭建内部框架，生成HTML+CSS布局方案；所述布局方式包括表格布局、浮动布局、弹性布局、网络布局中的多种。

进一步地，所述布局方案生成模块基于嵌套布局方式，在生成的HTML+CSS布局中新增布局；所述嵌套布局方式为：嵌套1层布局、嵌套2层布局…嵌套n层布局，n为自然数。

进一步地，所述布局方案生成模块基于布局定位方式，进行布局定位；所述布局定位方式包括相对定位、绝对定位、固定定位、Z-index中的多种。