CN109284471A - 网页布局与维护的方法及系统 - Google Patents
网页布局与维护的方法及系统 Download PDFInfo
- Publication number
- CN109284471A CN109284471A CN201811319354.7A CN201811319354A CN109284471A CN 109284471 A CN109284471 A CN 109284471A CN 201811319354 A CN201811319354 A CN 201811319354A CN 109284471 A CN109284471 A CN 109284471A
- Authority
- CN
- China
- Prior art keywords
- file
- less
- maintenance
- selector
- layout
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Document Processing Apparatus (AREA)
Abstract
本发明公开了一种网页布局与维护的方法及系统。所述网页布局与维护的方法包括:新建Less文件,所述Less文件中包含前端界面布局的样式;在Html页面引入所述Less文件;在所述Html页面中引入Less插件,利用所述Less插件识别所述Less文件;将所述Less文件编译为Css文件。本发明在前端开发人员进行前端界面样式布局中定义多级选择器时,不需要在子选择器前重复写入父选择器名称,只需定义子选择器即可,显著提高了前端开发人员的布局与维护效率。
Description
技术领域
本发明涉及计算机技术领域,具体涉及前端开发技术,尤其涉及一种网页布局与维护的方法及系统。
背景技术
随着信息技术的发展,人们每天都要使用各种互联网产品。而前端开发的主要作用就是把网站或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文件:
<link rel="stylesheet/less"type="text/Css"href="less.less"/>
步骤13.在所述Html页面中引入Less插件,利用所述Less插件识别所述Less文件,所述引入Less插件的方式可以通过如下代码所实现:
<script src="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文件,具体引用方式可以通过如下代码实现:
<link rel="stylesheet/less"type="text/Css"href="less.less"/>
所述文件识别模块23用于在所述Html页面中引入Less插件,利用所述Less插件识别所述Less文件,所述引入Less插件的方式可以通过如下代码所实现:
<script src="less.js"type="text/javascript"></script>
所述文件编译模块24用于将所述Less文件编译为CSS文件,通过编译工具Webstorm或Koala将所述Less文件编译为Css文件,所述Css文件格式如下所述:
所述编译工具将所述Less文件自动编译成为Css格式,前端开发人员无需人为去写符合Css语言规则的代码,即无需在定义多级选择器时,在每个子选择器名称前再写入所有父选择器的名称,通过所述编译工具的自动编译,可自动生成符合Css语言规则的代码文件,因此大大减轻了前端编程人员的负担,也使得代码更易于维护。
虽然以上描述了本发明的具体实施方式,但是本领域的技术人员应当理解,这仅是举例说明,本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下,可以对这些实施方式做出多种变更或修改,但这些变更和修改均落入本发明的保护范围。
Claims (8)
1.一种网页布局与维护的方法,其特征在于,所述方法包括下述步骤:
S1.新建Less文件,所述Less文件包含前端界面布局的样式;
S2.在Html页面引入所述Less文件;
S3.在所述Html页面中引入Less插件,利用所述Less插件识别所述Less文件;
S4.将所述Less文件编译为Css文件。
2.如权利要求1所述的网页布局与维护的方法,其特征在于,所述S1中的前端界面布局的方式为:定义多级选择器,下级选择器嵌套于上级选择器之中。
3.如权利要求1所述的网页布局与维护的方法,其特征在于,所述S4通过编译工具Webstorm或Koala进行编译。
4.如权利要求3所述的网页布局与维护的方法,其特征在于,通过将Less文件所在的目录放入所述编译工具中进行自动编译,所述目录为Less文件的储存路径。
5.一种网页布局与维护的系统,其特征在于,包括:文件新建模块、文件引入模块、文件识别模块、文件编译模块;
所述文件新建模块用于新建Less文件,所述Less文件包含前端界面布局的样式;
所述文件引入模块用于在Html页面引入所述Less文件;
所述文件识别模块用于在所述Html页面中引入Less插件,利用所述Less插件识别所述Less文件;
所述文件编译模块用于将所述Less文件编译为Css文件。
6.如权利要求5所述的网页布局与维护的系统,其特征在于,所述文件新建模块中的前端界面布局的方式为:定义多级选择器,下级选择器嵌套于上级选择器之中。
7.如权利要求5所述的网页布局与维护的系统,其特征在于,所述文件编译模块通过编译工具Webstorm或Koala进行编译。
8.如权利要求7所述的网页布局与维护的系统,其特征在于,所述文件编译模块通过将Less文件所在的目录放入所述编译工具中进行自动编译,所述目录为Less文件的储存路径。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811319354.7A CN109284471A (zh) | 2018-11-07 | 2018-11-07 | 网页布局与维护的方法及系统 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811319354.7A CN109284471A (zh) | 2018-11-07 | 2018-11-07 | 网页布局与维护的方法及系统 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN109284471A true CN109284471A (zh) | 2019-01-29 |
Family
ID=65175156
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201811319354.7A Pending CN109284471A (zh) | 2018-11-07 | 2018-11-07 | 网页布局与维护的方法及系统 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN109284471A (zh) |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106598616A (zh) * | 2016-12-21 | 2017-04-26 | 福建中金在线信息科技有限公司 | 一种Less库的封装方法及装置 |
CN106649794A (zh) * | 2016-12-28 | 2017-05-10 | 北京奇虎科技有限公司 | 图片合成方法及装置 |
CN106843869A (zh) * | 2017-01-16 | 2017-06-13 | 百融(北京)金融信息服务股份有限公司 | 一种前端开发工程化系统和方法 |
-
2018
- 2018-11-07 CN CN201811319354.7A patent/CN109284471A/zh active Pending
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106598616A (zh) * | 2016-12-21 | 2017-04-26 | 福建中金在线信息科技有限公司 | 一种Less库的封装方法及装置 |
CN106649794A (zh) * | 2016-12-28 | 2017-05-10 | 北京奇虎科技有限公司 | 图片合成方法及装置 |
CN106843869A (zh) * | 2017-01-16 | 2017-06-13 | 百融(北京)金融信息服务股份有限公司 | 一种前端开发工程化系统和方法 |
Non-Patent Citations (1)
Title |
---|
懒得安分: "CSS系列—前端进阶之路:初涉Less", 《博客园》 * |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110235122B (zh) | 用于将web内容转化为可重复使用的模板和组件的系统和方法 | |
CN105893014A (zh) | 用于前端的项目开发方法及系统 | |
US5940615A (en) | Programming aid for enabling a computer program in source code form to be viewed using a general purpose document browser | |
CN109634588A (zh) | 一种兼容多浏览器的Office文档在线编辑方法和系统 | |
CN107015903B (zh) | 一种界面测试程序的生成方法、装置及电子设备 | |
CN102495882B (zh) | Java环境下页面对象与数据库字段绑定的实现系统和方法 | |
CN105786788B (zh) | 一种利用word程序生成表单的方法和装置 | |
CN106649794A (zh) | 图片合成方法及装置 | |
CN106095674B (zh) | 一种网站自动化测试方法和装置 | |
Loudon | Developing Large Web Applications: Producing Code That Can Grow and Thrive | |
CN105159900B (zh) | 多媒体数据编辑方法和编辑器 | |
CN109284471A (zh) | 网页布局与维护的方法及系统 | |
Stamey et al. | The aspect-oriented web | |
CN113656000B (zh) | 网页的处理方法和装置 | |
KR100261265B1 (ko) | 웹 문서 저작을 위한 장치 및 그 운용 방법 | |
CN103246680A (zh) | 一种在浏览器中将网页内容聚合展现的方法及装置 | |
US9311059B2 (en) | Software development tool that provides context-based data schema code hinting | |
US20200201937A1 (en) | System and method for generating updatable structured content | |
Radford | Learning Web Development with Bootstrap and AngularJS | |
Aguiar et al. | XSDoc: an Extensible Wiki-based Infrastructure for Framework Documentation. | |
US6317759B1 (en) | Method and apparatus for providing an applications development system for internet based applications | |
Lingam et al. | Supporting end-users in the creation of dependable web clips | |
Rilling et al. | Traceability in software engineering–past, present and future | |
Neumann et al. | Web-Scraping for non-programmers: Introducing OXPath for digital library metadata harvesting | |
Temere | Responsive web application using Bootstrap and Foundation: Comparing Bootstrap and Foundation Frontend Frameworks |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190129 |