[发明专利]网页页面显示方法和装置

说明书

技术领域

本发明涉及计算机技术领域，特别涉及一种网页页面显示方法和装置。

背景技术

侧边栏和导航菜单是网页中的两个重要组成，侧边栏属于一种方便功能操 作的形式，通常用来整合程序的部分资源或者放置一些快捷入口，对用户起到 提醒或者导航的作用。侧边栏在桌面系统、网站上很常见，在显示面积较大的 移动平板设备上也经常可以见到侧边栏的应用。

然而，传统技术中，侧边栏一般单独固定在页面两侧，这样，必然会造成 侧边栏占用了页面主体的可用区域，造成页面主体区域范围的缩小，影响用户 操作，特别是对于一些显示屏幕较小的移动电子设备，更容易造成用户操作的 不便。

发明内容

基于此，为了解决上述技术问题，提供了一种能提高用户操作便利性的网 页页面显示方法和装置。

一种网页页面显示方法，该方法包括：

获取输入的触发显示侧边栏的操作指令；

根据该操作指令，将侧边栏相应的CSS属性数据中的右属性值由负的预设 宽度值调整为0，并将网页中的页面主体相应的CSS属性数据中的左属性值由0 调整为该负的预设宽度值；

其中，该侧边栏相应的CSS属性数据中的定位属性为固定定位，该页面主 体相应的CSS属性数据中的定位属性为相对定位。

在其中一个实施例中，所述方法还包括：

当获取到所述操作指令时，调整预设遮罩层相应的CSS属性数据中的层级 值以使所述预设遮罩层由位于所述页面主体之下调整为位于所述页面主体和所 述侧边栏之间，以及将所述遮罩层的CSS属性数据中的透明样式属性由不可见 调整为可见。

在其中一个实施例中，所述预设遮罩层相应的CSS属性数据中的定位属性 为固定定位，所述预设遮罩层相应的CSS属性数据还包含使所述预设遮罩层显 示为渐出效果的特效属性。

在其中一个实施例中，所述侧边栏相应的CSS属性数据包含使所述侧边栏 显示为从右侧滑出的特效属性，所述页面主体相应的CSS属性数据中包含使所 述页面主体显示为向左滑出的特效属性。

在其中一个实施例中，在所述将侧边栏相应的CSS属性数据中的右属性值 由负的预设宽度值调整为0，并将网页中的页面主体相应的CSS属性数据中的 左属性值由0调整为所述负的预设宽度值的步骤之后，还包括：

检测是否获取到对所述页面预设区域的点击操作；

若获取到对所述页面主体的点击操作，则将侧边栏相应的CSS属性数据中 的右属性值由0调整为负的预设宽度值，并将网页中的页面主体相应的CSS属 性数据中的左属性值由所述负的预设宽度值调整为0，以及将所述预设遮罩层相 应的CSS属性数据中的层级值调整为位于所述页面主体之下且所述透明样式属 性为不可见。

一种网页页面显示装置，该装置包括：

获取单元，用于获取输入的触发显示侧边栏的操作指令；

第一调整单元，用于根据该操作指令，将侧边栏相应的CSS属性数据中的 右属性值由负的预设宽度值调整为0，并将网页中的页面主体相应的CSS属性 数据中的左属性值由0调整为该负的预设宽度值；

设置单元，用于设置该侧边栏相应的CSS属性数据中的定位属性为固定定 位，该页面主体相应的CSS属性数据中的定位属性为相对定位。

根据权利要求6所述的装置，其特征在于，所述装置还包括：

第二调整模块，用于当获取到所述操作指令时，调整预设遮罩层相应的CSS 属性数据中的层级值以使所述预设遮罩层由位于所述页面主体之下调整为位于 所述页面主体和所述侧边栏之间，以及将所述遮罩层的CSS属性数据中的透明 样式属性由不可见调整为可见。

在其中一个实施例中，所述预设遮罩层相应的CSS属性数据中的定位属性 为固定定位，所述预设遮罩层相应的CSS属性数据还包含使所述预设遮罩层显 示为渐出效果的特效属性。

在其中一个实施例中，所述侧边栏相应的CSS属性数据包含使所述侧边栏 显示为从右侧滑出的特效属性，所述页面主体相应的CSS属性数据中包含使所 述页面主体显示为向左滑出的特效属性。

在其中一个实施例中，所述装置还包括：

检测模块，用于检测是否获取到对所述页面预设区域的点击操作；