讓一個元素隱藏的方法

時間 2019-12-11

標籤一個元素隱藏方法简体版

原文原文鏈接

在寫頁面的時候，常常會讓一個元素進行隱藏。下面是本身總結的一些方法。若是你們有新的想法，請不吝賜教，謝謝！css

先給出一段代碼：spa

<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>

咱們來實現隱藏首頁這個元素。code

方法一：display:none;blog

li:first-child{
   display:none;
}

效果以下：ci

方法二：利用opacity屬性it

li:first-child{
        
        filter:Alpha(opacity=0);//兼容低版本的ie;
        -moz-opacity:0;//兼容低版本的FF
        opacity: 0.0;
    }

方法三：利用visiblityclass

li:first-child{
        
        visibility: hidden;
    }

與display的區別在是否還佔有空間float

經常使用的方法就是以上幾種，可是還利用定位讓元素不可見，或者讓這個元素在一個隱藏的元素之中。方法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。