CN105589883B - Method and device for displaying page elements of webpage - Google Patents

Method and device for displaying page elements of webpage Download PDF

Info

Publication number
CN105589883B
CN105589883B CN201410575700.3A CN201410575700A CN105589883B CN 105589883 B CN105589883 B CN 105589883B CN 201410575700 A CN201410575700 A CN 201410575700A CN 105589883 B CN105589883 B CN 105589883B
Authority
CN
China
Prior art keywords
background picture
distance
current page
page
display area
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.)
Active
Application number
CN201410575700.3A
Other languages
Chinese (zh)
Other versions
CN105589883A (en
Inventor
刘吟
苏莉
史文
许洁
潘知慧
王晶
李晶晶
张晖卉
连沁
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201410575700.3A priority Critical patent/CN105589883B/en
Publication of CN105589883A publication Critical patent/CN105589883A/en
Application granted granted Critical
Publication of CN105589883B publication Critical patent/CN105589883B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Landscapes

  • Information Transfer Between Computers (AREA)

Abstract

The embodiment of the application discloses a method and a device for displaying page elements of a webpage. The method comprises the following steps: receiving a background picture and text content sent by a server, wherein the background picture and the text content are used for describing a page element; and displaying the background picture and the text content on the current page through a Cascading Style Sheet (CSS) technology so that the background picture and the text content displayed on the current page are matched with the size of the current page. The labor cost in the banner manufacturing process can be saved, and the working efficiency is improved.

Description

Method and device for displaying page elements of webpage
Technical Field
The present application relates to the field of computer applications, and in particular, to a method and an apparatus for displaying page elements of a web page.
Background
In general, a page of a web page includes various page elements such as text, pictures, or links. Banner is an important page element in a page and occupies an important display position in the whole page.
Since the display screen has different sizes (i.e., different widths and heights) for different terminals, the size of the page displayed on the display screen is different. Even the same terminal (e.g., a mobile phone or a tablet computer) has different sizes of pages displayed on the display screen when the terminal is placed in different directions. For example, the width and height of the page displayed on the display screen when the mobile phone is laid horizontally is different from the width and height of the page displayed on the display screen when the mobile phone is laid vertically.
In the related art, in order to be able to adapt to pages of different sizes and to display the information in the banner as completely as possible on the pages of different sizes, the banner of different sizes is generally manufactured in advance to adapt to the pages of different sizes. And the client calls the banner with the corresponding size according to the size of the current page and displays the banner on the current page.
However, in the process of implementing the present application, the inventors of the present application found that at least the following problems exist in the prior art: for each theme's banner, a number of different sizes need to be made in order to fit it to different size pages. For a web site (e.g., a shopping site or a portal site), a lot of banners with different themes are involved, so that a lot of banners with different sizes are required to be produced. Because the banner's manufacture process is accomplished by the art designer's manual work, consequently, can consume a large amount of human costs, reduced work efficiency.
Disclosure of Invention
In order to solve the technical problem, embodiments of the present application provide a method and an apparatus for displaying page elements of a web page, so as to save labor cost in a banner manufacturing process and improve work efficiency.
The embodiment of the application discloses the following technical scheme:
a method for displaying page elements of a web page, comprising:
receiving a background picture and text content sent by a server, wherein the background picture and the text content are used for describing a page element;
and displaying the background picture and the text content on the current page through a Cascading Style Sheet (CSS) technology so that the background picture and the text content displayed on the current page are matched with the size of the current page.
Preferably, the size of the current page is the width of the current page.
Preferably, the displaying the background picture on the current page by the CSS technique so that the background picture displayed on the current page matches the width of the current page includes:
determining a display area of the background picture through a CSS technology so that the width of the display area of the background picture is matched with the width of a current page;
rendering a display area of the background picture on a current page;
the display area of the background picture is left-aligned with the background picture, and the distance between the left boundary of the display area of the background picture and the left boundary of the background picture meets a preset first distance condition; or the display area of the background picture is aligned with the background picture on the right, and the distance between the right boundary of the display area of the background picture and the right boundary of the background picture meets a preset second distance condition; or the display area of the background picture and the background picture are aligned in the middle, the distance between the left boundary of the display area of the background picture and the left boundary of the background picture is used as a first distance, the distance between the right boundary of the display area of the background picture and the right boundary of the background picture is used as a second distance, and the ratio of the first distance to the second distance meets a preset ratio condition.
Preferably, when responding to a page zoom-out operation of the user on the current page, if the user pulls the current page to the left, the second distance is greater than the first distance, and if the user pulls the current page to the right, the first distance is greater than the second distance.
Preferably, when responding to the page enlarging operation of the user on the current page, if the user pulls the current page to the left, the first distance is greater than the second distance, and if the user pulls the current page to the right, the second distance is greater than the first distance.
Preferably, the displaying the text content on the current page by the CSS technique so that the text content displayed on the current page matches the width of the current page includes:
determining the text style of the text content through a CSS technology so as to enable the text style of the text content to be matched with the width of a current page, wherein the text style at least comprises the size and the arrangement mode of text;
and rendering the text content on the current page according to the text style of the text content.
A display device of page elements of a web page, comprising:
the receiving unit is used for receiving a background picture and text contents sent by the server, wherein the background picture and the text contents are used for describing a page element;
and the display unit is used for displaying the background picture and the text content on the current page through a CSS technology so that the size of the background picture and the size of the text content displayed on the current page are matched with that of the current page.
Preferably, the size of the current page is the width of the current page.
Preferably, the display unit includes:
the first determining subunit is used for determining the display area of the background picture through a CSS technology so that the width of the display area of the background picture is matched with the width of the current page;
the first rendering subunit is used for rendering the display area of the background picture on a current page; the display area of the background picture is left-aligned with the background picture, and the distance between the left boundary of the display area of the background picture and the left boundary of the background picture meets a preset first distance condition; or the display area of the background picture is aligned with the background picture on the right, and the distance between the right boundary of the display area of the background picture and the right boundary of the background picture meets a preset second distance condition; or the display area of the background picture and the background picture are aligned in the middle, the distance between the left boundary of the display area of the background picture and the left boundary of the background picture is used as a first distance, the distance between the right boundary of the display area of the background picture and the right boundary of the background picture is used as a second distance, and the ratio of the first distance to the second distance meets a preset ratio condition.
Preferably, when responding to a page zoom-out operation of the user on the current webpage, if the user pulls the current page to the left, the second distance is greater than the first distance, and if the user pulls the current page to the right, the first distance is greater than the second distance.
Preferably, when the client responds to the page enlarging operation of the user on the current webpage, if the user pulls the current page leftwards, the first distance is greater than the second distance, and if the user pulls the current page rightwards, the second distance is greater than the first distance.
Preferably, the display unit includes:
a second determining unit, configured to determine a text style of the text content through a CSS technique, so that the text style of the text content matches the width of a current page, where the text style at least includes a text size and an arrangement manner;
and the second rendering unit is used for displaying the text content on the current page according to the text style of the text content.
As can be seen from the above embodiments, compared with the prior art, the present application has the following advantages:
the banner is split into two page elements, i.e. pictures and text, which can be controlled by CSS technique. Thus, the skilled person does not need to make different sizes for each banner, but only needs to make a background picture of one size. When the banner is displayed on the current pages with different sizes, the banner is split into the background picture and the text content, so that the background picture and the text content can be respectively matched with the sizes of the current pages by means of the CSS technology, the labor cost in the banner manufacturing process is saved, and the working efficiency is improved.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art that other drawings can be obtained according to the drawings without inventive exercise.
FIG. 1 schematically illustrates an exemplary application scenario in which embodiments of the present invention may be implemented;
FIG. 2 is a flowchart of an embodiment of a method for displaying page elements of a web page provided by the present application;
FIG. 3 is a schematic diagram illustrating an operation of cropping a background picture according to the present application;
FIG. 4 is another schematic diagram illustrating operations performed to crop a background picture in the present application;
FIG. 5 is another schematic diagram illustrating operations performed to crop a background picture in the present application;
FIG. 6 is a schematic diagram illustrating an operation performed by a user to zoom in or out on a current page in the present application;
FIG. 7 is a schematic diagram of a background picture displayed when a user zooms in or zooms out a current page in the present application;
fig. 8 is another display diagram of a background picture when a user performs an operation of enlarging or reducing a current page in the present application;
FIG. 9 is a block diagram of one embodiment of a display device for displaying page elements of a web page provided herein;
FIG. 10 is a schematic diagram of a display unit according to the present application;
fig. 11 is another structural diagram of the display unit of the present application.
Detailed Description
Typically, each banner is made up of two parts, one background picture and the other textual content. In the prior art, in order to fit different sized pages, the designer has to make a different size for each banner. That is, the background pictures with different sizes are designed first, and the text style of the related text content is designed on the background pictures with different sizes. The server sends different sizes of one Banner to the client, and the client selects one Banner with a matched size to display according to the size of the current page.
The embodiment of the application provides a method and a device for displaying page elements of a webpage. In the application, each banner is divided into two parts, namely a background picture and text, and only one background picture and related text need to be made for each banner. Referring to fig. 1, fig. 1 schematically illustrates an exemplary application scenario in which embodiments of the present invention may be implemented. The background pictures and the related text contents of the banner on all the web pages in a certain website are saved in the database 10, when the client 30 sends a request for displaying the web page a to the server 20, in response, the server 20 reads the background picture 111 and the text contents 112 of the banner11 from the database 10 and sends the background picture 111 and the text contents 112 for describing the banner11 to the client 30, wherein the banner11 is one page element in the web page a. The client 30 displays the background picture 111 and the text content 112 on the current page 21 of the web page a through a CSS (Cascading Style Sheets) technology, and the CSS technology can match the size of the background picture 111 and the text content 112 displayed on the current page 21 with the size of the current page 12 of the web page a regardless of the size of the current page 21 of the web page a. The server 20 may be a Web server or other type of server, such as an APP server. Those skilled in the art will appreciate that the schematic diagram shown in fig. 1 is merely one example in which embodiments of the present invention may be implemented. The scope of applicability of embodiments of the present invention is not limited in any way by this framework.
In order to make the aforementioned objects, features and advantages of the present application more comprehensible, embodiments accompanying the present application are described in detail below.
Method embodiment
Please refer to fig. 2, which is a flowchart illustrating an embodiment of a method for displaying a page element of a web page according to the present application, the method including the following steps:
step 201: and receiving a background picture and text content sent by the server, wherein the background picture and the text content are used for describing a page element.
Step 202: and displaying the background picture and the text content on the current page through a Cascading Style Sheet (CSS) technology so that the background picture and the text content displayed on the current page are matched with the size of the current page.
CSS is a computer language for expressing file styles such as HTML (hypertext markup language) or XML (extensible markup language), and is a style design language that can really separate web page expression from content. Compared with the traditional HTML expression, the CSS can accurately control the position typesetting of the page elements in the webpage at a pixel level, supports almost all font and font styles, has the capability of editing the styles of the page elements, can perform preliminary interactive design, and is the most excellent expression design language based on text display at present.
In the present application, the banner is further split into two page elements, i.e. pictures and text, which can be controlled by CSS technology. Furthermore, by means of the CSS technique, the background picture and the text content can be respectively matched to the size of the current page.
The CSS technology can enable the background picture and the text content to be matched with the width of the current page, can enable the background picture and the text content to be matched with the height of the current page, and can enable the background picture and the text content to be matched with the width and the height of the current page at the same time.
For the banner, because the shape is usually a long strip, and the transverse width of the long strip is much larger than the longitudinal height, in practical application, the main consideration is whether the banner matches the width of the current page.
In a preferred embodiment of the present invention, the background picture and the text content are displayed on the current page through the CSS technique, so that the background picture and the text content displayed on the current page match with the width of the current page.
For the text content, the text style of the text content can be determined through the CSS technology, so that the text style of the text content is matched with the width of the current page, and the text content is rendered on the current page according to the text style of the text content. The text style at least comprises the size and arrangement mode of the text. Of course, the color, font, thickness, etc. of the text may also be included.
For background pictures, it contains two dimensions, width and height. The dimension of the height of the background picture can be kept unchanged, and the display area of the background picture in the dimension of the width is determined through the existing CSS technology, so that the width of the display area is matched with the width of the current page.
When the width of the background picture is larger than that of the current page, the transverse width of the background picture is cut, a part of area obtained after the background picture is cut is a display area, and the width of the display area is matched with that of the current page. When the width of the background picture is smaller than that of the current page, the transverse width of the background picture is reserved, the background picture is subjected to the reserving processing to form a display area, and the width of the display area is matched with that of the current page.
When the cropping processing is performed, which partial area in the background picture is the display area can be determined according to the position of the core content in the background picture.
For example, if the core content in the background picture is mainly embodied on the left side of the background picture, the right area of the background picture may be cropped, so as to reserve the left area as the display area. As shown in fig. 3, the display area of the background picture is left-aligned with the background picture, and a distance between a left boundary of the display area of the background picture and a left boundary of the background picture satisfies a preset first distance condition.
If the core content in the background picture is mainly embodied on the right side of the background picture, the left area of the background picture can be cut off, and the right area is reserved as a display area. As shown in fig. 4, the display area of the background picture is right-aligned with the background picture, and a distance between a right boundary of the display area of the background picture and a right boundary of the background picture satisfies a preset second distance condition.
If the core content in the background picture is mainly embodied in the middle of the background picture, the left and right areas of the background picture can be cut off, and the middle area is reserved as a display area. As shown in fig. 5, the display area of the background picture is aligned with the background picture in the middle, the distance between the left boundary of the display area of the background picture and the left boundary of the background picture is used as a first distance, the distance between the right boundary of the display area of the background picture and the right boundary of the background picture is used as a second distance, and the ratio of the first distance to the second distance satisfies a preset ratio condition.
The preset first distance condition and the preset second distance condition may be a distance threshold respectively, or may also be a distance interval respectively. When the distance between the left (right) boundary of the display area of the background picture and the left (right) boundary of the background picture is equal to the distance threshold or is in the distance interval, the first (second) distance condition is met.
The preset ratio condition may be a ratio threshold or a ratio interval. And when the ratio of the first distance to the second distance is equal to the ratio threshold or is in the ratio interval, the ratio condition is met.
Of course, the above processing method is also applicable to the blank processing for the background picture, in addition to the cropping. That is, the blank may be performed at the left boundary of the background picture, the right boundary of the background picture, and the left and right sides of the background picture.
It should be noted that the width of the background picture is not limited in this application, that is, the background picture may have any width. For example, the width of the background picture may be set to the width of the maximum banner (i.e., the banner that matches the maximum page size), and the background picture may be subsequently cropped in the lateral width so that its width matches the width of the current page. Of course, the width of the background picture may also be set to the width of the minimum banner (i.e., the banner that matches the minimum page size), and then the background picture may be whitewashed across its lateral width so that its width matches the width of the current page.
In addition, when the user performs a page zoom-in or zoom-out operation on the current page, the size of the current page is dynamically changed. For example, when the user pulls the current page to the left or right, as shown in fig. 6, the width of the current page may dynamically change, i.e., the width of the current page is continuously being resized. In order to match the width of the banner with the width of the current page, the width of the banner needs to be switched in size along with the width of the current page.
From the display effect, when the user pulls the current page to move left or right, the banner in the current page will also move left or right accordingly. In order to make the banner naturally and smoothly move each time, a preferable way is to make the moving amplitude of the banner smaller than that of the current page.
In order to make the moving amplitude of the banner smaller than that of the current page, in a preferred embodiment of the present application, the display area of the background picture and the background picture are aligned in the middle, and if the user performs a page reduction operation on the current page by pulling the current page to the left, the second distance (i.e., the distance between the right boundary of the display area of the background picture and the right boundary of the background picture) is greater than the first distance (i.e., the distance between the left boundary of the display area of the background picture and the left boundary of the background picture), so that the banner achieves a slow-moving effect to the left, as shown in fig. 7. If the user performs page reduction operation on the current page by pulling the current page to the right, the first distance is greater than the second distance, and then the banner achieves the effect of slow moving to the right, as shown in fig. 8.
Similarly, if the user performs the page enlarging operation on the current page by pulling the current page leftward, the first distance is greater than the second distance, so that the banner achieves the effect of jogging leftward. If the user carries out page amplification operation on the current page by pulling the current page rightwards, the second distance is larger than the second distance, and then the banner achieves the effect of slow moving rightwards.
As can be seen from the above embodiments, compared with the prior art, the present application has the following advantages:
the banner is split into two page elements, i.e. pictures and text, which can be controlled by CSS technique. Thus, the skilled person does not need to make different sizes for each banner, but only needs to make a background picture of one size. When the banner is displayed on the current pages with different sizes, the banner is split into the background picture and the text content, so that the background picture and the text content can be respectively matched with the sizes of the current pages by means of the CSS technology, the labor cost in the banner manufacturing process is saved, and the working efficiency is improved.
Device embodiment
Corresponding to the method for displaying the page elements of the webpage, the embodiment of the application also provides a device for displaying the page elements of the webpage. Please refer to fig. 9, which is a block diagram of an embodiment of a display apparatus for displaying page elements of a web page provided in the present application, the apparatus includes a receiving unit 901 and a display unit 902. The internal structure and connection relationship of the device will be further described below in conjunction with the working principle of the device.
A receiving unit 901, configured to receive a background picture and text content sent by a server, where the background picture and the text content are used to describe a page element;
a display unit 902, configured to display the background picture and the text content on the current page through a CSS technique, so that the size of the background picture and the text content displayed on the current page matches the size of the current page.
In a preferred embodiment of the present application, the size of the current page is the width of the current page.
In another preferred embodiment of the present application, as shown in fig. 10, the display unit 902 includes:
a first determining subunit 9021, configured to determine, by using a CSS technique, a display area of the background picture, so that a width of the display area of the background picture matches a width of a current page;
a first rendering subunit 9022, configured to render the display area of the background picture on a current page;
the display area of the background picture is left-aligned with the background picture, and the distance between the left boundary of the display area of the background picture and the left boundary of the background picture meets a preset first distance condition; or the display area of the background picture is aligned with the background picture on the right, and the distance between the right boundary of the display area of the background picture and the right boundary of the background picture meets a preset second distance condition; or the display area of the background picture and the background picture are aligned in the middle, the distance between the left boundary of the display area of the background picture and the left boundary of the background picture is used as a first distance, the distance between the right boundary of the display area of the background picture and the right boundary of the background picture is used as a second distance, and the ratio of the first distance to the second distance meets a preset ratio condition.
In another preferred embodiment of the present application, when responding to a page zoom-out operation of a user on a current webpage, if the user pulls the current page to the left, the second distance is greater than the first distance, and if the user pulls the current page to the right, the first distance is greater than the second distance.
In another preferred embodiment of the present application, when the client responds to a page zoom-in operation of the user on the current webpage, if the user pulls the current page to the left, the first distance is greater than the second distance, and if the user pulls the current page to the right, the second distance is greater than the first distance.
In another preferred embodiment of the present application, as shown in fig. 11, the display unit 902 includes:
a second determining unit 9023, configured to determine a text style of the text content through a CSS technique, so that the text style of the text content matches the width of the current page, where the text style at least includes a text size and an arrangement manner;
a second rendering unit 9024, configured to display the text content on a current page according to a text style of the text content.
As can be seen from the above embodiments, compared with the prior art, the present application has the following advantages:
the banner is split into two page elements, i.e. pictures and text, which can be controlled by CSS technique. Thus, the skilled person does not need to make different sizes for each banner, but only needs to make a background picture of one size. When the banner is displayed on the current pages with different sizes, the banner is split into the background picture and the text content, so that the background picture and the text content can be respectively matched with the sizes of the current pages by means of the CSS technology, the labor cost in the banner manufacturing process is saved, and the working efficiency is improved.
It can be clearly understood by those skilled in the art that, for convenience and brevity of description, the specific working processes of the above-described systems, apparatuses and units may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
In the several embodiments provided in the present application, it should be understood that the disclosed system, apparatus and method may be implemented in other ways. For example, the above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one logical division, and there may be other divisions when the actual implementation is performed, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not performed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection of devices or units through some interfaces, and may be in an electrical, mechanical or other form.
The units described as separate parts may be or may be physically separate, and parts displayed as units may be or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can be realized in a form of a software functional unit.
It should be noted that, as will be understood by those skilled in the art, all or part of the processes in the methods of the above embodiments may be implemented by a computer program, which may be stored in a computer-readable storage medium, and when executed, may include the processes of the embodiments of the methods described above. The storage medium may be a magnetic disk, an optical disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), or the like.
The method and the device for displaying the page elements of the web page provided by the present application are described in detail above, and the principle and the implementation manner of the present application are explained by applying specific embodiments herein, and the description of the above embodiments is only used to help understanding the method and the core idea of the present application; meanwhile, for a person skilled in the art, according to the idea of the present application, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present application.

