Question

我有一个页面在登录时显示用户的用户名，如下所示：http://jsfiddle.net/cagxvL9x/2

它可以达到用户屏幕高度小于宽度的程度。（例如平板电脑和台式机/笔记本电脑/上网本电脑系统），

我知道我可以使用PHP检测方法为每次检测编写单独的CSS文件，但我更喜欢将它保存在一个文件中，干净整洁。（而且我不想用Javascript操纵element.style）。

我以前管理过这个，但是然后在Notepad ++上我意外忘记备份该文件并在不知道新文件的情况下覆盖它。（愚蠢的举动）。

有人可以帮我把三个盒子（包括它们的叠加层）留在屏幕的中央，用于所有设备布局，我似乎无法重现我以前做过的方式，也无法恢复旧文件。

提前致谢。

HTML：

<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,  maximum-scale=1.0">
   </head>
   <body>
       <div class="content">
           <div class="kon">
               <div class="ajx">
                    <article class="grt">
                    <div class="grtin">Welcome, (username)</div>
                    <div class="appoverlay">
                        <div class="apps">
                            <div class="oleybar">
                                <div class="aoley oley"></div>
                                <div class="vpoley oley"></div>
                                <div class="foley oley"></div>
                            </div>
                            <div class="1">
                                <div class="bg"></div>
                                <div class="anchor"></div>
                            </div>
                            <div class="2">
                                <div class="bg"></div>
                                <div class="anchor"></div>
                            </div>
                            <div class="3">
                                <div class="bg"></div>
                                <div class="anchor"></div>
                            </div>
                        </div>
                     </div>
                 </article>
             </div>
          </div>
       </div>
   </body>
</html>

CSS：

body{
    margin: 0;
    padding: 0;
    overflow: hidden !important;
    height: 100%;
    width: 100%;
    background: rgb(37, 63, 35);
}

.kon,
.ajx{
    position: absolute;
    top: 0;
    display: block;
    opacity: 1;
    width: 100%;
    height: 100%;
}

.grt{
    opacity: 0;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    width: 80%;
    height: 100%;
    font-size: 26px;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    transition: all .4s ease-in-out;
    text-align: center;
}

.appear{
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
}

.slip{
    top: 45%;
    transition: all 1s ease-in-out 1s;
}

.slip.grt{
    margin-top: 25%;
}

.1,
.2,
.3{
    height: 44px;
    width: 44px;
    float: left;
    margin-top: 5px;
    margin-left: 30px;
}

.bg{
    height: 100%;
    width: 100%;
    border-radius: 10px;
    background: rgb(32, 57, 30);
}

.apps{

}

.appoverlay{
    text-align: center;
    width: 52%;
    position: absolute;
}

.oleybar{
    position: absolute;
    margin-top: 10px;
}

.oley{
    height: 31px;
    width: 31px;
    background-size: 31px 31px !important;
    border-radius: 40px;
    float: left;
    background: #fff;
}

.aoley.oley{
    background: #fff;
}

.vpoley.oley{
    background: #2e3;
}

.foley.oley{
    background: #999;
}

jQuery（JS）：

$(document).ready(function(){
    $(".grt").addClass("appear slip");
    $app(".1, .aoley", function(){
        $(".grt").removeClass("appear slip");
        setTimeout(function(){$(".kon").empty().load("../../1/index.php .ajx");}, 1400);
    });
    $app(".2, .vpoley", function(){
        $(".grt").removeClass("appear slip");
        setTimeout(function(){$(".kon").empty().load("../../2/index.php .ajx");}, 1400);
    });
    $app(".3, .foley", function(){
        $(".grt").removeClass("appear slip");
        setTimeout(function(){$(".kon").empty().load("../../3/index.php .ajx");}, 1400);
    });
});

function $app(s, f){
    $(s).click(f);
}

跨所有设备的中心固定元素（一个CSS文件）

0 个答案: