如何通过CSS实现网页内容
文章编号:1069
2024-12-27
我们在写前端页面时,隐藏内容可以说是比较常用的手法,它的作用一般有:隐藏文本/图片、隐藏链接、隐藏超出范围的内容、隐藏滚动条、隐藏弹出层、清除错位和浮动等。 今天我们分享下通过CSS实现网页内容/元素隐藏的几个方法。
一、CSS隐藏内容主要有3个情况1、隐藏所有内容无空白:display: none;2、隐藏溢出的文字或图片:overflow:hidden;3、隐藏内容但是仍然占据空间:visibility:hidden;二、几种有seo作弊嫌疑的方法1、display:none写法:
文字看不见
3、文字大小为0写法:文字看不见
4、width和height为0+防止溢出写法: 5、绝对定位负值方法写法:文字看不见
6、绝对定位+margin负值方法写法:文字看不见
三、其它让内容/元素隐藏的方法{ 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,然后超过部分隐藏,弥补内容会占据所在空间的缺陷,也达到了隐藏内容的目的。本文地址: http://xiaojiuz.com/hlwzxwz/0e8fc59e28ed8ad2abe2.html