zoukankan      html  css  js  c++  java
  • 响应式菜单

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

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

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

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

    未被触发时的状态:

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

     又到了发代码的时刻了

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

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .box{
                 50px;
                height: 30px;
                background: yellowgreen;
                margin: 5px;
                position: relative;
                }
                .hidden{display: none;
                        position: absolute;
                        top: 0;
                        left: 100%;
                         300px;
                        height: 100px;        
                }
                .box:hover .hidden{
                    display: block;
                    background: palegreen;
                }
                .box1{
                 50px;
                height: 30px;
                background: yellowgreen;
                margin: 5px;
                position: relative;
                }
                .box1:hover .hidden{
                    position: absolute;
                    top: -35px;
                    display: block;
                    background: pink;
                }
                .box2{
                 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;
                 200px;
                text-align:center;
                margin:300px auto;
                background: red;                        
            }
            .b1{
                 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>
  • 相关阅读:
    堆和栈的区别
    今天开通博客了!
    【转】Perl中的正则表达式
    【转】Windows server 2008远程桌面轻松搞定
    【转】彻底删除0KB顽固文件或文件夹的方法
    【转】Java URL Encoding and Decoding
    【转】一个女留学生在美国的七年
    【转】风雨20年:我所积累的20条编程经验
    【转】深入浅出REST
    【转】Python正则表达式指南
  • 原文地址:https://www.cnblogs.com/niuyaomin/p/11663875.html
Copyright © 2011-2022 走看看