css之隐藏内容的方法
css隐藏内容的方法有三种:即display:none、visibility:hidden、overflow:hidden。
1.display:none;的缺陷:
搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略
屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。
2.visibility: hidden ;的缺陷:
隐藏的内容会占据他所应该占据物理空间。
3.overflow:hidden;一个比较合理的方法
.texthidden { display:block; overflow: hidden; width: 0; height: 0; }
将宽度和高度设定为0,然后超过部分隐藏,就会弥补上述1、2方法中的缺陷,也达到了隐藏内容的目的。
css之隐藏内容的方法的更多相关文章
- CSS中隐藏内容的3种方法及属性值
CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59) 在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...
- CSS中隐藏内容的3种方法
CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...
- div+css隐藏内容样式方法
div css隐藏内容样式方法 div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...
- CSS实现隐藏滚动条并可以滚动内容
方法一: 计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码: <div class="outer-container"> &l ...
- CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)
建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找 ...
- 【前端】CSS隐藏元素的方法和区别
CSS隐藏元素的方法和区别 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 隐藏内容但仍保持占位的css写法
通常显示和隐藏内容都会用display:block;和display:none; 如果想要保持内容的占位可以用visbility:visible; 和visiblity:hidden;来控制内容的显示 ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭
一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...
- HTML5--》点击显示隐藏内容
<details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...
随机推荐
- 编译TensorFlow源码
编译TensorFlow源码 参考: https://www.tensorflow.org/install/install_sources https://github.com/tensorflo ...
- JQuery和JS操作LocalStorage/SessionStorage的方法
LocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右,各个浏览器不一致 在所有同源窗口中都是共享的 本质是在读写文件,数据多的话会 ...
- [编织消息框架][JAVA核心技术]cglib动态代理
先在mavne项目里添加cglib库 maven仓库搜索cglib版本 maven地址:http://mvnrepository.com/ 点击最新的版本 3.2.5 复制到pom.xml depe ...
- 1.1 About Percona XtraDB Cluster
摘要: 出处:kelvin19840813 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎 ...
- 【转】java.lang.NoSuchMethodError: javax.persistence.Table.indexes()[Ljavax/persistence/Index;
最近在配置最新的ssh(struts2.3.16.3+hibernate4.3.7+spring4.1.2)的时候遇到的这个错误提示,后来在网上找了半天都不能解决,虽然有个说法是model对象用这样@ ...
- UWP 手绘视频创作工具技术分享系列 - 文字的解析和绘制
本篇作为技术分享系列的第二篇,详细讲一下文字的解析和绘制,这部分功能的研究和最终实现由团队共同完成,目前还在寻找更理想的实现方式. 首先看一下文字绘制在手绘视频中的应用场景 文字是手绘视频中很重要的表 ...
- Netty入门之客户端与服务端通信(二)
Netty入门之客户端与服务端通信(二) 一.简介 在上一篇博文中笔者写了关于Netty入门级的Hello World程序.书接上回,本博文是关于客户端与服务端的通信,感觉也没什么好说的了,直接上代码 ...
- angular4.0 配置打包路径以及资源文件404问题
一.配置打包路径 配置打包路径,便于提交到SVN,不用每次都复制粘贴 在.angular-cli.json文件中修改"outDir"的路径,打包后的项目将发布到路径下 二.解决打包 ...
- JAVA有哪些数据类型?基本数据类型各占多少个字节
java的数据类型分为:基本数据类型和引用数据类型. 基本数据类型各占多少个字节: 数据类型 字节 默认值 byte 1 0 short 2 0 int 4 0 long 8 0 float 4 0. ...
- 【AC自动机】Lougu P3796
题目描述 有NNN个由小写字母组成的模式串以及一个文本串TTT.每个模式串可能会在文本串中出现多次.你需要找出哪些模式串在文本串TTT中出现的次数最多. 输入输出格式 输入格式: 输入含多组数据. 每 ...