有哪些的隐藏内容的方法(如果同时还要保证屏幕阅读器可用呢?)

1.display:none;的缺陷

搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略

屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字,同时不利于搜索引擎。

2. visibility: hidden ;的缺陷

这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间

3.overflow:hidden;一个比较合理的方法

.texthidden { display:block;/*统一转化为块级元素*/ overflow: hidden; width: 0; height: 0; }

就像上面的一段CSS所展示的方法,将宽度和高度设定为0,然后超过部分隐藏,就会弥补上述一、二方法中的缺陷,也达到了隐藏内容的目的。


div+css隐藏内容方法

一般情况下,css隐藏的用途
1、对文本的隐藏
2、隐藏超链接(另类黑链)
3、对统计代码隐藏
4、隐藏超出图片
5、css隐藏滚动条
6、css来隐藏div

使用css隐藏方法
1、使用display:none;来隐藏所有信息(无空白位占据)
2、使用overflow:hidden;来隐藏溢出的文字或图片
3、使用overflow-y:hidden;和overflow-x:hidden控制滚动条的隐藏与否

常见div css隐藏案例


1、对display:none;文本图片的隐藏


使用div 中css样式display:none;将使得div内的内容隐藏通过浏览器什么也看不见,并且隐藏的内容也不会占用空间。通过此方法可以 隐藏超链接文本(黑链)和图片等内容同时也会隐藏div层样式。

2、overflow: hidden 隐藏内容或图片
实例如:
我是可以看见的


< div style="overflow: hidden; width:30px; height:20px;">你是看不见我的。


< br/>
同样我也是可以看见的

使用css样式通过对“你是看不见我的”div css层设置固定的高和宽,然后通过overflow: hidden样式即可使得超出固定的高宽内容隐藏同时也不占用被隐藏地方位置。

3、使用overflow-y:hidden;和overflow-x:hidden来隐藏或显示对应横或竖方向的滚动条。


  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值