CSS之二级弹出菜单设计

最新推荐文章于 2023-11-23 16:53:25 发布

码说芯语

最新推荐文章于 2023-11-23 16:53:25 发布

阅读量357

点赞数

本文链接：https://blog.csdn.net/YYBDESHIJIE/article/details/105891210

版权

1、css里面两种隐藏方式：

（1） display: none;不占用物理空间
(2)visibility:hidden;占用物理空间

2、选择器：

1、后代选择器：``.aside ul li{

}`

2、子代选择器：.aside ul > li{

}`

3、邻代选择器：`.aside ul + li{

}`

3、CSS之伪元素案例：

  .sub-nav:before{
            content: '';
            width: 0px;
            height: 0px;
            border-left: 5px solid rgba(255, 255, 255, 0);
            border-bottom: 5px solid rgba(255, 255, 255, 0);
            border-top: 5px solid rgba(255, 255, 255, 0);
            border-right: 5px solid black;
            display: inline-block;
       }

完整代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后台首页</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/css">
        *{
           margin: 0;
           padding: 0%;
         }
       .header{
           width: 100%;
           height: 60px;
           background-color: black;
           position: absolute;
           left: 50px;
           top: opx;
           right: 0px;
       }
       ul,ol{
           list-style: none;
       }
       .aside{
          width:50px;
          position: absolute;
          left: 0px;
          top: 0px;
          bottom: 0px;
          background-color: yellow;
          color:red;
       }

       .article{
           left: 50px;
           right:0px;
           top: 60px;
           bottom: 0px;
           background-color: brown;
           position: absolute;
       }

       .hidden{
           display: none;
       }

       .aside ul > li{
          
           width: 50px;
           height: 50px;
           text-align:center ;
           line-height: 50px;
           position: relative;
       }

       .aside ul > li:hover{
           background-color: black;
           opacity: 1;
       }

       .aside ul > li:hover div{
           display: block;
       }
       .aside .logo{
        width: 50px;
        height: 60px;
        text-align: center;
       }
       .aside .logo img{
        width: 40px;
        height: 40px;
        vertical-align: middle;
       }

       .sub-nav{
           width: 210px;
           min-height: 0px;
           position: absolute;
           left: 50px;
           top: 0px;
           z-index: 999;
       }
       
       .sub-nav ol{
         background-color: yellow;
         float: right;
       }

       .sub-nav ol>li{
           width: 200px;
           height: 50px;
           text-align: center;
           line-height: 50xp;
           color: white;
       }

       .sub-nav ol>li:hover{
           background-color: turquoise;
       }
       .sub-nav:before{
            content:'';
            width: 0px;
            height: 0px;
            border-left: 5px solid rgba(255, 255, 255, 0);
            border-bottom: 5px solid rgba(255, 255, 255, 0);
            border-top: 5px solid rgba(255, 255, 255, 0);
            border-right: 5px solid black;
            display: inline-block;
       }

    </style>
</head>
<body>
    <!--H5的语义化标签-->
    <header class="header">
       <div>
           <img src=""/>
       </div>
       <div>
            <img src=""/>
            <span>Young</span>
        </div>
    </header>

        <aside class="aside">
            <h3 class="logo"> 
                <img src="D:\Users\YYB\Desktop\Young\images\1.jpg"/>
            </h3>
            <ul>
                <li>
                    <h5> 
                        <i class="fa fa-user-plus"></i>
                    </h5>

                    <div class="sub-nav hidden" >
                        <span></span>
                        <ol>
                            <li><a href="admin-user.html" target="mainFream">用户查询</a></li>
                            <li>用户统计</li>
                        </ol>
                    </div>

                </li>
                <li> 
                    <h5> 
                        <i class="fa fa-home"></i>   
                    </h5>

                    <div class="sub-nav hidden">
                        <ol>
                            <li><a href="admin-article.html" target="mainFream">文章查询</a></li>
                            <li>文章统计</li>
                        </ol>                            
                    </div>

                </li>
            </ul>
        </aside>

        <article class="article">
            <!--嵌入动态的页面-->
            <iframe name="mainFream" src="admin-user.html" width="100%" height="500px" frameborder="0"> </iframe>
        </article>

    <footer>

    </footer>
</body>
</html>