免费提交网站流程:注册会员 -> 提交网站 -> 人工审核 -> 提升网站流量增加外链 -> 点入及点出一次即可排在首位
当前位置:汇聚吧导航 » 站长资讯 » 教程分享 » 建站知识 » 文章详细 订阅RssFeed

如何通过CSS实现网页内容/元素的隐藏?

来源:汇聚吧导航 浏览:325次 时间:2021-06-30

      我们在写前端页面时,隐藏内容可以说是比较常用的手法,它的作用一般有:隐藏文本/图片、隐藏链接、隐藏超出范围的内容、隐藏滚动条、隐藏弹出层、清除错位和浮动等。 今天我们分享下通过CSS实现网页内容/元素隐藏的几个方法。

imagea59ade1ed2a3ceff.png


一、CSS隐藏内容主要有3个情况

1、隐藏所有内容无空白:display: none;

2、隐藏溢出的文字或图片:overflow:hidden;

3、隐藏内容但是仍然占据空间:visibility:hidden;

二、几种有seo作弊嫌疑的方法

1、display:none

写法:<p style="display:none">文字看不见</p>

2、文本缩进负值

写法:<p style="text-indent:-99999px">文字看不见</p>

3、文字大小为0

写法:<p style="font-size:0">文字看不见</p>

4、width和height为0+防止溢出

写法:<p style="width:0; height:0; overflow:hidden;">文字看不见</p>

5、绝对定位负值方法

写法:<p style="position: absolute; left:-6600px; top:-1000px;">文字看不见</p>

6、绝对定位+margin负值方法

写法:<p style="position:absolute; margin-top:-9999px; margin-left:-9999px; ">文字看不见</p>

三、其它让内容/元素隐藏的方法
{ 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,然后超过部分隐藏,弥补内容会占据所在空间的缺陷,也达到了隐藏内容的目的。

推荐站点

  • 百万站百万站

    百万站-百万优秀网站的大本营,深受百万站长喜爱与支持的网站收录与提交入口!百万站官网汇聚百万精品网站,与您分享百万精彩网站知识。我们深信:每一个优秀网站的背后都有一个值得我们解读的故事。

    www.baiwanzhan.com
  • PaperKeey免费论文查重软件_智能改写论文检测网站PaperKeey免费论文查重软件_智能改写论文检测网站

    PaperKeey论文查重软件聚合了免费论文查重,智能改重、在线改重、同步查重为一体的论文相似性检测工具,极大提高修改论文效率,同时支持中文、英文、日语等多语种论文检测。基于教育学术论文及网络大数据比对,论文查重结果权威、准确。

    www.paperkeey.com
  • 人人自学网-最全的免费教程网站人人自学网-最全的免费教程网站

    最全的自学教程网站就在人人自学网,可在线观看免费视频教程,我要自学网视频教程,如3dmax视频教程,cad视频教程,excel视频教程,flash视频教程等!

    www.rrzxw.net
  • 逗游网_游戏下载基地逗游网_游戏下载基地

    逗游网是的绿色单机游戏下载基地,提供单机游戏、网络游戏、好玩的手机游戏一键下载,自动安装,绿色安全!逗游网让您轻松玩游戏!

    www.doyo.cn
  • 源码库_网站源码_商业源码_免费源码下载网站源码库_网站源码_商业源码_免费源码下载网站

    源码库提供海量免费网站源码下载(asp源码,php源码,.net源码,商业源码),源码动态,网络编程,建站教程,网站素材和网站模板;为中国站长提供最具商业价值的免费源码下载服务。

    www.aspku.com
  • 腾讯动漫腾讯动漫

    腾讯动漫网ac.是中国*大最*的正版动漫网站,连载众多原创国漫,原创动画,正版日漫等海内外最热正版动漫内容,为上千万动漫爱好者提供漫画、动画、资讯、论坛一站式全方位动漫服务,为原创动漫作者提供最优质的创作成长环境,为中国动漫产业打造梦想舞台。热门动画*漫画:尸兄、中国惊奇先生、火影忍者、海贼王、一人之下、爱情公寓、中国惊奇先生、邪能守望等。

    ac.qq.com
  • 模板之家_网页模板_网站模板_企业网站模板下载模板之家_网页模板_网站模板_企业网站模板下载

    CSS模板之家为你提供大量精品网页模板,企业网站模板,网站模板下载,DIV+CSS模板,网页设计模板,网站后台模板,个人博客模板,上千种免费网页模板下载尽在模板之家cssMoban.com。

    www.cssmoban.com
  • 宏猫网宏猫网

    宏猫网—秉承助人为乐的理念,把学习与分享,激发大家的思维潜能作为目标,致力于实现财务自由与健康的人生,做一些对国家、对社会有意义的事情。 宏猫网的口号:思维无边界,大胆想,加油干! 网站分为投资理财、奇思妙想、干货下载、读书学习四大版块。开设乡村振兴、健康知识等专题栏目。

    www.vbamall.com
  • 链接111链接111

    链接111-创建于2020年4月13日。作为最全面的网站导航,网站推广平台,致力为广大网友提供优质网站链接。链接111免费收录高质量网站,友情链接|网站链接|网站推广|网址导航|网址大全。

    www.url111.com
  • 花瓣网_陪你做生活的设计师花瓣网_陪你做生活的设计师

    花瓣网, 设计师寻找灵感的天堂!图片素材领导者,帮你采集、发现网络上你喜欢的事物。你可以用它收集灵感,保存有用的素材,计划旅行,晒晒自己想要的东西

    huaban.com