一种基于CSS展示网页更多内容的方法及装置与流程

本发明涉及互联网领域，尤其涉及一种基于css展示网页更多内容的方法及装置。

背景技术：

随着互联网的迅速发展，各种网站已经非常普及，人们可以在网站上浏览相应的图片或者内容，但是由于每个页面的大小有限，展示的内容就会收到限制，就会有一些内容隐藏起来，无法进行展示。

现有技术中，若想在页面中展示更多的内容，一般采用的是javascript的方法实现，但是这种方法会影响页面反应速度，用户使用时体验性变差。

技术实现要素：

有鉴于此，本发明实施例公开了一种基于css展示网页更多内容的方法及装置，解决了现有技术中，采用javascript的方法显示更多的内容而影响页面的反映速度，从而使得用户体验性差的问题。

本发明实施例公开了一种基于css展示网页更多内容的方法，所述方法可以包括：

将目标网页隐藏的内容划分为内容区和控制区；其中，所述控制区由带有锚点的两个a标签表示，所述两个a标签，分别表示显示和收起；

基于css设置所述内容区的高度，并将溢出的内容进行隐藏；

响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，显示所述目标锚点指向的内容区的内容。

可选的，将目标网页隐藏的内容划分为内容区和控制区，包括：

通过p标签表示所述内容区，并为所述内容区设置id名称；

通过带有锚点的两个a标签表示控制区，并将所述锚点的名称设置为所述id名称；其中，所述两个a标签分别表示显示和收起。

可选的，所述获取所述目标锚点的指向后，还包括：

将所述网页的高度转换为自动调整。

可选的，所述响应于显示目标锚点的链接，获取所述目标锚点的指向，显示所述目标锚点隐藏的内容，包括：

所述响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，将表示收起的a标签切换为表示显示的a标签，并显示所述目标锚点隐藏的内容。

可选的，还包括：

响应于收起目标锚点的链接的指令，获取所述目标锚点的指向，将表示显示的a标签切换为表示收起的a标签，并将显示的所述目标锚点显示的内容。

本发明实施例提供了一种基于css展示网页更多内容的装置，所述装置可以包括：

划分单元，用于将目标网页隐藏的内容划分为内容区和控制区；其中，所述控制区由带有锚点的两个a标签表示，所述两个a标签，分别表示显示和收起；

设置单元，用于基于css设置所述内容区的高度，并将溢出的内容进行隐藏；

显示单元，用于响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，显示所述目标锚点指向的内容区的内容。

可选的，所述划分单元包括：第一设置子单元，用于通过p标签表示所述内容区，并为所述内容区设置id名称；

第二设置子单元，用于通过带有锚点的两个a标签表示所述控制区

，并将所述锚点的名称设置为所述id名称；其中，所述两个a标签分别表示显示和收起。

可选的，所述装置还包括：

转换单元，用于将所述网页的高度转换为自动调整。

可选的，所述显示单元，包括：

显示子单元，用于所述响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，将表示收起的a标签切换为表示显示的a标签，并显示所述目标锚点隐藏的内容。

可选的，所述装置还包括：

响应于收起目标锚点的链接的指令，获取所述目标锚点的指向，将表示显示的a标签切换为表示收起的a标签，并将显示的所述目标锚点显示的内容。

本实施例中，为了展示网页中更多的内容，可以将目标网页隐藏的内容划分为内容区和控制区，并且，控制区由带有锚点的两个a标签表示；基于css设置所述内容区的高度，并将溢出的内容进行隐藏；响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，显示所述目标锚点指向的内容区的内容。因此，采用css的方式，显示网页中更多的内容，解决了现有技术中，采用javascript的方法显示更多的内容而影响页面的反映速度，从而使得用户体验性差的问题。

附图说明

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

图1示出了本发明实施例提供的一种基于css展示网页更多内容的方法的流程示意图；

图2示出了本发明实施例提供的一种基于css展示网页更多内容的装置的结构示意图。

具体实施方式

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

参考图1，示出了本发明实施例提供的一种基于css展示网页更多内容的方法的流程示意图，在本实施例中，所述方法可以包括：

s101：将目标网页隐藏的内容划分为内容区和控制区；其中，所述控制区由带有锚点的两个a标签表示，所述两个a标签，分别表示显示和收起；

本实施例中，当打开一个网页时，直接可以看到的内容为显示的内容，除此之外，还有一些无法直接显示的内容，或者可以理解为被隐藏的内容，用超链接的形式进行了隐藏，当用户需要查看隐藏部分的内容时，可以通过访问超链接访问相应的地址，进而在网页上显示隐藏的内容。

针对于隐藏的内容，在本实施例中，将这些内容划分为内容区和控制区，其中内容区表示的就是被隐藏的内容，例如可以是，文字、图片、符号、音频、视频等，而控制区可以理解为是内容所对应的超链接。

