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

说明书

本申请实施例公开了一种网页的页面元素的显示方法和装置。该方法包括：接收服务器发送的背景图片以及文字图片，所述背景图片以及文字图片用于描述一个页面元素；通过级联样式表CSS技术将所述背景图片显示在当前页面上，以使得显示在当前页面上的所述背景图片与当前页面的尺寸匹配，并将所述文字图片显示在所述背景图片上。本申请可以节省banner制作过程中的人力成本，提高在显示网页页面元素时的工作效率。

技术领域

本申请涉及计算机应用领域，特别是涉及网页的页面元素的显示方法和装置。

背景技术

通常，在网页的页面中会包含各种各样的页面元素，例如，文字、图片或者网页链接等。banner(网幅广告)是网页页面中一种重要的页面元素，并在整个网页页面中占据着重要的显示地位位置。

对于不同的终端来说，由于其显示屏的尺寸(即，宽高比)不同(即，宽度和高度不同)，因此，在显示屏上所显示的网页页面的尺寸也就不同。即使是同一个终端(如，手机或平板电脑)，当其放置的方位方向不同时，在显示屏上所显示的网页页面的尺寸也是不同的。例如，在将手机横着放时在手机显示屏上显示的网页页面的宽度和高度与在将手机竖着放时在手机显示屏上显示的网页页面的宽度和高度都是不同的。

在相关技术中，为了能够适配不同尺寸的网页页面，并在不同尺寸的网页页面上尽量完整地显示出banner中的信息，一般会预先制作不同尺寸的banner以适配不同尺寸的网页页面。客户端根据当前的网页页面的尺寸，调用相应尺寸的banner，并显示在当前的网页页面上。

但是，在实现本申请的过程中，本申请的发明人发现现有技术中至少存在如下问题：针对每一个主题的banner，为了使其适配不同尺寸的网页页面，需要制作多个不同的尺寸。而对于一个网站来说(如，购物网站或门户网站)，通常都需要制作会涉及大量主题的banner，因此也就需要制作大量的不同尺寸的banner。由于大量的banner的制作过程一般是由美工人员手工完成的，因此，会消耗大量的人力成本，明显地降低了工作效率。

发明内容

为了解决上述技术问题，本申请实施例提供了网页的页面元素的显示方法和装置，以节省banner制作过程中的人力成本，提高在显示网页页面元素时的工作效率。

本申请实施例公开了如下技术方案：

一种网页的页面元素的显示方法，包括：

接收服务器发送的背景图片以及文字图片，所述背景图片以及文字图片用于描述一个页面元素；

通过级联样式表CSS技术将所述背景图片显示在当前页面上，以使得显示在当前页面上的所述背景图片与当前页面的尺寸匹配，并将所述文字图片显示在所述背景图片上。

优选的，所述当前页面的尺寸为当前页面的宽度。

优选的，所述通过CSS技术将所述背景图片显示在当前页面上，以使得显示在当前页面上的所述背景图片与当前页面的宽度匹配，包括：

通过CSS技术确定所述背景图片的显示区域，以使得所述背景图片的显示区域的宽度与当前页面的宽度匹配；

将所述背景图片的显示区域渲染在当前页面上；

其中，所述背景图片的显示区域与所述背景图片之间左对齐，并且，所述背景图片的显示区域的左边界与所述背景图片的左边界之间的距离满足预设的第一距离条件；或者，所述背景图片的显示区域与所述背景图片之间右对齐，并且，所述背景图片的显示区域的右边界与所述背景图片的右边界之间的距离满足预设的第二距离条件；或者，所述背景图片的显示区域与所述背景图片之间居中对齐，并且，将所述背景图片的显示区域的左边界与所述背景图片的左边界之间的距离作为第一距离，将所述背景图片的显示区域的右边界与所述背景图片的右边界之间的距离作为第二距离，所述第一距离与所述第二距离之间的比值满足预设的比值条件。