让一个元素隐藏的方法

在写页面的时候，经常会让一个元素进行隐藏。下面是自己总结的一些方法。如果大家有新的想法，请不吝赐教，谢谢！

先给出一段代码：

<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的区别在是否还占有空间

常用的方法就是以上几种，但是还利用定位让元素不可见，或者让这个元素在一个隐藏的元素之中。

 

posted @ 2016-03-19 16:28  珊瑚月  阅读(429)  评论(0)  编辑  收藏  举报