前端基础，伸缩盒布局小案例及总结 -

首页 > 博客列表 > 前端基础，伸缩盒布局小案例及总结

博主信息

博文 20

粉丝 1

访问量 21242

专题推荐

更多>

代码示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>flex</title>
        <style type="text/css">
            body,ul,li{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            .container{
                position: relative;
                display: flex;
                width: 800px;
                background-color: aquamarine;
                margin: 0 auto;
                text-align: center;
                line-height: 30px;
                top: 20px;
                /* height: 30px; */
            }
            .container>li>ul{
                position: absolute;
                width: 200px;
                text-align: center;
                background-color: #69d49d;
            }
            .container>li{
                flex:1;
            }
            .container>li:hover{
                background-color: #aaff7f;
            }
            .container>li>ul{
                display: none;
            }
            .container>li:hover>ul{
                display: block;
            }
            .container>li>ul>li:hover{
                background-color:  #00aa7f;
            }
        </style>
    </head>
    <body>
        <ul class="container">
            <li>
                PHP
                <ul>
                    <li>基础</li>
                    <li>进阶</li>
                    <li>高级</li>
                </ul>
            </li>
            <li>
                WEB
                <ul>
                    <li>vue</li>
                    <li>uni-app</li>
                    <li>node.js</li>
                </ul>
            </li>
            <li>Java</li>
            <li>Python</li>
        </ul>
    </body>
</html>