本实施例中，针对于内容区和控制区的划分还可以通过不同的标识进行确定，具体的s101可以包括：

通过p标签表示内容区，并为所述内容区设置id名称；

通过带有锚点的两个a标签表示控制区，并将所述锚点的名字设置为所述id名称，其中，所述两个a标签分别表示显示和收起。

本实施例中，对于通过p标签表示内容区进一步的可以理解为，将该p标签写入div中(中文全称：层叠样式表，英文全称：division)。针对于控制区，由于控制区中是访问内容的超链接，可以采用带有锚点的标签来表示，其中，锚点可以用来指向或者定位要访问的内容。为了可以准确的指向锚点所指向的内容，可以将锚点的名字与该内容区的名字设置为相同的名称。

s102：基于css设置所述内容区的高度，并将溢出的部分进行隐藏。

本实施例中，采用css(中文全称：层叠样式表，英文全称：cascadingstylesheets)的方式，设置该内容区的高度，尽可能的显示更多的内容，对于溢出的部分，即，该内容区中超过了内容区的高度，而无法被显示的内容，因此，可以通过添加溢出部分的隐藏代码，将溢出部分进行隐藏。

本实施例中，对于设置该内容区的高度，可以是基于css依据预设的规则，对该内容区的高度进行设置，或者可以是，技术人员通过编写相应的程度进行。

本实施例中，对于将溢出的部分进行隐藏，可以是通过技术人员编写相应的隐藏程序，或者可以通过调用已存储的隐藏程序。

s103：响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，显示所述目标锚点指向的内容区的内容。

本实施例中，当用户需要访问网页中被隐藏的内容时，点击了隐藏内容的超链接后，网页可以获取该目标锚点的指向，显示所述目标锚点指向的内容区的内容。

其中，网页获取了目标锚点的指向后，将该网页的高度可以自动的转换为自动调整，这样可以根据页面的大小，尽可能的显示更多的内容。

除此之外，还可以是，网页获取了目标锚点的指向后，将该网页的高度转换为预设的高度，其中，该预设的高度可以使得该网页显示更多的内容。

在实际的应用中，需要用户根据相应的按钮，控制显示和收起，这样可能会为用户的使用带来不便，为了更加方便用户操作。s103可以包括：、

所述响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，将表示收起的a标签切换为表示显示的a标签，并显示所述目标锚点隐藏的内容。

除此之外，本实施例还可以包括：

响应于收起目标锚点的链接的指令，获取所述目标锚点的指向，将表示显示的a标签切换为表示收起的a标签，并将显示的所述目标锚点显示的内容。

本实施例中，为了展示网页中更多的内容，可以将目标网页隐藏的内容划分为内容区和控制区，并且，控制区由带有锚点的两个a标签表示；基于css设置所述内容区的高度，并将溢出的内容进行隐藏；响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，显示所述目标锚点指向的内容区的内容。因此，采用css的方式，显示网页中更多的内容，解决了现有技术中，采用javascript的方法显示更多的内容而影响页面的反映速度，从而使得用户体验性差的问题。

参考图2，示出了本发明实施例公开的一种基于css展示网页更多内容的装置的结构示意图，在本实施例中，所述装置可以包括：

划分单元201，用于将目标网页隐藏的内容划分为内容区和控制区；其中，所述控制区由带有锚点的两个a标签表示，所述两个a标签，分别表示显示和收起；

设置单元202，用于基于css设置所述内容区的高度，并将溢出的内容进行隐藏；

显示单元203，用于响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，显示所述目标锚点指向的内容区的内容。

可选的，所述划分单元包括：第一设置子单元，用于通过p标签表示所述内容区，并为所述内容区设置id名称；

第二设置子单元，用于通过带有锚点的两个a标签表示所述控制区，并将所述锚点的名称设置为所述id名称；其中，所述两个a标签分别表示显示和收起。

可选的，所述装置还包括：

转换单元，用于将所述网页的高度转换为自动调整。

可选的，所述显示单元，包括：

显示子单元，用于所述响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，将表示收起的a标签切换为表示显示的a标签，并显示所述目标锚点隐藏的内容。

可选的，所述装置还包括：

响应于收起目标锚点的链接的指令，获取所述目标锚点的指向，将表示显示的a标签切换为表示收起的a标签，并将显示的所述目标锚点显示的内容。

通过本实施例的装置中，为了展示网页中更多的内容，可以将目标网页隐藏的内容划分为内容区和控制区，并且，控制区由带有锚点的两个a标签表示；基于css设置所述内容区的高度，并将溢出的内容进行隐藏；响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，显示所述目标锚点指向的内容区的内容。因此，采用css的方式，显示网页中更多的内容，解决了现有技术中，采用javascript的方法显示更多的内容而影响页面的反映速度，从而使得用户体验性差的问题。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。