zoukankan      html  css  js  c++  java
  • CSS0000: flex弹性布局 toggle改变样式 延迟加载 js css

    1,让body中所有元素 上下左右居中

        body {
          display: flex;
          justify-content: center;
          align-items: center;
          background: #F8FFAE;
          background: -webkit-linear-gradient(-65deg, #43C6AC, #F8FFAE);
          background: linear-gradient(-65deg, #43C6AC, #F8FFAE);
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

    2,flex 弹性布局

    display:flex 意思是弹性布局

    刚吃的html部分不变,css部分

    父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同

    1:2分时

    同样分为3份时

    3, toggle改变样式

    css

          .audio.green-audio-player .volume .volume-btn {
            cursor: pointer;
          }
          .audio.green-audio-player .volume .volume-btn.open path {
            fill: #44BFA3;
          }

     js:

    var volumeBtn = audioPlayer.querySelector('.volume-btn');
    volumeBtn.classList.toggle('open');
     
    html:
              <div class="volume-btn">
                <svg xmlns="" width="24" height="24" viewBox="0 0 24 24">
                  <path fill="#566574" fill-rule="evenodd" d=" 7.693H0z" id="speaker">
                </svg>
              </div>
     
     
    4,延迟加载 js css
     
        // 延迟加载js css
        function dynamicLoadJs(e, n) {
            var t = document.getElementsByTagName("head")[0],
                a = document.createElement("script");
            a.type = "text/javascript", a.src = e, "function" == typeof n && (a.onload = a.onreadystatechange = function() {
                this.readyState && "loaded" !== this.readyState && "complete" !== this.readyState || (n(), a.onload = a.onreadystatechange = null)
            }), t.appendChild(a)
        }
        function dynamicLoadCss(e) {
            var n = document.getElementsByTagName("head")[0],
                t = document.createElement("link");
            t.type = "text/css", t.rel = "stylesheet", t.href = e, n.appendChild(t)
        }
        var lan = "./ver/lang/",
            prx = "",
            II = !1;
        dynamicLoadCss(prx + "ver/css/in.css"), 
        dynamicLoadJs(prx + "ver/js/ic.js", function() {}), 
        dynamicLoadJs(prx + "ver/js/ve.js", function() {}), 
        dynamicLoadJs(prx + "ver/js/ap.js", function() {
            var e = document.createElement("div");
            e.id = "loadgif", document.body.appendChild(e);
            var n = document.createElement("img");
            n.src = A.b + "/des.png", n.id = "desImg", 
            n.style = "display:none; position: absolute; 500px; z-index: 999; pointer-events: none;", 
            document.body.appendChild(n), 
            dynamicLoadJs(prx + "ver/js/in.js", function() {})
        });
     
     
    琥珀君的博客
  • 相关阅读:
    ASP.NET Web API 框架研究 Self Host模式下的消息处理管道
    ASP.NET Web API 框架研究 Web Host模式下的消息处理管道
    ASP.NET Web API 框架研究 核心的消息处理管道
    ASP.NET Web API 框架研究 Web Host模式路由及将请求转出到消息处理管道
    ASP.NET Web API 框架研究 ASP.NET Web API 路由
    ASP.NET Web API 框架研究 ASP.NET 路由
    ASP.NET Web API 入门 (API接口、寄宿方式、HttpClient调用)
    MVVM模式
    RESTful Web API 理解
    C# 函数式编程及Monads.net库
  • 原文地址:https://www.cnblogs.com/eliteboy/p/12395701.html
Copyright © 2011-2022 走看看