在HTML里用CSS隐藏div的方法

我们知道,在制作网页的过程中常常会想隐藏一些内容,比如网站添加第三方统计显示的图标等,如何通过css隐藏,怎么让图片作为背景,但文字又不显示呢?这篇文章来给大家解读一下。

一、普通隐藏网页内容

CSS样式单词:display:none
假如我们想隐藏一段统计代码,但又不想显示出统计代码图标,又不影响统计功能,我们即可使用此CSS样式单词display:none(这单词意思不显示对象及对象内容)。

CSS代码:
.tongji{display:none}

HTML片段:

隐藏内容

立即学习“前端免费学习笔记(深入)”;

说明:此DIV CSS隐藏,将隐藏对象DIV及对象内容,但功能不受影响。对于搜索引擎来说,无论你此样式是标签内使用还是向这个实例一般分开CSS与HTML,搜索引擎都会不读取和索引你隐藏内容,对于隐藏关键字的朋友来说,千万不要使用此CSS隐藏方式来隐藏关键字或锚文本链接,不然只是个徒劳。

二、图片做背景,隐藏图片上文字,又不影响A超链接 锚文本

我们平时会遇到,我们想以图片作为对象背景,内容用文字+超链接来做优化,同时又想隐藏文字,超链接不受影响,这样来优化网页,即不影响美观又达到了搜索引擎优化的效果。

所用关键CSS样式:text-indent:-9999px

相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章!

相关阅读:

怎么制作公司的数据大屏

怎样用 Jest 测试 JavaScript 应用

移动端video视频播放的问题案例总结

以上就是在HTML里用CSS隐藏div的方法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545295.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:50:34
下一篇 2025年12月21日 16:50:40

