CSS样式（选择器+浮动效果)

最新推荐文章于 2022-09-23 11:56:16 发布

Y1916326465

最新推荐文章于 2022-09-23 11:56:16 发布

阅读量241

点赞数

原文链接：http://www.cnblogs.com/lidyfamily/p/11281376.html

版权

编写代码实现如下图效果：

实现代码及注解如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>导航栏下拉菜单</title>
    <style type="text/css">
        .nav{
            background: red; /*导航栏底色为红色*/
            color: #fff;  /*导航栏字体为白色*/
            width: 400px; /*导航栏宽度为400像素*/
        }
        ul{
            padding: 0; /*去除ul标签的内边距*/
            list-style: none; /*去掉ul标签前的小圆点*/
        }
        p,ul{
            margin: 0; /*去除外边距*/
        }
        .nav >ul::after{
            content: "";
            display: block;
            clear: both;  
        }  /* 伪元素清除浮动，浮动后的导航栏处于浮动状态，故清除浮动效果使其具有一定的高度*/
        .nav li{
            line-height: 30px;/*行高、行间距、垂直居中*/
        }
        .nav >ul >li{
            float: left; /*左浮动，使一级导航从左到右排列成一行*/
            width: 100px; /*宽度为100像素*/
            text-align: center; /*字体居中显示*/
            position: relative; /*相对定位，相对其父级元素来定位*/
        }
        .nav >ul >li:hover{
            background: blue; /*鼠标悬停时底色为蓝色*/
            color: #fff;/*鼠标悬停时字体为白色*/
        }
        .nav >ul >li >ul{
            display: none; /*隐藏ul标签下的li标签下的ul内容*/
            position: absolute;/*绝对定位，将二级导航与二级导航固定在一个块里*/
            background: blue; /*底色为蓝色*/
            color: #fff; /*字体为白色*/
            width: 100%; /*宽度为上一级li标签的100%*/
        }
        .nav >ul >li:hover >ul{
            display: block; /*块级元素*/
        }

        .one,.two{
            height: 200px;/*设置盒子的宽为200像素*/
            width: 200px;/*设置盒子的高为200像素*/
        }
        .one{
            background: red;/*设置盒子1的底色为红色*/
            float: left;/*设置盒子1左浮动*/
            display: none;/*隐藏盒子1*/
        }
        .two{
            background: blue;/*设置盒子2底色为蓝色*/
            display: none;/*隐藏盒子2*/
        }
        .red:hover ~ .one{
            display: block;/*鼠标悬停在按钮显示红色上显示盒子1的块级元素*/
        }
        .blue:hover ~ .two{
            display: block;/*鼠标悬停在按钮显示蓝色上显示盒子2的块级元素*/
        }

    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- 一级导航 -->
        <ul>

            <li>
                <p>菜单一</p>
                <!-- 二级导航 -->
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JS</li>
                </ul>
            </li>

            <li>
                <p>菜单二</p>
                <ul>
                    <li>one</li>
                    <li>two</li>
                    <li>three</li>
                </ul>
            </li>

            <li>
                <p>菜单三</p>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </li>

            <li>
                <p>菜单四</p>
                <ul>
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="box"></div>
    <br><br><br><br><br>
    <!-- 显示红色按钮 -->
    <input type="submit" name="red" value="显示红色" class="red">&nbsp;
    <!-- 显示蓝色按钮 -->
    <input type="submit" name="blue" value="显示蓝色" class="blue"><br>
    <!-- 盒子一 -->
    <div class="one"></div>
    <!-- 盒子二 -->
    <div class="two"></div>
    
</body>
</html>