zoukankan      html  css  js  c++  java
  • 蛮好蛮使用的登陆界面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb3212"/>
        <title>登陆界面</title>
            <style type="text/css">
    * {
            margin:0;
            padding:0;
            font-size:12px;
            font-weight:normal;
            font-family:verdana, tahoma, helvetica, arial, sans-serif, "宋体";
            font-style:normal;
            list-style-type:none;
            text-decoration:none;
    }
    div#body input#fnbtn {
            78px;
            height:39px;
            border:none;
            cursor:pointer;
            position:absolute;
            top:40px;
            left:100px;
            background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') 0 -70px no-repeat;
    }
    div#mask {
            position:absolute;
            top:0;
            left:0;
            background:#fff;
            filter:alpha(opacity=60);
            -moz-opacity:0.2;
            z-index:100;
    }
    div#login {
            position:absolute;
            top:75px;
            left:100px;
            293px;
            z-index:200;
    }
    div#login h2 {
            height:26px;
            padding-top:3px;
            padding-left:25px;
            background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') -84px -70px no-repeat;
    }
    div#login h2 input {
            height:18px;
            18px;
            float:right;
            border:none;
            cursor:pointer;
            margin:2px 6px 0 0;
            background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') 0 -169px no-repeat;
    }
    div#login h2 a {
            display:block;
            float:left;
            83px;
            height:26px;
            line-height:26px;
            text-align:center;
            text-decoration:none;
            color:#666;
    }
    div#login h2 a.cur {
            color:#f00;
            background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') 0 -187px no-repeat;
    }
    div#login ul {
            padding:14px 0 18px 12px;
            background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') -84px bottom no-repeat;
    }
    div#login ul li {
            padding-left:60px;
            margin-top:10px;
            display:inline-block;
    }
    div#login ul li {
            display:block;
    }
    div#login ul li:after {
            content:"youdian";
            clear:both;
            display:block;
            height:0;
            visibility:hidden;
    }
    div#login ul li tt {
            float:left;
            60px;
            margin-left:-70px;
            text-align:right;
            line-height:22px;
            color:#444;
    }
    div#login ul li div input.cell, div#login ul li div input.cell2 {
            height:16px;
            padding:2px;
            line-height:16px;
            179px;
            border:1px #dcdcdc solid;
            color:#666;
    }
    div#login ul li div input.cell2 {
            50px;
    }
    div#login ul li div label {
            color:#666;
            cursor:pointer;
    }
    div#login ul li div img {
            margin-bottom:-7px;
            margin-left:8px;
    }
    * html div#login ul li div img {
            margin-bottom:-4px;
    }
    *+html div#login ul li div img {
            margin-bottom:-4px;
    }
    div#login ul li div input#fnlogin {
            59px;
            height:21px;
            cursor:pointer;
            border:none;
            margin-right:15px;
            background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') 0 -148px no-repeat;
    }
    div#login ul li p {
            padding-top:4px;
            color:#f00;
    }
    </style>
    </head>
    <body>
    <div id="body">
    <input id="fnbtn" type="button" title="" />
    </div><div id="mask" style="display:none;"></div>
    <div id="login" style="display:none;">
    <h2><input id="fnquit" type="button" title="退出登录" /><a href="#" class="cur" name="Email">Email登录</a><a href="#" name="用户名">用户名登录</a></h2>
    <ul><form id="LoginForm" name="LoginForm" action="http://www.lanrentuku.com/"  method="post" enctype="multipart/form-data" ><li><input id="loginType" name="loginType" type="hidden"/><tt><label id="logtype" for="email">Email:</label></tt><div><input id="username" name="username" type="text" class="cell" onKeyPress="return checkSubmit(event)"/></div></li>
    <li><tt><label for="password">密 码:</label></tt><div><input id="password" name="password" type="password" class="cell" onKeyPress="return checkSubmit(event)" /></div></li><li><tt></tt>
    <div><input id="reme" name="rememberme" type="checkbox" /> <label for="reme">下次自动登录</label></div></li>
    <li><tt></tt> <div><input id="fnlogin" type="button"/><a href="http://www.lanrentuku.com/" target="_blank" onclick="return checkForgetPassword()">忘记密码?</a></div></li>
    </form></ul>
    </div>
    <script type="text/javascript">
    function g(obj) {
            return document.getElementById(obj);
    }
    var login = {
            title:null,
            show:function(){
                    var sWidth,sHeight;
                    sWidth = screen.width;
                    sWidth = document.body.offsetWidth;
                    sHeight=document.body.offsetHeight;
                    if (sHeight<screen.height){sHeight=screen.height;}
                    g("mask").style.width = sWidth + "px";
                    g("mask").style.height = sHeight + "px";
                    g("mask").style.display = "block";
                    g("login").style.display = "block";
                    g("login").style.right = g("body").offsetLeft + "px";
                    
    //                window.status = g("body").offsetLeft;
            },
            hide:function(){
                    g("mask").style.display = "none";
                    g("login").style.display = "none";
            }
    }
    g("fnbtn").onclick = function(){
            login.show();
            this.blur();
            this.style.backgroundPosition = "0 -109px";
    };
    g("fnlogin").onclick = function() {
        // The following 5 lines of code is used to get the login type & pass to the form
        // One More line of code is insert to root_index.jsp to capture the hidden value
        if (document.getElementById("logtype").innerHTML == "Email:") {
            document.getElementById('loginType').value = 'email';
        } else {
            document.getElementById('loginType').value = 'mobile';   
        }
        document.LoginForm.submit();
    };
    g("fnquit").onclick = function(){login.hide();g("fnbtn").style.backgroundPosition = "0 -70px";};
    var aa = g("login").getElementsByTagName("a");
    var aTab = new Array();
    for(var i=0; i<aa.length; i++){
            if(aa[i].parentNode.nodeName == "H2"){
                    aTab.push(aa[i]);
            }
    }
    for(var j=0; j<aTab.length; j++){
            aTab[j].onclick = function(){
                    this.blur();
                    if (this.className != "cur"){
                            for(var k=0; k<aTab.length; k++){aTab[k].className = ""};
                            this.className = "cur"
                            g("logtype").innerHTML = this.name + ":";
            }
            }
    }
    </script>
    <script language="javascript">
    login.hide();
    </script>
    </body>
    </html>

  • 相关阅读:
    引入background和background-size不显示图片
    vue,新手上路,基础,常见问题
    Java设置环境变量
    JS判断是否是手机登录及类型
    Mongodb查询语句与Sql语句对比
    IIS7下使用urlrewriter.dll配置
    反射获取属性
    数据库Convert关于时间取值
    JS实现嵌套Iframe页面F11全屏效果
    针对上次表格编辑的打印问题及解决方案
  • 原文地址:https://www.cnblogs.com/ymyglhb/p/1571922.html
Copyright © 2011-2022 走看看