[发明专利]网页布局与维护的方法及系统

说明书

本发明公开了一种网页布局与维护的方法及系统。所述网页布局与维护的方法包括：新建Less文件，所述Less文件中包含前端界面布局的样式；在Html页面引入所述Less文件；在所述Html页面中引入Less插件，利用所述Less插件识别所述Less文件；将所述Less文件编译为Css文件。本发明在前端开发人员进行前端界面样式布局中定义多级选择器时，不需要在子选择器前重复写入父选择器名称，只需定义子选择器即可，显著提高了前端开发人员的布局与维护效率。

技术领域

本发明涉及计算机技术领域，具体涉及前端开发技术，尤其涉及一种网页布局与维护的方法及系统。

背景技术

随着信息技术的发展，人们每天都要使用各种互联网产品。而前端开发的主要作用就是把网站或APP(应用程序)的界面更好地呈现给人们，从而吸引用户。

Css指代层叠样式列表，其是用来定义如何显示HTML(超文本标记语言)中的元素，实现网页静态或者动态布局的一种计算机程序语言。Css能对网页中元素的位置以及排版格式进行控制，并且支持几乎所有的字体样式，因此成为前端开发中使用的一种主要计算机语言。

在Css中如需要实现格式间的嵌套，则在定义类名时，需要在每个子类前写入父类，如果存在多重嵌套的情况，可能对开发人员的编写与维护造成一定的干扰。

发明内容

本发明要解决的技术问题是为了克服现有技术中用Css布局页面嵌套繁琐的缺陷，提供一种方便快速网页布局与维护的方法及系统。

本发明是通过下述技术方案来解决上述技术问题：

一种网页布局与维护的方法，所述网页布局与维护的方法包括下述步骤：

S1.新建Less文件(一种Css预处理语言)，所述Less文件包含前端界面布局的样式；

S2.在Html页面引入所述Less文件；

S3.在所述Html页面中引入Less插件，利用所述Less插件识别所述Less文件；

S4.将所述Less文件编译为Css文件。

较佳地，所述S1中的前端界面布局的方式为：定义多级选择器，下级选择器嵌套于上级选择器之中。

较佳地，所述S4通过编译工具Webstorm(一款前端开发工具)或Koala(一款前端开发工具)进行编译。

较佳地，通过将Less文件所在的目录放入所述编译工具中进行自动编译，所述目录为Less文件的储存路径。

一种网页布局与维护的系统，所述网页布局与维护的系统包括：文件新建模块、文件引入模块、文件识别模块、文件编译模块；

较佳地，所述文件新建模块中的前端界面布局的方式为：定义多级选择器，下级选择器嵌套于上级选择器之中。

较佳地，所述文件编译模块通过编译工具Webstorm或Koala进行编译。

较佳地，所述文件编译模块通过将Less文件所在的目录放入所述编译工具中进行自动编译，所述目录为Less文件的储存路径。

本发明的积极进步效果在于：

前端开发人员在撰写前端界面布局代码时，不需要按照Css语言的繁琐方式，即在嵌套选择器时，需在子选择器名称前写入每一父选择器名称，本发明前端开发人员在嵌套选择器时，只需要单独写出子选择器即可，大大加快了前端开发人员的开发效率，减少前端开发人员的开发及维护时间。

附图说明

图1为实施例1的一种网页布局与维护的方法的流程图。

图2为实施例2的一种网页布局与维护的系统的示意框图。