一种基于CSS展示网页更多内容的方法及装置制造方法及图纸

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

【技术实现步骤摘要】
一种基于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：响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，显示所述目标锚点指向的内容区的内容。本实施例中，当用户需要访问网页中被隐藏的内容时，点击了隐藏内容的超链接后，网页可以获取该目标锚点的指向，显示所述目标锚点指向的内容区的内容。其中，网页获取了目标锚点的指向后，将该网页的高度可以自动的转换为自动调整，这样可以根据页本文档来自技高网...

【技术保护点】
一种基于CSS展示网页更多内容的方法，其特征在于，所述方法包括：将目标网页隐藏的内容划分为内容区和控制区；其中，所述控制区由带有锚点的两个a标签表示，所述两个a标签，分别表示显示和收起；基于CSS设置所述内容区的高度，并将溢出的内容进行隐藏；响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，显示所述目标锚点指向的内容区的内容。

【技术特征摘要】
1.一种基于CSS展示网页更多内容的方法，其特征在于，所述方法包括：将目标网页隐藏的内容划分为内容区和控制区；其中，所述控制区由带有锚点的两个a标签表示，所述两个a标签，分别表示显示和收起；基于CSS设置所述内容区的高度，并将溢出的内容进行隐藏；响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，显示所述目标锚点指向的内容区的内容。2.根据权利要求1所述的方法，其特征在于，将目标网页隐藏的内容划分为内容区和控制区，包括：通过p标签表示所述内容区，并为所述内容区设置ID名称；通过带有锚点的两个a标签表示控制区，并将所述锚点的名称设置为所述ID名称；其中，所述两个a标签分别表示显示和收起。3.根据权利要求1所述的方法，其特征在于，所述获取所述目标锚点的指向后，还包括：将所述网页的高度转换为自动调整。4.根据权利要求1所述的方法，其特征在于，所述响应于显示目标锚点的链接，获取所述目标锚点的指向，显示所述目标锚点隐藏的内容，包括：所述响应于显示目标锚点的链接的指令，获取所述目标锚点的指向，将表示收起的a标签切换为表示显示的a标签，并显示所述目标锚点隐藏的内容。5.根据权利要求1所述的方法，其特征在于，还包括：响应于收起目标锚点的链接的指令，获取所述目标锚点的指向，将表示显示的a标签切换为表示收起的a标签，并将显示的所述目标锚点显示的内容。6...

【专利技术属性】
技术研发人员：沈文策，
申请(专利权)人：福建中金在线信息科技有限公司，
类型：发明
国别省市：福建,35