03——导航条

最新推荐文章于 2022-10-18 15:27:45 发布

高杉夏

最新推荐文章于 2022-10-18 15:27:45 发布

阅读量120

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_47886206/article/details/125665250

版权

如图：

body代码：

快速生成菜单栏内容：：快捷键：ul.first>li*6>ul.second>li*6+enter

css代码：

1、清除网页多余边距

2、设置导航栏底层盒子样式——nav 样式

3、设置 logo部分盒子样式（重点：左浮动）、 .logo img{ 宽；高}

5、设置菜单栏盒子样式 .mule{ 宽、高、右浮动}

6、一级目录盒子 样式，因一级目录( .catalog-first )是菜单栏盒子（.mule）的子级元素，所以一级目录盒子( .catalog-first )不用再设置宽高，且该盒子的宽高属性将继承父级元素（.mule）的宽高。.catalog-first{ margin:0 auto;} 内容居中显示

7、一级目录 .catalog-first li{ 浮动；list-style;宽；水平居中；垂直居中 }

8、二级目录 .catalog-second li{ list-style;宽；水平居中；垂直居中 ;display:none;}

效果：二级目录内容将暂时消失

9、 .catalog-first>li:hover .catalog-second>li{

display: block;（当鼠标悬停于一级目录上时，二级目录将出现）

}

<body>
    <nav>
        <div class="logo"><img src="image/01.PNG" alt=""></div>
        <div class="mule">
            <!-- 快捷键：ul.first>li*6>ul.second>li*6 -->
            <ul class="catalog-first">
                <li><a href="#">目录</a>
                    <ul class="catalog-second">
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                    </ul>
                </li>
                <li><a href="#">目录</a>
                    <ul class="catalog-second">
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                    </ul>
                </li>
                <li><a href="#">目录</a>
                    <ul class="catalog-second">
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                    </ul>
                </li>
                <li><a href="#">目录</a>
                    <ul class="catalog-second">
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                    </ul>
                </li>
                <li><a href="#">目录</a>
                    <ul class="catalog-second">
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                    </ul>
                </li>
                <li><a href="#">目录</a>
                    <ul class="catalog-second">
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                        <li>二级目录</li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</body>

 <style>
        *{
            margin:0;
            padding:0;
        }
        nav{
            width:1000px;
            height:100px;
            margin: 100px auto;
            background-color:whitesmoke;
            /* opacity: 0.5; */
            color: black;
            font:bolder 24px "楷体";
            box-shadow: 2px 2px wheat;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .logo{
            width: 80px;
            height: 80px;
            /* line-height: 80px; */
            background-color: white;
            float: left;
            margin-top: 10px;
            margin-left: 100px;
        }
        .logo img{
            width: 80px;
            height: 80px;
        }
        .mule{
            width: 660px;
            height: 100px;
            /* background-color: red; */
            float: right;
            margin-right: 10px;
        }
        .catalog-first{
            /* width: 660px;
            height: 100px; */
            margin: 0 auto;
        }
        .catalog-first li{
            float: left;
            list-style: none;
            width: 110px;
            line-height: 100px;
            text-align: center;
        }
        .catalog-second li{
            width: 110px;
            /* height: 80px; */
            list-style: none;
            text-align: center;
            line-height: 80px;
            background-color:whitesmoke;
            box-shadow: 2px 2px wheat;
            display: none;
        }
        .catalog-first>li:hover .catalog-second>li{
            display: block;
        }

    </style>