站长资讯网
最全最丰富的资讯网站

css如何不显示元素

css设置不显示元素的方法:1、使用【display: none;】方法;2、将【display:none;】改成【visibility: hidden;】

css如何不显示元素

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css设置不显示元素的方法:

(1)display: none;

<!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <style type="text/css">     .box {         width: 160px;         height: 100px;         background: #cad5eb;     }     .title {         height: 40px;         background: #54a962;     }     .content {         height: 60px;         background: #5650bb;     }     </style> </head> <body>     <div class="box">         <h3 class="title">标题</h3>         <p class="content">内容</p>     </div> </body> </html>

css如何不显示元素

设置display: none;后的效果如下显示

css如何不显示元素

可以看出原来的标题部分不见了,而内容部分占领了原来标题的部分

(2)visibility: hidden;

还是上面的例子,只是这次将display:none;改成visibility: hidden; 但结果却大不相同

css如何不显示元素

赞(0)
分享到: 更多 (0)