flex导航栏

 

css部分

    <style>
            body {
                background-image: url(./img/13.jpg);
                background-color: #343536;
                background-size: cover;
                margin: 0;
                padding: 0;
                /* font-family: Arial, sans-serif; */
            }

            /* 遮罩层 */
            body::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(204, 204, 204, 0.5);
                pointer-events: none;
                z-index: -1;
            }

            .navbar {
                height: 40px;
                line-height: 40px;
                display: flex;
                /* 两边分布 */
                justify-content: space-between;
                background-color: #333;
                color: #fff;
                /* padding: 10px; */
            }

            .navbar ul {
                display: flex;
                /* 去掉无序列表的点 */
                list-style-type: none;
                margin: 0;
                padding: 0;
            }

            .navbar li a {
                color: #fff;
                text-decoration: none;
            }

            .navbar li a:hover {
                background-color: #CCC;
            }

            .img img {
                width: 100px;
                padding: 10px 10px 10px 20px;
            }

            .nav2 ul li {
                font-size: 14px;
                width: 100px;
                text-align: center;
            }


            .droplist {
                display: flex;
                flex-direction: column;
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

            .nav2 .droplist li {
                /* width: 100px; */
                width: 20%;
                align-items: center;
            }

            .droplist a {
                /* display: block; */
                text-decoration: none;
                /* color: #333; */
                font-weight: bold;
            }

            .nav2 a {
                display: block;
            }

            .menu {
                list-style-type: none;
                display: flex;
                margin: 0;
                padding: 0;
            }

            .menu li {
                position: relative;
                /* margin-right: 20px; */
            }

            .menu a {
                color: #333;
                text-decoration: none;
                font-weight: bold;
            }

            .nav2 .submenu {
                display: none;
                position: absolute;
                background-color: f;
                top: 100%;
                left: 0;
                /* padding: 10px; */
            }

            .menu li:hover .submenu {
                display: block;
            }

            .submenu li a {
                color: #000;
            }

            .container {
                margin: 20px;
                display: flex;
                flex-wrap: wrap;
                /* justify-content: space-around; */
                
            }

            button {
                width: 12%;
                height: 30px;
                background-color: #add8e6;
                border: 0;
                margin: 10px;
            }
        </style>
View Code
html部分
<body>
        <div class="navbar">
            <ul>
                <li>
                    <div class="img"><img src="./img/12.png" alt=""></div>
                </li>
            </ul>
            <div class="nav2">
                <ul class="menu">
                    <li>
                        <a href="#">简介</a>
                        <ul class="submenu" style="background-color: #fff;">
                            <li><a href="">公司使命</a></li>
                            <li><a href="">远及使命2的</a></li>
                            <li><a href="">管理团队3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">业务</a>
                        <ul class="submenu">
                            <li><a href="">下拉列4</a></li>
                            <li><a href="">下拉列2</a></li>
                            <li><a href="">下拉列3</a></li>
                        </ul>
                    </li>
                    </li>
                    <li><a href="#">员工</a> </li>
                    </li>
                    <li><a href="#">企业责任</a></li>
                    <li><a href="#">投资者</a></li>
                    <li><a href="#">媒体</a></li>
                </ul>
            </div>
        </div>
        <!-- 内容 -->
        <div class="">
            <div class="container">
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
            </div>                
            </div>
        </div>
    </body>
View Code

 

 

 

 

 

效果图

 

posted @ 2023-09-19 23:21  is橙子  阅读(22)  评论(0)  编辑  收藏  举报