CSS教程:CSS让网页文字自动隐藏

2016-02-19 23:55 1 1 收藏

下面请跟着图老师小编一起来了解下CSS教程:CSS让网页文字自动隐藏,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - Web开发 】

文字隐藏应用广泛,但常用的方法没有什么亲和力。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

常用文字隐藏方法的缺陷:

1、display:none

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

屏幕阅读器会忽略被隐藏的文字。

2、visibility: hidden

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

这种方法隐藏了文字却仍然占据物理空间。

更好的方法:

overflow:hidden

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

从代码似乎就可以看出更具亲和力,因为它是自动隐藏,而不是强制隐藏。

来源:https://www.tulaoshi.com/n/20160219/1630856.html

延伸阅读
标签: Web开发
阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样。阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样。 上一篇介绍了:CSS3教程(3):border-color网页边框色彩 一般可以分为box-shadow和textshadow两类。 CSS3的box-shadow和textshadow可以写做:box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y...
标签: Web开发
下面通过创建一个鼠标滑过加亮显示的 HTC 来演示一下创建 HTC 的过程。 1、创建 HTC 文件的架构。一个标准的 HTC 文件含有一个 SCRIPT 块和一对可选的 COMPONENT 标记。 以下是引用片段: PUBLIC:COMPONENT SCRIPT /SCRIPT /PUBLIC:COMPONENT 2、写一个可执行的脚本。 在下面的代码中,ATTACH 被用于设置 HTC 接收元素在 onmouseove...
标签: Web开发
通过上一章的学习,读者了解到了CSS强大的表现控制功能,特别是在布局方面有很大的优势。相对于代码条理混乱、样式杂糅在结构中的表格布局,CSS将带来全新的布局方法,让网页设计师更轻松、更自由。本章通过多个示例展示CSS布局网页的方法,并对CSS的盒模型作详细阐述。相信读者在深入理解盒模型后,布局网页、定位CSS网页元素将更加自如。 ...
标签: Web开发
我们在网页教学网中向大家介绍过很多CSS经验与技巧,这些东西都发布在http://www.webjx.com/css/的文章中,相信对大家是有一些帮助与启发的。有些习惯显得尤为重要,今天与您分享六个CSS习惯。因为习惯其实是会变的,所以只能写最近的。这些习惯都跟技术无关,如果不遵守,也不会出错。但是我觉得良好的习惯会体现一个人的素质。 一、...
标签: Web开发
在div+css布局中,一般都这样来整体构架的: div id="header"/div div id="center"/div div id="footer"/div 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: div id="header" div id="title"这里是网站的标题/div div...

经验教程

600

收藏

51
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部