手机版(兼容android和ios)用户登录界面H5

本文主要是开发的一个手机版(兼容android和ios)的商城登录页面。

1、接下来直接上HTML的代码

    ${ctx}是jsp中的项目路径标签值，如果大家用纯HTML或PHP换成你们项目路径就可以了。

2、CSS页面login.css代码

body {margin: 0px;background: #FFFFFF;-moz-appearance: none;
}a {text-decoration: none;
}input {-webkit-appearance: none;border: none;background: none;
}
.header {position: fixed;top: 0;left: 0;z-index: 2;width: 90%;
}
.icon-close {background-image: url(../../static/img/icon-home/closex.png);margin: 9% 0 0 16px;width: 6%;height: 6%;background-position: left center;background-repeat: no-repeat;background-size: 80% 80%;display: block;
}.header-title {width: 50%;text-align: left;font-size: 22px;height: 54px;line-height: 44px;margin: 11% 0 0 10%;font-weight: bold;letter-spacing: 3px;
}.address_main {height: auto;width: 90%;padding: 0px 4%;background: #fff;margin-top: 42%;
}.address_main .line {height: 44px;width: 93%;border-bottom: 1px solid #f0f0f0;line-height: 44px;
}.address_main .textline {height: 144px;width: 100%;border-bottom: 1px solid #f0f0f0;line-height: 144px;
}.phoneCode {height: 44px;width: 35%;padding: 0px;margin-left: 6%;outline: none;color: #E6E5EB;
}.address_main .line select {font-weight: bold;height: 40%;width: 17%;font-size: 15px;color: #1A1A1F;appearance: none;-moz-appearance: none;-webkit-appearance: none;background: url(../../static/img/icon-home/downpic.png) no-repeat scroll right center transparent;background-size: 25% 40%;border: none;margin-left: 7%;
}
.phone{height: 100%;width: 55%;outline: none;margin-left: 5%;color: #E6E5EB;
}.loginbtn {height: 44px;margin: 6% 0;background-color: #ABAABA;border-radius: 4px;text-align: center;font-size: 16px;line-height: 44px;width: 92%;color: #E5E5F1;
}.select-list {margin-top: 30px;
}.select-list ul li {height: 110px;width: 33.3333%;
}.select-list ul li a {border: 1px solid #dcdcdc;display: block;height: 80px;text-align: center;line-height: 80px;width: 84%;margin: 0px auto;margin-top: 14px;font-size: 16px;font-weight: 400;border-radius: 5px;
}
.line label{margin: 1% 0 0 7%;color: black;font-weight:bold;
}
.SmsCode{ color:#E6E5EB;
}
.SmsCode,.line label,.phoneCode,.phone,.otherlogin,.nogetpwd,.usepwdlogin{font-size: 14px;
}
.loginbypwd{margin-top:8%;
}
.usepwdlogin{font-weight:400;margin:3% 0 0 4%;color: black;
}
.nogetpwd{font-weight: 400;margin: 3% 0 0 36%;color: #E6E5EB;
}
.otherlogin{margin-top: 20%;text-align: center;
}
.otherlogin a{color:black;
}
.loginprotocol{margin: 7% 0;color: #A5A3AC;font-size: 12px;text-align: center;
}
.userprotocol,.privicyprotocol{color:black;font-weight:bold;padding:0 1%;
}

3、JS代码文件login.js

/*** 获取短信验证码*/
function getSmsCode(){}/*** 登录方法*/
function login(){}function clearValue(o){o.value="";
}


大家有问题欢迎留言讨论。