Claims (12)

1. A method for displaying page elements of a web page, comprising:
receiving a background picture and text content sent by a server, wherein the background picture and the text content are used for describing a page element; wherein the page element is a banner;
displaying the background picture and the text content on a current page through a Cascading Style Sheet (CSS) technology; the text content is located on the background picture, so that the background picture and the text content displayed on the current page are respectively matched with the size of the current page.
2. The method of claim 1, wherein the size of the current page is a width of the current page.
3. The method of claim 2, wherein the displaying the background picture on the current page through the CSS technique such that the background picture displayed on the current page matches a width of the current page comprises:
determining a display area of the background picture through a CSS technology so that the width of the display area of the background picture is matched with the width of a current page;
rendering a display area of the background picture on a current page;
the display area of the background picture is left-aligned with the background picture, and the distance between the left boundary of the display area of the background picture and the left boundary of the background picture meets a preset first distance condition; or the display area of the background picture is aligned with the background picture on the right, and the distance between the right boundary of the display area of the background picture and the right boundary of the background picture meets a preset second distance condition; or the display area of the background picture and the background picture are aligned in the middle, the distance between the left boundary of the display area of the background picture and the left boundary of the background picture is used as a first distance, the distance between the right boundary of the display area of the background picture and the right boundary of the background picture is used as a second distance, and the ratio of the first distance to the second distance meets a preset ratio condition.
4. The method of claim 3, wherein the second distance is greater than the first distance if the user pulls the current page to the left and the first distance is greater than the second distance if the user pulls the current page to the right when responding to a page zoom-out operation of the current page by the user.
5. The method of claim 3, wherein the first distance is greater than the second distance if the user pulls the current page to the left and the second distance is greater than the first distance if the user pulls the current page to the right when responding to a page zoom operation of the current page by the user.
6. The method of claim 2, wherein the displaying the text content on the current page through the CSS technique such that the text content displayed on the current page matches a width of the current page comprises:
determining the text style of the text content through a CSS technology so as to enable the text style of the text content to be matched with the width of a current page, wherein the text style at least comprises the size and the arrangement mode of text;
and rendering the text content on the current page according to the text style of the text content.
7. An apparatus for displaying page elements of a web page, comprising:
the receiving unit is used for receiving a background picture and text contents sent by the server, wherein the background picture and the text contents are used for describing a page element; wherein the page element is a banner;
the display unit is used for displaying the background picture and the text content on a current page through a CSS technology; the text content is located on the background picture, so that the background picture and the text content displayed on the current page are respectively matched with the size of the current page.
8. The apparatus of claim 7, wherein the size of the current page is a width of the current page.
9. The apparatus of claim 8, wherein the display unit comprises:
the first determining subunit is used for determining the display area of the background picture through a CSS technology so that the width of the display area of the background picture is matched with the width of the current page;
the first rendering subunit is used for rendering the display area of the background picture on a current page; the display area of the background picture is left-aligned with the background picture, and the distance between the left boundary of the display area of the background picture and the left boundary of the background picture meets a preset first distance condition; or the display area of the background picture is aligned with the background picture on the right, and the distance between the right boundary of the display area of the background picture and the right boundary of the background picture meets a preset second distance condition; or the display area of the background picture and the background picture are aligned in the middle, the distance between the left boundary of the display area of the background picture and the left boundary of the background picture is used as a first distance, the distance between the right boundary of the display area of the background picture and the right boundary of the background picture is used as a second distance, and the ratio of the first distance to the second distance meets a preset ratio condition.
10. The apparatus of claim 9, wherein when responding to a page zoom-out operation of a current webpage by a user, the second distance is greater than the first distance if the user pulls the current page to the left, and the first distance is greater than the second distance if the user pulls the current page to the right.
11. The apparatus of claim 9, wherein when the client responds to a page zoom operation of the user on the current webpage page, the first distance is greater than the second distance if the user pulls the current page to the left, and the second distance is greater than the first distance if the user pulls the current page to the right.
12. The apparatus of claim 7, wherein the display unit comprises:
a second determining unit, configured to determine a text style of the text content through a CSS technique, so that the text style of the text content matches the width of a current page, where the text style at least includes a text size and an arrangement manner;
and the second rendering unit is used for displaying the text content on the current page according to the text style of the text content.
CN201410575700.3A 2014-10-24 2014-10-24 Method and device for displaying page elements of webpage Active CN105589883B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201410575700.3A CN105589883B (en) 2014-10-24 2014-10-24 Method and device for displaying page elements of webpage

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410575700.3A CN105589883B (en) 2014-10-24 2014-10-24 Method and device for displaying page elements of webpage

