DIV+CSS隐藏内容行之有效的办法

开发 前端
你对DIV+CSS隐藏内容方法是否熟悉,这里和大家分享一下,主要包括CSS隐藏的用途,隐藏方法的使用,DIV+CSS隐藏案例讲解等内容。

DIV+CSS有很多值得学习的地方,本文和大家重点讨论一下DIV+CSS隐藏内容方法,相信本文介绍一定会让你有所收获。

DIV+CSS隐藏内容方法

CSS隐藏的用途

1、对文本的隐藏

2、隐藏超链接(另类黑链)

3、对统计代码隐藏

4、隐藏超出图片

5、CSS隐藏滚动条

6、CSS来隐藏div层

使用CSS隐藏方法

1、使用display:none;来隐藏所有信息(无空白位占据)推荐,CSS display手册查看

2、使用overflow:hidden;来隐藏溢出的文字或图片 适用推荐,CSS overflow手册查看

3、使用overflow-y:hidden;和overflow-x:hidden控制滚动条的隐藏与否,CSS overflow-y手册查看,CSS手册查看overflow-x 

常见DIV+ CSS隐藏案例

1、对display:none;文本图片的隐藏如

  1. <div style="display:none;">你是看不见我的div> 
  2.  

使用div 中CSS样式display:none;将使得div内的内容隐藏通过浏览器什么也看不见,并且隐藏的内容也不会占用空间。通过此方法可以隐藏超链接文本(黑链)和图片等内容同时也会隐藏div层样式。推荐使用隐藏内容。

2、overflow: hidden 隐藏内容或图片
实例如:

  1. 我是可以看见的<br/><br/> 
  2. <div style="overflow: hidden; width:30px; height:20px;">你是看不见我的。div> 
  3. <br/>同样我也是可以看见的  

使用CSS样式通过对“你是看不见我的”div CSS层设置固定的高和宽,然后通过overflow: hidden样式即可使得超出固定的高宽内容隐藏同时也不占用被隐藏地方位置。

3、使用overflow-y:hidden;和overflow-x:hidden来隐藏或显示对应横或竖方向的滚动条。

此案例可以进入CSS手册的overflow-y和CSS在线手册的overflow-x有详细的讲解对滚动条的设置隐藏或显示方法。

【编辑推荐】

  1. DIV CSS编码时必须注意的细节
  2. IE6、IE7、Firefox中margin问题解决办法
  3. DIV CSS隐藏内容样式方法详解
  4. DIV+CSS网页内容显示不完整诊断技巧
  5. DIV CSS网页布局需要掌握的八大技巧


 

责任编辑:佚名 来源: divcss5.com
相关推荐

2010-08-23 10:04:48

CSS浮动

2010-09-02 13:16:44

CSS水平居中

2010-08-26 09:27:07

CSS居中

2010-08-18 16:10:35

IE6CSS

2010-09-15 12:32:23

DIV页面

2010-09-10 13:24:21

DIV表格

2010-08-18 14:32:07

IE6IE7IE8

2010-07-06 11:44:49

UML活动图

2010-05-25 14:42:58

删除SVN版本信息

2010-07-23 16:10:34

Perl用户函数

2010-07-06 13:11:50

Visio画UML图

2010-07-29 10:09:09

Flex数据库

2010-08-06 09:28:53

Flex页面跳转

2010-03-23 16:41:17

云计算

2010-06-30 17:06:32

UML用例图

2015-03-16 11:16:59

生物识别身份验证数据中心

2015-03-03 09:13:22

2010-07-06 13:20:57

Visio画UML用例

2010-06-30 13:04:13

UML业务建模

2010-09-25 10:06:40

jvm.cfg
点赞
收藏

51CTO技术栈公众号