[發明專利]一種動態生成HTML+CSS布局的方法及裝置

在審

• 申請號: 201910470180.2
• 申請日: 2019-05-31
• 公開（公告）號: CN110377281A
• 公開（公告）日: 2019-10-25
• 發明（設計）人: 劉飛;賀琦
• 申請（專利權）人: 江蘇聯盟信息工程有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 北京中南長風知識產權代理事務所(普通合伙) 11674
• 代理人: 鄭海

本發明涉及一種動態生成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中的多種。