【技术实现步骤摘要】
本公开的实施方式涉及计算机领域，更具体地，本公开的实施方式涉及页面布局方法、介质、装置和计算设备。
技术介绍
1、本部分旨在为权利要求书中陈述的本公开的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。
2、在网页开发过程中，网页的页面布局设计会影响用户对网页的浏览体验。美观的页面会吸引用户的点击，提高用户的留存率，从而提升自身在市场中的竞争力。因此，页面布局设计是网页开发中最重要的环节之一。
3、目前，在开发人员对页面进行布局时，基本上是依赖于栅格系统完成的，主要是将栅格拖拽入页面设计器，从而将栅格抽象为容器。其中，容器预先设定了列数。然而，现有的布局方式在置入容器后，需要由内容或者手动设计容器宽高撑开布局，存在不容易对齐容器、不直观且编辑效率较低的问题。
技术实现思路
1、本公开提供一种页面布局方法、介质、装置和计算设备，以解决不容易对齐容器、不直观且编辑效率较低的问题。
2、在本公开实施方式的第一方面中，提供了一种页面布局方法，包括：
3、根据获取的第一指令，将待处理页面的第一容器删除；
4、若将所述第一容器删除后，第二容器中包含的剩余子容器的数量大于1，则对每个剩余子容器的css属性进行更新，以使更新后的剩余子容器充满所述第二容器，所述第二容器为所述第一容器的父级容器，容器的css属性用于确定所述容器的行宽度和列宽度；
5、若将所述第一容器删除后，所述第二容器中包含的剩余子容器的
6、在本公开的一个实施例中，若将所述第一容器删除后，第二容器中包含的剩余子容器的数量大于1，则对每个剩余子容器的css属性进行更新，以使更新后的剩余子容器充满所述第二容器，包括：
7、根据每个剩余子容器的css属性，确定每个剩余子容器在所述第二容器中所占的第一比例；
8、根据每个剩余子容器在第二容器中所占的第一比例，计算剩余子容器间的第二比例；
9、根据所述第二比例对每个剩余子容器的css属性进行更新，以使更新后的剩余子容器充满所述第二容器。
10、在本公开的另一实施例中，所述根据所述第二容器的父容器信息和所述剩余子容器的子容器信息，对所述待处理页面中的容器进行调整，包括：
11、若所述父容器信息指示所述第二容器不存在对应的父容器，且所述子容器信息用于指示所述剩余子容器不存在对应的子容器，则删除所述第二容器的css属性以及所述剩余子容器；
12、若所述父容器信息指示所述第二容器不存在对应的父容器，且所述子容器信息用于指示所述剩余子容器存在对应的子容器，则将第三容器移动至所述第二容器，将所述剩余子容器的css属性同步至所述第二容器，并删除所述剩余子容器，所述第三容器为所述剩余子容器对应的子容器；
13、若所述父容器信息指示所述第二容器存在对应的父容器，且所述子容器信息用于指示所述剩余子容器不存在对应的子容器，则将所述剩余子容器移动至第四容器，并删除所述第二容器，所述第四容器为所述第二容器存在对应的父容器；
14、若所述父容器信息指示所述第二容器存在对应的父容器，且所述子容器信息用于指示所述剩余子容器存在对应的子容器，则使用第三容器替换第二容器，并根据第三容器间所占空间的比例，重新计算所述第四容器的css属性。
15、在本公开的另一实施例中，所述方法还包括：
16、获取第二指令，所述第二指令用于指示对目标容器按照分割线进行切分；
17、若所述分割线的切分方向与所述目标容器的父容器的布局方向相同，则根据所述分割线对所述目标容器的父容器进行切分，获取切分得到的两个相邻容器；
18、若所述分割线的切分方向与所述目标容器的父容器的布局方向不同，则根据所述分割线对所述目标容器进行切分，获取切分得到的两个相邻容器；
19、其中，所述切分方向包括横向切分或者纵向切分。
20、在本公开的另一实施例中，所述获取第二指令，包括：
21、响应于对切分控件的第一操作，确定所述分割线的位置和切分方向，所述切分控件用于对所述目标容器进行横向切分或者纵向切分；
22、响应于对所述切分控件的第二操作，根据所述分割线的位置和切分方向生成所述第二指令。
23、在本公开的另一实施例中，在所述响应于对切分控件的第一操作，确定所述分割线的位置和切分方向之后，所述方法还包括：
24、根据所述分割线的位置，显示所述分割线对应的两个相邻容器所占空间的比例。
25、在本公开的另一实施例中，所述方法还包括：
26、在所述分割线的位置改变后，根据改变后的位置对所述两个相邻容器所占空间的比例进行更新。
27、在本公开的另一实施例中，所述方法还包括：
28、响应于对第五容器的边界线的拖拽操作，对所述第五容器进行缩放处理。
29、在本公开的另一实施例中，所述方法还包括：
30、响应于对第一控件的边界线的拖拽操作，对所述第一控件进行缩放处理。
31、在本公开的另一实施例中，所述方法还包括：
32、响应于对第二控件的第三操作，将所述第二控件移动至所述目标位置。
33、在本公开的另一实施例中，所述方法还包括：
34、响应于对对齐控件的点击操作，对多个第三控件进行对齐处理，所述对齐处理包括以下任一项：右对齐，左对齐，顶端对齐，底端对齐，水平居中，垂直居中。
35、在本公开的另一实施例中，所述方法还包括：
36、响应于接收到的针对第六容器的尺寸编辑指令，对所述第六容器的尺寸进行调整。
37、在本公开实施方式的第二方面中，提供了一种页面布局装置，包括：
38、删除模块，用于根据获取的第一指令，将待处理页面的第一容器删除；
39、第一调整模块，用于若将所述第一容器删除后，第二容器中包含的剩余子容器的数量大于1，则对每个剩余子容器的css属性进行更新，以使更新后的剩余子容器充满所述第二容器，所述第二容器为所述第一容器的父级容器，容器的css属性用于确定所述容器的行宽度和列宽度；
40、第二调整模块，用于若将所述第一容器删除后，所述第二容器中包含的剩余子容器的数量等于1，则根据所述第二容器的父容器信息和所述剩余子容器的子容器信息，对所述待处理页面中的容器进行调整，以使调整后的剩余子容器充满调整后对应的父容器，所述父容器信息用于指示所述第二容器是否存在对应的父容器，所述子容器信息用于指示所述剩余子容器是否存在对应的子容器。
41本文档来自技高网...
【技术保护点】
1.一种页面布局方法，包括：
2.根据权利要求1所述的方法，所述若将所述第一容器删除后，第二容器中包含的剩余子容器的数量大于1，则对每个剩余子容器的CSS属性进行更新，以使更新后的剩余子容器充满所述第二容器，包括：
3.根据权利要求1所述的方法，所述根据所述第二容器的父容器信息和所述剩余子容器的子容器信息，对所述待处理页面中的容器进行调整，包括：
4.根据权利要求1所述的方法，所述方法还包括：
5.根据权利要求4所述的方法，所述获取第二指令，包括：
6.根据权利要求5所述的方法，在所述响应于对切分控件的第一操作，确定所述分割线的位置和切分方向之后，所述方法还包括：
7.根据权利要求6所述的方法，所述方法还包括：
8.一种页面布局装置，包括：
9.一种计算设备，包括：处理器、存储器及存储在所述存储器上并可在处理器上运行的计算机程序指令，其特征在于，所述处理器执行所述计算机程序指令时用于实现如权利要求1至7任一项所述的方法。
10.一种计算机可读存储介质，其特征在于，所述计算机
...【技术特征摘要】
1.一种页面布局方法，包括：
2.根据权利要求1所述的方法，所述若将所述第一容器删除后，第二容器中包含的剩余子容器的数量大于1，则对每个剩余子容器的css属性进行更新，以使更新后的剩余子容器充满所述第二容器，包括：
3.根据权利要求1所述的方法，所述根据所述第二容器的父容器信息和所述剩余子容器的子容器信息，对所述待处理页面中的容器进行调整，包括：
4.根据权利要求1所述的方法，所述方法还包括：
5.根据权利要求4所述的方法，所述获取第二指令，包括：
6.根据权利要求5所述的方法，在所述响...
【专利技术属性】
技术研发人员：汪韬，阮佳丽，欧璇，
申请(专利权)人：杭州网易数之帆科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。