CN110489117A - 一种网页布局方法及装置 - Google Patents

Abstract

本发明涉及一种网页布局方法及装置，其中一种页面布局方法，所述方法包括：确定页面布局的表现形式；根据确定的所述表现形式，利用flex属性配置布局样式；利用所述布局样式布局页面。通过本发明的方法及装置，有效地提高了网页开发效率。

Description

一种网页布局方法及装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种网页布局方法及装置。

背景技术

最初在进行网页设计时，采用了超文本标记语言(Hyper Text Markup Language，简称：HTML)。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

但是，随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。为了解决这种问题，万维网联盟(World Wide Web Consortium，简称：W3C)开发了层叠样式表(CascadingStyle Sheets，简称：CSS)。CSS作为一种计算机标记语言，其在标准网页设计中负责网页内容的表现，CSS能够对网页中各个显示对象的位置排版进行精确控制，支持几乎所有的字体、字号、样式。

目前在设计网页时一般采用HTML结合CSS代码进行编辑，有效地提高了网页设计的效率。

随着新网页开发需求的增加和用户查看网页习惯的形成，移动终端或台式电脑上很多网页的功能大同小异。如图1是示出了一种根据现有技术的网页设计的布局示意图。如图所示，在网页布局中，左上面一栏设有APP下载、地理位置、天气等显示内容；右上面一栏设有用户登录、问题反馈以及网页关闭等选项卡。在网页正文部分有“推荐”、“热点”、“图片”、“科技”、“娱乐”、“游戏”等选项卡，这些选项卡的右侧显示选项卡对应的信息内容。

在网页布局开发设计过程中，每次开发新网页时，虽然每次实现的功能具有很大的相似性，但都得从头写一遍实现布局的代码。

因此，在网页设计时对于相似的布局，会编写重复性的样式代码。这种设计方式存在的问题是，在页面开发时，布局排版会占用较多时间，降低了网页开发的效率。

发明内容

针对现有技术中网页布局开发效率低的问题，本发明公开了一种网页布局方法及网页布局装置。

一种页面布局方法，所述方法包括：

步骤1、确定页面布局的表现形式；

步骤2、根据确定的所述表现形式，利用flex属性配置布局样式；

步骤3、利用所述布局样式布局页面。

进一步地，所述步骤1中所述表现形式包括：左对齐、右对齐、水平居中、垂直居中、水平垂直居中、一行自适应多个图文展示、一左一右两端对齐、一行左边固定、右边补齐、一行右边固定左边补齐、一行左右边固定中间补齐中的一个或多个。

进一步地，在所述步骤2中，在flex容器中将内部网页元素转换为flex项目。

进一步地，在所述步骤2中，基于所述flex容器的水平轴和交叉轴确定flex项目的位置。

进一步地，在所述步骤2中，在flex项目中确定flex项目的尺寸和大小。

进一步地，所述步骤2中利用flex属性配置布局样式具体为：

定义显示框类型；

确定盒子能够兼容的浏览器；

确定显示框属性；

根据显示框类型、显示框属性确定布局样式。

进一步地，利用CSS选择器选取父元素的直接元素。

一种页面布局装置，所述装置包括：

确定单元，用于确定页面布局的表现形式；

配置单元，用于从确定单元中获得所述表现形式，并利用flex属性配置布局样式；

布局单元，用于利用所述配置单元的布局样式布局页面。

进一步地，所述配置单元，还用于基于所述flex容器的水平轴和交叉轴确定flex项目的位置和/或大小。

一种页面布局装置，所述页面布局装置包括处理器、存储器，所述处理器与所述存储器通过总线相连接，其中，

所述存储器中存储计算机程序代码，所述处理器执行存储器中的计算机程序代码以执行上述任一项所述的方法。

通过本发明的技术方案，在相似性网页开发过程中使用了统一布局样式的代码，有效地提高了网页开发效率。本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在说明书、权利要求书以及附图中所指出的结构来实现和获得。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示出了根据现有技术的一种网页设计的布局展示示意图；

图2示出了根据本发明实施例的一种网页布局方法基本流程图；

图3示出了根据本发明实施例的容器结构概念示意图；

图4示出了根据本发明实施例的根据左边自动补齐布局样式形成的页面结构效果图；

图5示出了根据本发明实施例的根据两端对齐布局样式形成的页面结构效果图；

图6示出了根据本发明实施例的一种页面布局装置结构图；