Publications (2)

Publication Number Publication Date
CN105589883A CN105589883A (en) 2016-05-18
CN105589883B true CN105589883B (en) 2020-03-06

Family

ID=55929469

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410575700.3A Active CN105589883B (en) 2014-10-24 2014-10-24 Method and device for displaying page elements of webpage

Country Status (1)

Country Link
CN (1) CN105589883B (en)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106599175B (en) * 2016-12-12 2021-01-29 北京奇虎科技有限公司 Webpage element display processing method and device
CN107526592B (en) * 2017-08-22 2021-08-24 广州市百果园信息技术有限公司 Page adaptation method and device
CN108829475B (en) * 2018-05-29 2021-08-17 北京小米移动软件有限公司 UI drawing method, device and storage medium

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102867003A (en) * 2011-07-06 2013-01-09 腾讯科技(北京)有限公司 Method and system for page presentation
CN103761315A (en) * 2014-01-27 2014-04-30 乐视网信息技术(北京)股份有限公司 Method and system for displaying webpage content
CN103970721A (en) * 2013-02-05 2014-08-06 腾讯科技(深圳)有限公司 Text content display method, text content display system, mobile terminal and cloud typesetting server

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102799420B (en) * 2011-05-23 2015-12-02 腾讯科技(深圳)有限公司 A kind of client skin edit methods and skin editing machine

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102867003A (en) * 2011-07-06 2013-01-09 腾讯科技(北京)有限公司 Method and system for page presentation
CN103970721A (en) * 2013-02-05 2014-08-06 腾讯科技(深圳)有限公司 Text content display method, text content display system, mobile terminal and cloud typesetting server
CN103761315A (en) * 2014-01-27 2014-04-30 乐视网信息技术(北京)股份有限公司 Method and system for displaying webpage content

