在写页面的时候，经常会让一个元素进行隐藏。下面是自己总结的一些方法。如果大家有新的想法，请不吝赐教，谢谢！
先给出一段代码：
<style type="text/css"> ul,body{ margin:0; padding:0; } ul{ list-style-type: none; margin-top: 20px; overflow: hidden; background:#bebebe; } li{ padding:4px; float: left; } </style> </head> <body> <ul> <li>首页</li> <li>导航</li> <li>新闻</li> <li>关于</li> </ul> </body>
我们来实现隐藏首页这个元素。
方法一：display:none;
li:first-child{
display:none;
}
效果如下：
方法二：利用opacity属性
li:first-child{
filter:Alpha(opacity=0);//兼容低版本的ie;
-moz-opacity:0;//兼容低版本的FF
opacity: 0.0;
}
方法三：利用visiblity
li:first-child{
visibility: hidden;
}
与display的区别在是否还占有空间
常用的方法就是以上几种，但是还利用定位让元素不可见，或者让这个元素在一个隐藏的元素之中。