图7示出了根据本发明实施例的另一种页面布局装置结构图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地说明。显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例中，对网页排版布局的左对齐、右对齐等各种表现形式进行抽象，形成多种表现形式。根据抽象形成的多个表现形式来编写布局样式，用CSS中的flex(flexible box，简称：弹性布局盒模型)弹性布局可实现布局，自动补齐、等比划分等多种页面容器。最后，根据页面的设计图划分页面的布局形式，然后用上面写好的布局样式来编写页面。

如图2示出了根据本发明实施例的页面布局方法基本流程图。如图所示页面布局方法可以包括如下步骤：

步骤1、确定网页布局的表现形式。

网页由网页元素组成，网页元素包括文字、图片、音频、动画、视频等各种元素。为了网页页面的美观，需要对上述网页元素进行布局。网页排版布局中各个网页元素的布置存在多种表现形式，包括左对齐；右对齐；水平居中；垂直居中；水平垂直居中；一行自适应多个图文展示；一左一右，两端对齐；一行左边固定，右边补齐；一行右边固定，左边补齐；一行左右边固定，中间补齐等。

在网页排版设计时，首先根据需求确定网页布局的表现形式。不失一般性，本发明实施例以确定左边自动补齐的表现形式和两端对齐的表现形式为例进行示例性说明。

步骤2、根据确定的网页布局表现形式，利用CSS中的flex属性配置布局样式。

本发明实施例中采用了flex布局容器(flex container)来配置布局样式。在flex容器中，内部的网页元素自动成为flex项目(flex item)。图3示出了根据本发明实施例的容器结构概念示意图，如图3所示，flex布局容器拥有两根隐形的轴，分别是水平的主轴(main axis)和竖直的交叉轴(cross axis)。主轴开始的位置，即主轴与左边框的交点，称为主轴起点(main start)；主轴结束的位置，即主轴与右边框的交点，称为主轴终点(mainend)；交叉轴开始的位置，即交叉轴与上边框的交叉点，称为交叉轴起点(cross start)；交叉轴结束的位置，交叉轴与下边框的交叉点，称为交叉轴终点(cross end)。Flex项目按主轴或交叉轴排列，Flex项目在主轴方向上占据的宽度称为项目主轴宽度(main size)，在交叉轴方向上占据的宽度称为项目交叉轴宽度(cross size)。通过所述主轴宽度和所述交叉轴宽度可以确定所述项目的大小，而且可以基于主轴和交叉轴对项目进行设置，以确定Flex项目在网页中的相对位置。

本发明实施例根据上述felx容器的结构设置网页元素的布局样式。不失一般性，以网页元素左边自动补齐和两端对齐两种表现形式为例进行示例性说明。

对于左边自动补齐的表现形式，利用CSS中的flex属性设置网页元素左边自动补齐布局代码：建立类l-r-r

其中，上述代码中：

display:用于定义建立布局时元素生成的显示框类型；display属性可以规定元素应该生成的框类型，在第一CSS代码中可以使用CSS3的flex属性，flex属性可以配置布局样式是否可伸缩其尺寸，可伸缩元素能够随着布局样式的缩小或扩大而缩写或放大，使用flex属性可以完成布局样式的配置，从而遮罩层元素可以按照该布局样式来显示，由于弹窗层元素是嵌套在遮罩层元素中的，因此该弹窗层元素也可以按照在第一CSS代码中配置的布局样式来显示；

-webkit：为谷歌chrome浏览器、苹果safari浏览器、Firefox、IE等各种浏览器的内核识别码，例如“-webkit-box”中，在“box”前加“-webkit”表示box样式能兼容chrome浏览器；

box：为flex属性规定框的子元素是否可伸缩其尺寸；

flex：为css3新添加的盒子模型属性，其可以解决通过多种结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分等；

.l-r-lr>*：为一种CSS选择器，表示选择器用于选取带有特定父元素的元素，如果元素不是父元素的直接子元素，则不会被选择；

block：是display属性的值，表示：此元素将显示为块级元素，此元素前后会带有换行符；

flex:1，表示让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容。

如图4示出了，根据上述左边自动补齐布局样式形成的页面结构效果图。如图4所示，在网页页面中，页面元素(例如控件)在页面右侧，而左侧作了自动补齐。

对于两端对齐的表现形式，利用CSS中的flex属性设置两端对齐布局代码：建立类l-r-lr

其中，上述代码中：

box-pack:justify：是box-pack属性规定当框大于子元素的尺寸，在何处放置子元素。

justify：为box-pack其中的一个属性值，表示在每个子元素之间分割多余的空间(首个子元素前和最后一个子元素后没有多余的空间)；