Also Published As

Publication number Publication date
CN105589883A (en) 2016-05-18

Similar Documents

Publication Publication Date Title
CN106156066B (en) Page switching method, device and client
CN102591853B (en) Webpage rearrangement method, webpage rearrangement device and mobile terminal
CN102663126B (en) Method and device for displaying webpage in mobile terminal
US9916285B2 (en) Generating a preview of a web page for a mobile terminal
WO2015196822A1 (en) Method and device for adapting webpage to screen layout
CN102364460B (en) Automatic page amplification method and system based on mobile terminal
CN103853417A (en) Rolling and pagination display method and device for network dynamic picture
CN105069060B (en) HTML document paging typesetting method
CN105975576A (en) Terminal content adaptive display method and device as well as terminal
DE212011100021U1 (en) Apparatus for displaying or remastering text and images for display on mobile / small screen devices
CN104050185A (en) Zoom-display processing method and device for page contents
CN105094930A (en) Image positioning system and method
CN105589883B (en) Method and device for displaying page elements of webpage
CN105808307B (en) Page display method and device
CN104391896A (en) Plane printed product typesetting method and system based on webpage
CN111222069B (en) Report component adjustment method and device and related equipment
CN110866208B (en) Page response type layout method, device and equipment
CN113204401B (en) Browser rendering method, terminal and storage medium
CN105389308B (en) Webpage display processing method and device
JP2011086050A (en) Information processing terminal and computer program
CN106874387B (en) Method for displaying real-time information in self-adaptive HTML (Hypertext markup language) scrolling mode
CN105260353A (en) Typesetting method and device for mobile terminal
CN105589882B (en) Method and device for displaying page elements of webpage
EP2801920A1 (en) Method and apparatus for displaying web page
US20160132219A1 (en) Enhanced view transitions

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant