知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    移动端实现水平垂直居中的整个页面loading层

    作者:bbin视讯真人娱乐平台登入 2018-10-21 人气:
    移动端实现水平垂直居中的整个页面loading层,因为是移动端,所以采用flex布局,目前来说,基本上手机浏览器和微信浏览器都对flex支持良好了,这个水平垂直居中实现方法放到微信小程序中一样可以。采用flex布局,loading-box中的内容 水平居中,loading-box中的内容 垂直居中

    html代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
     content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title>移动端实现水平垂直居中的整个页面loading层</title>
        <style>
     html,body{ padding: 0; margin: 0;}
     .loading-box{
     position: fixed; left: 0;right: 0;top: 0;bottom: 0; /*使得loading层浮动到其他层上面,并且尺寸和整个屏幕大小一样*/
     z-index: 10;    /*给个 z-index 覆盖到主题内容上面*/
    
     background: #fff;  /*遮挡后面的内容*/
    
     display: flex;  /*采用flex布局*/
     justify-content:center; /*loading-box中的内容 水平居中*/
     align-items: center;    /*loading-box中的内容 垂直居中*/
     }
     .loading{
     text-align: center; /*文本水平居中*/
     }
     </style>
    </head>
    <body>
    <div class="main">
        <p>测试内容,懒人建站</p>
        <p>这里主要是布局,至于loading你使用一张loading gif图片还是,css3动画,整个可以在增加图片或者css3动画进去</p>
    </div>
    
    <!--loading-->
    <div class="loading-box">
        <div class="loading">
            <img src="http://bbinsxzrylptdr.xsb868.com/uploads/allimg/131207/1-13120F03048-50-lp.gif" alt="">
            <p>Loading...</p>
        </div>
    </div>
    </body>
    </html>

    演示截图

    移动端实现水平垂直居中的整个页面loading层

    ↓ 查看全文

    移动端实现水平垂直居中的整个页面loading层由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    移动端实现水平垂直居中的整个页面loading层-最新评论

    网站地图 bbin视讯线上真人登入 bbin视讯真人百家乐登入 bbin视讯官网平台登入
    申博太阳城2900官网 申博菲律宾申博 申博官网平台 申博电子游戏
    新葡京网登入 华人娱乐论坛 500彩票网二分彩 澳门星际酒店
    ag旗舰厅网站登入 ag旗舰厅直营网登入 ag视讯网站登入 ag视讯官方代理登入
    ag视讯客服端下载登入 申博138ag旗舰厅登入 AG亚太集团登入 bbin视讯现金直营登入
    587sj.com 171sj.com S618R.COM 236SUN.COM 716SUN.COM
    77sbsun.com 761sun.com 195PT.COM 8YAS.COM 67ib.com
    316sun.com 151ib.com 267SUN.COM 333xsb.com 588XTD.COM
    66TGP.COM 581tt.com XSB438.COM 729sun.com 984SUN.COM