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

程序员爱巧技术 2022年11月18日

0 收藏 560 点赞 3,446 浏览 910 个字

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="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >平台导航</a></li>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >平台导航</a></li>
                <li class="abc"><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >平台导航</a>
                    <img src="./images/code.jpg" alt="">
                </li>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >app下载</a>                </li>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >平台导航</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>