相关推荐

  • 怎样用CSS隐藏图片背景的文字内容

    这次的案列是怎样用css隐藏图片背景的文字内容,我们先使用使用background背景是将图片设为背景显示;然后使用text-indent缩进是隐藏a链接内容和链接标签是对文字设置锚文本链接。下面就是实例案列。 实例案例描述 这里便于观察CSS DIV案例效果,我们就来实现的网站的布局。 扩展阅读:…

    好文分享 2025年12月21日
    000
  • HTML如何2d和3d转换

    现在比较流行的vr和裸眼3d想必大家都一定听说过,今天给大家介绍的的是在html里,怎么转换2d和3d效果。 transform:        rotate()  旋转函数 (deg) deg  度数        skew(X,Y) 倾斜函数 (deg) 立即学习“前端免费学习笔记(深入)”; …

    好文分享 2025年12月21日
    000
  • HTML里的最后一行文字显示不全怎么处理

    在我们的网页里,布局中文字内容超出div或显示一半显示不全,那么我们要怎么进行解决呢?今天就给大家点来最后一行文字显示不全的处理方法。 div css布局中DIV盒子里的最后一排文字字体显示一半显示不全如何进行解决?或者最后一排文字内容超出DIV边框,最后一排内容显示与隐藏如何控制和取舍的CSS布局…

    好文分享 2025年12月21日
    000
  • HTML怎么实现数字焦点图轮播代码

    html怎么实现数字焦点图轮播代码?数字焦点图轮播怎么做?数字焦点图轮播需要注意什么?给大家一份实现数字焦点图轮播代码,需要的朋友可以借鉴一下。 数字焦点图轮播代码 @@##@@ @@##@@ @@##@@ 1 2 3 数字焦点图轮播代码就是这么多了,更多精彩请关注创想鸟其它相关文章! 相关阅读: …

    好文分享 2025年12月21日
    000
  • CSS3里怎么实现单选框动画特效

    css3里怎么实现单选框动画特效?为什么要实现单选框动画特效?下面我们给大家举俩个例子,帮大家熟练掌握用css3实现单选框动画特效 这里,我们指定 input 标签的 type 值为 radio,并且一下所有的 radio 的 name 值都相同,这样才可以实现单选效果。对于这里的 label 中的…

    好文分享 2025年12月21日
    000
  • CSS3里怎么实现loading动画效果

    今天我们来教大家怎么用css3做出loading的动画效果。为什么要用loadning做出动画效果,我们给大家做一个实例,相信看了以后你一切的迷惑都会云消雾散。 第一步画出静态的小菊花。 sk-fading-circle { width: 40px; height: 40px; position: …

    好文分享 2025年12月21日
    000
  • CSS3里怎么实现打字动画

    相较于之前的css版本,我们利用css3可以实现很多炫酷的东西,比如老版的css无法实现的打字动画。下面我们就给大家带来一个小案例,看看酷炫的打字动画是怎么做出来的。 Document .box { width:100%; height:500px; text-align:center; posit…

    好文分享 2025年12月21日
    000
  • html页面用js中实现查找功能

    今天先说一个这几天做的功能,就是html页面的查找功能。 这个功能主要是实现在html查找框内输入字符,之后按后面的上一个下一个按钮,会自动把查询区域内的匹配字符用特殊的样式标记,之后可以继续按上一个下一个按钮把按照顺序浏览匹配字符,并把当前匹配的字符用另一种样式与其他匹配字符加以区别。付有html…

    2025年12月21日
    000
  • 在css里div怎么垂直居中

    如果是在高宽的div在网页中垂直居中,那一定很简单,相信大家也很容易的写出来,但如果是固定高宽的div如何垂直居中呢?那么这些div如何垂直居中呢?这篇文章,我总结一下 固定高宽div垂直居中 enter image description here 如上图,固定高宽的很简单,写法如下: posit…

    好文分享 2025年12月21日
    000
  • css的开发小技巧

    关于css技巧类的在网站里已经发了很多了,那么我今天在总结归纳一下平时在工作中可以遇到问题,并且说一下用css的解决方案,什么是多列等高布局? 点击增加一侧文字,另一侧背景也增加。 html代码: haorooms多列等高布局左 多列等高布局,使用正负 margin 与 padding 相冲的方式实…

    好文分享 2025年12月21日
    000
  • html文字怎么竖排显示

    有些时候我们需要一段文字从上到下竖着显示排班,那么在css里需要怎么操作才能让文字在网页端是竖排显示呢?今天来给大家解答一下这个疑惑 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃。但有2中方法对文字字体实现竖排显示,在接下…

    好文分享 2025年12月21日
    000
  • HTML的语言编码有哪些

    在html里,编码可导致浏览者通过ie时候网页乱码,也可以导致div+css的兼容性hack,编码非常的重要,一般编码的位置放在html网页中的head>和中间。今天我们就介绍一下关于编码的知识。 一般这段网页编码放在html网页中的 和中间。 html编码样式 通过改变charset=utf…

    好文分享 2025年12月21日
    000
  • html的网页结构由哪些部分组成

    我们都知道,开发一个网页的时候一定是要先布局网页的结构和组成部分,那么我们有哪些部分需要注意呢?下面给大家总结归纳一下。 首先,html页面是静态的从头到尾没有程序的执行是纯的html语言,是不经过服务器处理就直接送出给浏览器呈现给浏览者。 而其他后缀的结尾的网页相对来说就是动态网页页面,动态页面是…

    好文分享 2025年12月21日
    000
  • html的绝对路径和相对路径怎么使用

    当我们引用文件的时候,每一个路径都是不同的,今天我们就来讨论一下绝对路径和相对路径的共同以及不同之处,让我们以后能够分清引用路径的利弊。 相对路径:以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对。 绝对路径:以…

    2025年12月21日 好文分享
    000
  • html里的if注释怎么使用

    我们在css布局里常常会用到ie,css,hack,ie的条件注释会起到很大的作用,那么今天我们就说一下怎么使用if条件注释。 以小于符号+叹号+两个减号开始 两个减号大于符号结束构成(字符均为英文小写输入),而注解注释内容放入其中。 一般注释,我们不能使用浏览器看见注解内容,只能通过html源代码…

    好文分享 2025年12月21日
    000
  • html的标签内用css操作style属性

    在html的标签内使用style属性是为了方便我们直接使用css样式。这样我们在改对象的时候可以加入css样式。比较方便 style语法结构 style=”css样式” 常见标签内使用style   一般的html标签都可以加入style属性直接使用css样式。比如 立即学习…

    好文分享 2025年12月21日
    000
  • html里div居中需要注意哪些

    很多人有这样的疑惑。当我们在布局一张网页时,通常网页主体框架是居中于浏览器中的。那么如果想要实现最外层div水平居中那么肯定需要单独设置。设置div居中需要注意哪些事项呢?今天就来给大家介绍一下。 假如最外层DIV盒子的CSS命名为“#divcss5”,这个时候为了兼容各大浏览器实现最外层的这个盒子…

    好文分享 2025年12月21日
    000
  • html里的br,p和DIV有什么区别

    很多人弄不明白,br,p和div都是标签,他们之前有什么区别?我想怎么用都可以吗?并不是这样的,今天就来给大家详细的说一下br,p,div这三种标签有什么区别 div和p是成对组合闭合标签; 是单一的闭合标签。 以 开始, 结束; 以 开始, 立即学习“前端免费学习笔记(深入)”; 结束 小例: 内…

    好文分享 2025年12月21日
    000
  • html里怎么插入图片

    在html里我们常常会插入图片,那么插入图片需要怎么实现?让html显示图片有什么需要什么主意的方面吗?今天我们就来说一下怎样在html插入图片 在html插入图片 让图片显示需要HTML标签来实现,使用img标签即可实现。 html图片标签语法     img介绍: 立即学习“前端免费学习笔记(深…

    好文分享 2025年12月21日
    000
  • 怎么选择合适的HTML标签

    在divcss布局时会遇到一个问题,那就是如何选择html标签布局,但对于非新手csser来说非常简单,但对于刚刚学习或刚刚入手css制作来说却是一个无形问题。那么我们今天就来归纳一下,什么情况下用什么标签。 我们在布局的时候总是会遇到各种各样的问题,那么这里大家简单介绍如何选择HTML标签: 1、…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信