文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

教你如何用CSS实现网页文字隐藏

懒人大天才

懒人大天才

2024-04-23 23:02

关注

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

教你如何用CSS实现网页文字隐藏_CSS教程_网页文字隐藏_CSS技巧_编程学习网

  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适用于那些隐藏文字后不希望页面布局会发生变化的场景。

  以上就是小编给大家网罗的隐藏网页文字的6种方法,虽然它们都很简单,还在不同程度上存在一些缺陷,但所谓不管黑猫白猫,抓到老鼠的就是好猫。只要这些方法能帮助我们达成最终目的,小编觉得就是好方法。当然如果大家还有更好的方法,欢迎给小编留言,大家共同交流喔!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     442人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     206人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     169人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     248人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     77人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