CSS基础 装饰 元素本身隐藏和显示效果及案例 

1.visibility：hidden;
2.display:    none；

区别：
1.visibility：hidden 隐藏元素本身，且在网页中 占位置
2.display：none;   隐藏元素本身，且在网页中不占用位置，脱标


开发中常用：
       display：none;隐藏    display：block 显示出来

使用案例：鼠标经过弹出下载二维码导航

html结构代码
<body>
     <div class="box">
         <div class="centerbox">
            <ul>
                <li><a href="#">平台导航</a></li>
                <li><a href="#">平台导航</a></li>
                <li class="abc"><a href="#">平台导航</a>
                    <img src="./images/code.jpg" alt="">
                </li>
                <li><a href="#">app下载</a>
                    
                </li>
                <li><a href="#">平台导航</a></li>
                
            </ul>
         </div>
        
     </div>
</body>

CSS结构代码

<style>
        .box{
            height: 37px;
            border-top: 1px solid red;
            border-bottom: 1px solid red;
        }
        .centerbox{
            width: 1075px;
            margin: 0 auto;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul li{
            float: left;
            width: 215px;
            height: 37px;
            border-right: 1px solid red;
            box-sizing: border-box;
            text-align: center;
            line-height: 37px;
        }
        ul li:last-child {
            border-right: 0;
        }
        ul li a{
            text-decoration: none;
            color: #0c0c0c;
        }
        ul .abc{
            position: relative;
        }
        ul .abc img{
            position: absolute;
            top:33px;
            left: 46px;
            display: none;
        }
        ul .abc:hover img{
            display: block;
        }
    </style>

 

 

posted @ 2021-12-30 16:33  嘉琦  阅读(66)  评论(0)    收藏  举报