如何通过CSS实现网页内容/元素的隐藏?

我们在写前端页面时,隐藏内容可以说是比较常用的手法,它的作用一般有:隐藏文本/图片、隐藏链接、隐藏超出范围的内容、隐藏滚动条、隐藏弹出层、清除错位和浮动等。 今天我们分享下通过CSS实现网页内容/元素隐藏的几个方法。

CSS隐藏网页内容

一、CSS隐藏内容主要有3个情况

1、隐藏所有内容无空白:display: none;

2、隐藏溢出的文字或图片:overflow:hidden;

3、隐藏内容但是仍然占据空间:visibility:hidden;

二、几种有seo作弊嫌疑的方法

1、display:none

写法:<p style=”display:none”>文字看不见</p>

2、文本缩进负值

写法:<p style=”text-indent:-99999px”>文字看不见</p>

3、文字大小为0

写法:<p style=”font-size:0″>文字看不见</p>

4、width和height为0+防止溢出

写法:<p style=”width:0; height:0; overflow:hidden;”>文字看不见</p>

5、绝对定位负值方法

写法:<p style=”position: absolute; left:-6600px; top:-1000px;”>文字看不见</p>

6、绝对定位+margin负值方法

写法:<p style=”position:absolute; margin-top:-9999px; margin-left:-9999px; “>文字看不见</p>

三、其它让内容/元素隐藏的方法

{ visibility: hidden; /* 占据空间,无法点击 */ }

{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }

{ position: relative; top: -999em; /* 占据空间,无法点击 */ }

{ position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ }

{ height: 0; overflow: hidden; /* 不占据空间,无法点击 */ }

{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ }

{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ }

最后讲下,display:none 虽然简便有效,但对搜索引擎不友好,且被屏幕阅读器所忽略。overflow:hidden 是比较合理的方法,推荐写法{ display:block; overflow: hidden; width: 0; height: 0; },将宽度和高度设定为0,然后超过部分隐藏,弥补内容会占据所在空间的缺陷,也达到了隐藏内容的目的。

SEO运营课程

最后,如果你想了解一下SEO行业的推广逻辑和推广方法,或者是有计划想通过SEO来进行创业或者进行就业、变现赚钱的你,不妨看看这个专属的SEO配套课程:

SEO推广体系课

特别申明:本站的主旨在于收集互联网运营相关的干货知识,给运营小伙伴提供便利。网站所收集到的公开内容均来自于互联网或用户投稿,并不代表本站认同其观点,也不对网站内容的真实性负责,如有侵权,请联系站长删除,转载请注明出处:https://www.lnwcn.com/102860.html。
(0)
上一篇 2022年11月1日 下午3:36
下一篇 2022年11月1日 下午7:19

猜你喜欢

发表回复

登录后才能评论

QQ:1124602020
微信:vl54120
备注:周一至周五全天在线,周末可能不在线,另外联系时,请告知来意。

公众号
交流群
运营学社会员,开通可享海量资源与多项权益,点击了解详情