CSS样式怎么隐藏？

html-css013

CSS样式怎么隐藏？,第1张

使用display:none；来隐藏所有信息（无空白位占据）推荐，CSSdisplay手册查看

使用overflow:hidden；来隐藏溢出的文字或图片适用推荐，CSSoverflow手册查看

使用overflow-y:hidden；和overflow-x:hidden控制滚动条的隐藏与否，CSSoverflow-y手册查看，CSS手册查看overflow-x

CSS：

CSS（层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。有三种方法可以在站点网页上使用样式表：外部样式表、内部样式表和内联样式。

CSS具有精简代码，降低重构难度、提升网页访问速度、利于SEO优化等优势，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

在网页中我们经常看到鼠标划上时会显示一些网页中一开始没有的东西，例如二级菜单，或者鼠标划上图片时会显示一些淡入淡出的效果

问：这是怎么原理实现的？

其实就是显示和隐藏

问：那么这个现实和隐藏如何实现呢？

其实方法有很多，下面我来带着大家看一下每种实现方式和其不同点

无论使用哪一种方式实现，首先这个东西必须先存在，我们先在结构中存在

一级导航

二级导航 二级导航 二级导航

这样的结构写法在我们的页面中一开始是所有的导航都是显示的

我们想要实现一开始只显示一级导航效果，当鼠标划上一级导航的时候显示二级导航效果

方法一：用display:none和display：block方式实现

一开始给p标签一个display:none

当鼠标划上div时让p标签显示 div:hover p{display:block}

注意：此方式可以实现显示和隐藏的效果，但是不支持过渡效果，也就是你不能看到逐渐显示的过程

方法二：用opacity：0； opacity：1方式实现

一开始给p标签一个opacity:0

当鼠标划上div时让p标签显示 div:hover p{opacity:1}

注意：此方式可以实现显示和隐藏的效果，支持过渡效果，在p标签的初始状态上加上一个transition:1s你是可以看到从无到有淡入淡出的效果的

>need-to-insert-img

方法三：用height：0； height：100px方式实现

一开始给p标签添加一个height:0但是由于里面有二级菜单的内容文字所以会存在溢出，添加一个overflow：hidden即可解决

当鼠标划上div时让p标签显示 div:hover p{height:100px}

注意：此方式可以实现显示和隐藏的效果，支持过渡效果，在p标签的初始状态上加上一个transition:1s你是可以看到类似于卷帘门从上向下拉的效果。

哈哈是不是学到了，好了不说了，老铁们自己看着办法，反正我把方式方法都告诉大家了，是收藏还是点赞。

1、新建一个html文件，命名为test.html。

2、在test.html文件内，使用ul li创建一行列表，在li标签里面使用a标签创建一个文字链接。

3、在a标签的下面，创建一个div模块，在div内写上测试的文字。代码如下。

4、在test.html文件内，创建css标签，在css内初始化页面所有元素样式，设置内外边距都为0 。

5、使用css设置div隐藏（display:none），并且设置div内的文字颜色为红色（color:red）。

6、使用css设置li的hover属性，实现当鼠标放在li标签内的a链接上面时，通过把div的display属性设置为block，把div显示出来。

7、在浏览器打开test.html文件，查看实现的效果。