相关资讯

Relevant information
CS课程网页设计辅导分析
时间:2018-08-24 文章来源:洋蜜蜂

现在的网页设计越来越动态化,我们既想要实现网页的动态化,又要顾全搜索链接,就不得不对网页添加一些文字,但这些文字与动态化网页似乎又格格不入。怎么办呢?解决的方法是把这些文字进行隐藏。针对这种想法小编为大家网罗了几种CSS隐藏网页文字的方法,有需要的的朋友不妨参考一下。

 

教你如何用CSS实现网页文字隐藏_CSS教程_网页文字隐藏_CSS技巧_洋蜜蜂CS辅导

 

1.text-indent:-9999px

这种方法有一个局限性它只适用于块级元素block,如果我们想隐藏掉a上的字体时,问题就来了,将a转化成block的话,往往它身后的的元素就被他赶到下一行了,如果正好这个a后面是一个a按钮,就要用float来浮动以使他身后再出现簇拥者,貌似有点小麻烦喔!

 

2.display:none

这是一种最为人所熟知也是最常用的方法。它可以使包括容器本身在内的东西都消失,简便且有效。但人无完人,同样这种方法也存在两个耳熟能详的缺陷,就是对搜索引擎不友好,且被屏幕阅读器所忽略。

 

3.positon:absolute

这种方法的原理是使用绝对定位将文字推出可视区,不过虽然可视性不存在,但仍占据物理空间,所以并不是真正意义上的隐藏文字。

 

  代码如下

 

  .texthidden{

 

  positon:absolute;

 

  margin-top:-9999px;

 

  margin-left:-9999px;

 

  }

 

  4.overflow:hidden

 

  具体代码如下

 

  .texthidden{

 

  display:block;/*统一转化为块级元素*/

 

  overflow:hidden;

 

  width:0;

 

  height:0;

 

  }

 

  5.使用line-height:0

 

  代码

 

  .yincang{

 

  line-height:0;

 

  font-size:0;

 

  overflow:hidden;

 

  }

 

别看代码不多,只有3行。但它们不仅能出色地隐藏掉你background之上的字体,而且在ie6.0、7.0、8.0、firefox 3.010浏览器都能使用。

 

6.visibility:hidden

设置元素的visibility为hidden也是一种常用方法,和display:none的区别在于,文字在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排。

 

  .hidden{

 

  visibility:hidden;

 

  }

 

visibility:hidden适用于那些隐藏文字后不希望页面布局会发生变化的场景。

        

洋蜜蜂CS辅导机构争当海外留学的引导者,创新式辅导模式与海外名校师资,旨在为学生学有所成,提供各方位的服务,包括课程辅导,选课咨询,写作辅导等服务。

更多CS课程资讯,详情可点开洋蜜蜂官网即可获得更多,如果有CS课程辅导需求,可以咨询24小时在线客服微信:yuff996,洋蜜蜂助你度过学习难关。

上一篇:CS编程java11新特性分析辅导 返回列表 下一篇:CS编程语言java特点辅导分析