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>
  • 相关阅读:
    hdu 1548 升降梯
    hdu 2544 hdu 1874 poj 2387 Dijkstra 模板题
    hdu 4463 有一条边必须加上 (2012杭州区域赛K题)
    poj 1679 判断MST是不是唯一的 (次小生成树)
    poj 1751 输出MST中新加入的边
    poj 2349 求MST中第S大的权值
    HDU 4389 X mod f(x) (数位DP)
    HDU 5908 Abelian Period (暴力)
    HDU 5907 Find Q (水题)
    HDU 4514 湫湫系列故事――设计风景线 (树形DP)
  • 原文地址:https://www.cnblogs.com/niuyaomin/p/11663875.html
Copyright © 2011-2022 走看看