27
2017
09

APP登录界面(网页仿制版)

这是一个千牛登录界面
与原版不同的是,这是我们用web仿制的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style> .login{ border: 1px solid #E0E0E0; position: absolute; top: 200px; left: 30%; width: 390px; height: 310px; display: none; } .user input{ display: block; margin: 20px auto; width: 200px; height: 25px; font-size: 14px; text-indent: 32px; border-radius: 30px; border: 1px solid #BABABA; outline: none; } .user{ position: absolute; top: 130px; left: 90px; } .icon-user{ display: block; position: absolute; border-radius: 50px; top: 21px; left: 5px; width: 25px; height: 25px; overflow: hidden; } .icon-user img{ position: absolute; top: -14px; left: -12px; } .icon-pwd{ display: block; position: absolute; border-radius: 50px; top: 70px; left: 5px; width: 25px; height: 25px; overflow: hidden; } .icon-pwd img{ position: absolute; top: -55px; left: -13px; } .min{ position: absolute; top: 5px; right: 35px; width: 20px; height: 20px; z-index: 110; } .close-login{ position: absolute; top: 5px; right: 7px; width: 20px; height: 20px; z-index: 110; } .min-div{ position: absolute; bottom: 1px; width: 100px; height: 30px; background-color: #0894EC; color: #FFFFFF; text-align: center; line-height: 30px; display: none; } .min:hover{ cursor: pointer; border: 1px solid #FFFFFF; } .close-login:hover{ cursor: pointer; border: 1px solid #FFFFFF; } .min-div:hover{ cursor: pointer; opacity: 0.8; } #move{ position: absolute; top: 0; left: 0; width: 100%; height: 100px; z-index: 100; } #move:hover{ cursor: move; } .user button{ width: 200px; height: 30px; display: block; margin: 0px auto; border: 1px solid #0894EC; background-color: #0894EC; color: #FFFFFF; border-radius: 50px; } .user button:hover{ cursor: pointer; } </style>
        <script type="text/javascript" src="js/a.js" ></script>
        <script> //显示登录窗口 function loginShow(o){ document.getElementById("move_div").style.display = "block"; document.getElementById("btn").style.display = "none"; } //用户框获取焦点 function userFocus(){ var user = document.getElementById("userName"); user.style.borderColor = "#0894EC"; } //用户框失去焦点 function userBlur(){ var user = document.getElementById("userName"); user.style.borderColor = "#BABABA"; } //密码框获取焦点 function myFocus(){ var backimg = document.getElementById("backimg"); var pwd = document.getElementById("password"); backimg.src = "img/pwd-input.jpg"; pwd.style.borderColor = "#0894EC"; } //密码框失去焦点 function myBlur(){ var backimg = document.getElementById("backimg"); var pwd = document.getElementById("password"); backimg.src = "img/user-input.jpg"; pwd.style.borderColor = "#BABABA"; } //最小化 function min(){ document.getElementById("move_div").style.display = "none"; document.getElementById("min-div").style.display = "block"; } //最大化 function max(){ document.getElementById("move_div").style.display = "block"; document.getElementById("min-div").style.display = "none"; } //关闭窗口 function closeLogin(){ document.getElementById("move_div").style.display = "none"; document.getElementById("btn").style.display = "block"; } </script>
    </head>
    <body>

        <button id="btn" onclick="loginShow()">登录</button>

        <div id="move_div" class="login">

            <img id="backimg" src="img/user-input.jpg" />

            <!--拖拽区域-->
            <div id="move" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div>

            <!--最小化-->
            <div id="min" class="min" onclick="min()"></div>

            <!--关闭-->
            <div id="close-login" class="close-login" onclick="closeLogin()"></div>



            <!--用户输入-->
            <div class="user">
                <span class="icon-user">
                    <img src="img/login-ioc.jpg" />
                </span>
                <span class="icon-pwd">
                    <img src="img/login-ioc.jpg" />
                </span>
                <input id="userName" type="text" onfocus="userFocus()" onblur="userBlur()"/>
                <input id="password" type="password" onfocus="myFocus()" onblur="myBlur()" />

                <button>登录</button>
            </div>



        </div>

        <!--最小化后显示区域-->
        <div id="min-div" class="min-div" onclick="max()">
            +用户登录
        </div>

    </body>
</html>

其中插入的图片为原版登录界面的截图,注意p去原有的登录设置图即可

上一篇:第一篇:基本框架(基类,网络框架,主页面) 下一篇:ViewPager+Fragment(小圆点)