网页布局与维护的方法及系统与流程

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

背景技术：

随着信息技术的发展，人们每天都要使用各种互联网产品。而前端开发的主要作用就是把网站或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的一种网页布局与维护的系统的示意框图。

具体实施方式

下面通过实施例的方式进一步说明本发明，但并不因此将本发明限制在所述的实施例范围之中。

实施例1

本实施例提供了一种网页布局与维护的方法，所述方法可以但不限于用于前端网页开发中，所述网页布局与维护的方法可以帮助前端开发人员通过引入插件，高效、快速的开发与维护前端代码。

图1示出了一种网页布局与维护的方法的流程图，其包括：

步骤11.新建less文件，所述less文件包含前端界面布局的样式，所述前端界面布局的方式为：定义多级选择器，下级选择器嵌套于上级选择器之中，所述样式格式可以通过以下代码实现：

前端开发人员可以如上述样式格式进行开发，更清楚、简洁地进行前端界面布局。

步骤12.在html页面通过以下代码引入所述less文件：

<linkrel＝"stylesheet/less"type＝"text/css"href＝"less.less"/>

步骤13.在所述html页面中引入less插件，利用所述less插件识别所述less文件，所述引入less插件的方式可以通过如下代码所实现：

<scriptsrc＝"less.js"type＝"text/javascript"></script>

步骤14.将所述less文件编译为css文件，通过编译工具webstorm或koala将所述less文件编译为css文件，所述css文件格式如下所述：

所述编译工具将所述less文件自动编译成为css格式，前端开发人员无需人为去写符合css语言规则的代码，即无需在定义多级选择器时，在每个子选择器名称前再写入所有父选择器的名称，通过所述编译工具的自动编译，可自动生成符合css语言规则的代码文件，因此大大减轻了前端编程人员的负担，也使得代码更易于维护。

实施例2

图2示出了本发明实施例2的一种网页布局与维护的系统的示意框图，所述系统可以但不限于用于前端网页开发中，所述网页布局与维护的系统可以帮助前端开发人员通过引入插件，高效、快速的开发与维护前端代码。所述网页布局与维护的系统包括：文件新建模块21、文件引入模块22、文件识别模块23、文件编译模块24；

所述文件新建模块21用于新建less文件，所述less文件包含前端界面布局的样式，所述前端界面布局的方式为：定义多级选择器，下级选择器嵌套于上级选择器之中，所述前端界面布局样式可以通过以下代码实现：

前端开发人员可以如上述样式格式进行开发，更清楚、简洁地进行前端界面布局。

所述文件引入模块22用于在html页面引入所述less文件，具体引用方式可以通过如下代码实现：

<linkrel＝"stylesheet/less"type＝"text/css"href＝"less.less"/>

所述文件识别模块23用于在所述html页面中引入less插件，利用所述less插件识别所述less文件，所述引入less插件的方式可以通过如下代码所实现：

<scriptsrc＝"less.js"type＝"text/javascript"></script>

所述文件编译模块24用于将所述less文件编译为css文件，通过编译工具webstorm或koala将所述less文件编译为css文件，所述css文件格式如下所述：

所述编译工具将所述less文件自动编译成为css格式，前端开发人员无需人为去写符合css语言规则的代码，即无需在定义多级选择器时，在每个子选择器名称前再写入所有父选择器的名称，通过所述编译工具的自动编译，可自动生成符合css语言规则的代码文件，因此大大减轻了前端编程人员的负担，也使得代码更易于维护。

虽然以上描述了本发明的具体实施方式，但是本领域的技术人员应当理解，这仅是举例说明，本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下，可以对这些实施方式做出多种变更或修改，但这些变更和修改均落入本发明的保护范围。