响应式菜单

响应式菜单是将盒子属性进行变换将display: none;变成display: block;

下面是响应式菜单未被触发时状态：

 

 使用伪类：hover被触发的情况下状态：

 

 响应式图片的原理与上面相同

未被触发时的状态：

 

 使用伪类：hover被触发的情况下状态：

 

 又到了发代码的时刻了

下面是响应式菜单与响应式图片全部代码，望周知亦有所帮助！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
            width: 50px;
            height: 30px;
            background: yellowgreen;
            margin: 5px;
            position: relative;
            }
            .hidden{display: none;
                    position: absolute;
                    top: 0;
                    left: 100%;
                    width: 300px;
                    height: 100px;        
            }
            .box:hover .hidden{
                display: block;
                background: palegreen;
            }
            .box1{
            width: 50px;
            height: 30px;
            background: yellowgreen;
            margin: 5px;
            position: relative;
            }
            .box1:hover .hidden{
                position: absolute;
                top: -35px;
                display: block;
                background: pink;
            }
            .box2{
            width: 50px;
            height: 30px;
            background: yellowgreen;
            margin: 5px;
            position: relative;
            }
            .box2:hover .hidden{
                position: absolute;
                top: -70px;
                display: block;
                background: black;
            }
             .box3{
           /* margin: 220px;*/            
            position: relative;
            width: 200px;
            text-align:center;
            margin:300px auto;
            background: red;                        
        }
        .b1{
            width: 200px;
            height: 200px;
            background-color: orangered;
            position: absolute;
            bottom: 100%;
            left: 0;
            display: none;
        }
        .box3:hover .b1{
            display: block;
        }

        </style>
    </head>
    <body>
        <div class="box">
            <div class="hidden"></div>
        </div>
        <div class="box1">
            <div class="hidden"></div>
        </div>
        <div class="box2">
            <div class="hidden"></div>
        </div>
        <div class="box3">
            一个图pian
            <div class="b1"><img src="9.jpg" width="200px" height="200px"/></div>
        </div>
        
    </body>
</html>

 

posted @ 2019-10-12 20:55  牛耀民  阅读(538)  评论(0)    收藏  举报