justify-content：justify-content用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式，其可能的值有flex-start(左对齐)、flex-end(右对齐)、center(居中对齐)、space-between(两端对齐)、space-around(沿轴线均匀分布)；

space-between：为justify-content其中的一个属性值，表示：表示项目位于各行之间留有空白的容器内；

.l-r-lr>*：是一种CSS选择器，表示选择器用于选取带有特定父元素的元素；如果元素不是父元素的直接子元素，则不会被选择。

如图5示出了，根据上述两端对齐布局样式形成的页面结构效果图。如图5所示，在网页页面中，页面元素在页面左右侧，实现了左侧和右侧的对齐。更形象地，如图1所示，图中“下载APP”、“北京”、“阴天”、“11°/16°”等页面元素位于左侧，“登录”、“反馈”、“×(关闭网页)”元素在页面右侧，左右两侧实现两端对齐。

本发明实施例中，以左边自动补齐和两端对齐两种表现形式为例进行示例性说明，但并不限于上述两种表现形式，而是可以根据容器属性、项目属性等进行适应性调整。其中，容器属性包括主轴方向属性(flex-direction)、项目排列属性(flex-wrap)、横向排列属性(flex-flow)、项目在主轴的对齐方式(justify-content)、项目在交叉轴的对齐方式(align-items)、多主轴时多行项目在交叉轴的对齐方式(align-content)；项目属性包括项目排列顺序(order)、项目是否放大(flex-grow)、项目是否缩小(flex-shrink)、项目在主轴的占据空间(flex-basis)、项目在交叉轴的对齐方式(align-self)。

步骤3、利用所述布局样式布局网页。

运行布局样式，从而实现对网页的布局。

本发明实施例在上述方法的基础上还提供了一种页面布局装置，如图6所示，所述装置包括确定单元、配置单元和布局单元，其中所述确定单元用于确定页面布局的表现形式，所述配置单元用于从所述确定单元中获得所述表现形式，并利用flex属性配置布局样式，进一步地所述配置单元还用于基于所述flex容器的水平轴和交叉轴确定flex项目的位置和/或大小；所述布局单元用于利用所述配置单元的布局样式布局页面。

本发明实施例在上述方法的基础上还提供了一种页面布局装置，如图7所示，所述页面布局装置包括处理器、存储器，其中所述处理器与所述存储器通过总线相连接，所述存储器中存储计算机程序代码，所述处理器执行存储器中的计算机程序代码以执行以上任一项所述的方法。

尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种页面布局方法，所述方法包括：

步骤1、确定页面布局的表现形式；

步骤2、根据确定的所述表现形式，利用flex属性配置布局样式；

步骤3、利用所述布局样式布局页面。

2.根据权利要求1所述的页面布局方法，其中，

所述步骤1中所述表现形式包括：左对齐、右对齐、水平居中、垂直居中、水平垂直居中、一行自适应多个图文展示、一左一右两端对齐、一行左边固定、右边补齐、一行右边固定左边补齐、一行左右边固定中间补齐中的一个或多个。

3.根据权利要求1所述的页面布局方法，其中，

在所述步骤2中，在flex容器中将内部网页元素转换为flex项目。

4.根据权利要求1或3所述的页面布局方法，其中，

在所述步骤2中，基于所述flex容器的水平轴和交叉轴确定flex项目的位置。

5.根据权利要求3所述的页面布局装置，其中，

在所述步骤2中，在flex项目中确定flex项目的尺寸和大小。

6.根据权利要求1所述的页面布局方法，其中，

所述步骤2中利用flex属性配置布局样式具体为：

定义显示框类型；

确定盒子能够兼容的浏览器；

确定显示框属性；

根据显示框类型、显示框属性确定布局样式。

7.根据权利要求1所述的页面布局方法，其中，

利用CSS选择器选取父元素的直接元素。

8.一种页面布局装置，所述装置包括：

确定单元，用于确定页面布局的表现形式；

配置单元，用于从确定单元中获得所述表现形式，并利用flex属性配置布局样式；

布局单元，用于利用所述配置单元的布局样式布局页面。

9.根据权利要求8所述的页面布局装置，其中，

所述配置单元，还用于基于所述flex容器的水平轴和交叉轴确定flex项目的位置和/或大小。

10.一种页面布局装置，所述页面布局装置包括处理器、存储器，所述处理器与所述存储器通过总线相连接，其中，

所述存储器中存储计算机程序代码，所述处理器执行存储器中的计算机程序代码以执行权利要求1-7任一项所述的方法。