zoukankan      html  css  js  c++  java
  • 网页侧拉框

    效果图:

    function CloseLeft() {
        document.getElementById("myLeftWindow").style.width = "0";
    }   
    function OpenLeft() {
        document.getElementById("myLeftWindow").style.width = "550px";
    } 
    -------------------------------分割线-----------------------------
    <div class="AddBtn">
        <span onclick="OpenLeft()">&#9776;添加</span>
    </div>
    
    <div id="myLeftWindow" class="LeftWindow">
        <a href="javascript:void(0)" class="closebtn"  onclick="CloseLeft()">&times;</a>
        
    </div>

     部分css

        .LeftWindow {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 2;
            top: 0;
            opacity:0.95;
            left: 0;
            overflow-x: hidden;
            background-color: white;
            transition: 0.4s;
            padding-top: 60px;
        }  
        
        .LeftWindow a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.5s;
        }
        
        .LeftWindow a:hover, .offcanvas a:focus{
            color: #f1f1f1;
        }
        .LeftWindow .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }
         @media screen and (max-height: 450px) {
            .LeftWindow {padding-top: 15px;}
            .LeftWindow a {font-size: 18px;}
        } 
  • 相关阅读:
    跨域 CORS 详解 (转)
    手机自动化(一)
    Appium Desktop-Permission to start activity denied.
    webview元素定位
    电商网站测试点 还需要整理
    性能测试第三天
    性能测试第二天
    DDD
    ATDD
    BDD
  • 原文地址:https://www.cnblogs.com/da48/p/14910815.html
Copyright © 2011-2022 走看看