html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>待服务条款登录界面的html5手机登录界面</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimun-scale=1.0,maximum-scale=0.5" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link href="css/resetDemo.css" rel="stylesheet" />
<link href="css/font.css" rel="stylesheet" />
<link href="css/ModularFormDemo.css" rel="stylesheet" />
<link href="css/swiper-3.3.1.min.css" rel="stylesheet" />
<link href="css/commonDemo.css" rel="stylesheet" />
<link href="css/LoginRegisterDemo.css" rel="stylesheet" />
<script src="js/Libs/jquery.min.js"></script>
<script src="js/Libs/jquery.json.js"></script>
<meta />
</head>
<body>
<div class="wrapper">
<!--页头-->
<header class="header">
<a href="#" class="return floatL"></a>
<h3 class="floatL Logo headTit">登录</h3>
</header>
<section class="main" id="groupForm">
<div class="DeInfo_Inpet DeInfo_Inpet2">
<div class="DeInfoInput LoginInput">
<label class="icon-1 floatL"></label>
<label style="display: none;">用户名/手机号</label>
<input type="text" placeholder="请输入用户名/手机号" class="DeInfo_text" data-regtest="^1[3|4|5|7|8]\d{9}$ ">
</div>
<div class="DeInfoInput LoginInput">
<label class="icon-11 floatL"></label>
<label style="display: none;">密码</label>
<input type="password" placeholder="请输入密码" class="DeInfo_text" data-regtest="\d">
</div>
<p class="errorShow">不能为空</p>
<div class="optCont">
<div class="floatL OptContInfo">
<div class="floatL OptInfoL">
<input type="checkbox" data-style="checkeds" class="checkedNum" />
<label class="icon-30"></label>
</div>
<div class="floatL OptInfoR">是否记住用户名</div>
</div>
<div class="floatL OptContInfo">
<div class="floatL OptInfoL">
<input type="checkbox" data-style="checkeds" class="checkedNum" />
<label class="icon-30"></label>
</div>
<div class="floatL OptInfoR">是否记住密码</div>
</div>
</div>
<div class="optCont">
<div class="floatL OptContInfo OptContInfo2" >
<div class="floatL OptInfoL">
<input type="checkbox" data-style="checkeds" class="checkedNum" />
<label class="icon-30"></label>
</div>
<div class="floatL OptInfoR">已阅读及同意服务条款</div>
</div>
</div>
</div>
<!--按钮-->
<div class="BtnCont">
<button class="BigBtn" id="yanzheng">立即登录</button>
</div>
<div class="loginLink">
<div class="loginLink_text"><a href="#">注册</a><span>|</span><a href="#">忘记密码</a></div>
</div>
</section>
</div>
<script src="js/Libs/swiper-3.3.1.jquery.min.js"></script>
<script src="js/commonDemo.js"></script>
<script src="js/yanzhengDemo.js"></script>
</body>
</html>
resetDemo.css:
/*初始化*/
*{font-family:Microsoft YaHei,sans-serif,Arial;font-size:100%;}
html,body{
background: #f2f2f2;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,button,textarea,p,th,td{padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial}
fieldset,img{border:0}
a{text-decoration:none;color:#000;outline:none}
li{list-style:none}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%;outline: none;}
a{-webkit-transition:all 0.3s linear;-moz-transition:all 0.3s linear;-ms-transition:all 0.3s linear;-o-transition:all 0.3s linear}
.clear:after{
display:block;
content:"clear";
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
.clear{zoom:1;}
.floatL{float: left;}
.floatR{float: right;}
font.css:
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot@4rggux');
src: url('../fonts/icomoon.eot@4rggux#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf@4rggux') format('truetype'),
url('../fonts/icomoon.woff@4rggux') format('woff'),
url('../fonts/icomoon.svg@4rggux#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before, [class*=" icon-"]:before{
font-size: 1.5rem;
color: #009b63;
}
.icon-1:before {
content: "\e900";
}
.icon-2:before {
content: "\e901";
}
.icon-3:before {
content: "\e902";
}
.icon-4:before {
content: "\e903";
}
.icon-6:before {
content: "\e904";
}
.icon-7:before {
content: "\e905";
}
.icon-8:before {
content: "\e906";
}
.icon-9:before {
content: "\e907";
}
.icon-10:before {
content: "\e908";
}
.icon-11:before {
content: "\e909";
}
.icon-12:before {
content: "\e90a";
}
.icon-13:before {
content: "\e90b";
}
.icon-14:before {
content: "\e90c";
}
.icon-15:before {
content: "\e90d";
}
.icon-16:before {
content: "\e90e";
}
.icon-17:before {
content: "\e90f";
}
.icon-18:before {
content: "\e910";
}
.icon-19:before {
content: "\e911";
}
.icon-20:before {
content: "\e912";
}
.icon-21:before {
content: "\e913";
}
.icon-22:before {
content: "\e914";
}
.icon-23:before {
content: "\e915";
}
.icon-24:before {
content: "\e916";
}
.icon-26:before {
content: "\e917";
}
.icon-28:before {
content: "\e918";
}
.icon-30:before {
content: "\e919";
}
ModularFormDemo.css:
.ModularBox{
background: #fff;
padding: 0 1rem;
overflow: hidden;
margin:0.8rem 0;
}
.ModularTitle{
padding:0.8rem 0;
color: #009b63;
font-size: 1rem;
overflow: hidden;
}
.ModularTitle:before{
content: "";
display: block;
width: 0.2rem;
height: 1.2rem;
border-radius: 0.5rem;
background:#009b63 ;
float: left;
margin: 0.1rem 0.3rem 0 0;
}
.ModularTitle .OptContInfo{
margin: 0.1rem 0 0 0.8rem;
}
.DeInfoInput{
height: 2.4rem;
line-height: 2.4rem;
padding: 0 0.5rem;
border:1px solid #ccc;
border-radius: 4px;
font-size: 0.9rem;
margin-bottom: 0.8rem;
background: #fff;
clear: both;
}
.DeInfoInput label{
padding: 0 0.4rem 0 0;
color: #666;
float: left;
}
.DeInfoInput .DeInfo_text{
border: none;
height: 100%;
font-size: 0.9rem;
color: #333;
float: left;
}
.DeInfoInput_Job{
height: auto;
overflow: hidden;
}
.DeInfoInput_Job textarea{
resize: none;
margin: 0.6rem 0;
}
.DeInfoInputSub{
float: left;
width: 42.33%;
clear: inherit;
}
.InfoInputTwo .DeInfoInputSub:last-child{
float: right;
}
#registerBtn .BigBtn{
display: block;
}
#registerBtn .BigBtnTwo{
display:none ;
}
/*下拉框begin*/
.btn-select {
position: relative;
display: inline-block;
width: 100%;
overflow:hidden;
font-size: 0.9rem;
color: #333;
border:1px solid #ccc;
}
.btn-select .cur-select {
position: absolute;
display: block;
width:100%;
line-height:2.4rem;
color: #333;
}
.btn-select .cur-select:before{
content:"";
width:32px;
height:100%;
display:block;
float:right;
}
.btn-select .cur-select:after{
content:"";
width:0;
height:0;
border-top:7px solid #999;
border-left:7px solid transparent;
border-right:7px solid transparent;
display:block;
position: absolute;
top: 50%;
margin-top: -3.5px;
right: 7px;
}
.btn-select select {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
filter: alpha(opacity: 0;);
color: #333;
}
.btn-select select option {
text-indent: 10px;
}
/*下拉框end*/
.InfoInputTwo,
.InfoInputthree{
overflow: hidden;
}
.InfoInputthree .DeInfoInput{
width:60%;
float: left;
}
.InfoInputthree .serInfoBtn{
width:30%;
float: right;
height: 2.4rem;
line-height: 2.4rem;
padding: 0;
margin: 0;
}
.switchMode{
color: #009B63;
clear: both;
display: block;
font-size: 0.9rem;
margin-bottom: 0.8rem;
text-indent: 0.5rem;
}
.errorShow{
color:#f19625;
margin:0 0 0.8rem 0;
font-size:0.9rem;
display:none;
}
.InfoInputUser .tishi{
color:#f19625;
background: none;
width:7rem;
text-align: right;
}
.DeInfoIphone{
display:none;
}
/*图形验证码*/
.codeMain{
width: 6rem;
height: 2.455rem;
background: #f6f6f6 url(../img/line.png) no-repeat center;
float: right;
font-size: 1.7rem;
cursor: pointer;
line-height: 2.455rem;
text-align: center;
}
.code{
display: inline-block;
}
.code span{
color: #506d30;
display: block;
float: left;
font-size: 1.8rem;
}
.code span:nth-child(2){
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.code span:nth-child(3){
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
margin-top: -5px;
}
.code span:nth-child(4){
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.code span:nth-child(5){
margin-top: -3px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.RegCodeMain{
position: absolute;
right: 0.2rem;
top: 0.2rem;
height: 2rem;
border-radius: 0 4px 4px 0;
}
.RegCodeMain .code span{
font-size: 1.5rem;
}
@media only screen and (max-width: 330px) {
.InfoInputUser .tishi{
font-size: 0.8123rem;
width: 6rem;
}
#checkCode{
width: 5rem;
}
}
commonDemo.css:
.wrapper{
padding-top: 3.4rem;
overflow: hidden;
}
/*头部*/
.header{
height:3.4rem;
width: 100%;
background: #fff;
position: fixed;
top:0;left:0;
z-index: 999;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.header a{
display: block;
color: #fff;
line-height:3.4rem;
font-size:1rem;
position: relative;
padding:0 1rem;
z-index: 99;
}
/*返回*/
.return:before{
content:'';
height:12px;
width:12px;
display:block;
float: left;
border:2px solid #009b63;
border-right-width:0;
border-bottom-width:0;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
position: absolute;
top:17px;
left:1.1rem;
}
/*选择城市*/
.header a.CityBtn{
font-size:0.96rem;
color: #009b63;
padding-left: 2.1rem;
}
.header a.CityBtn:before{
width: 0.6rem;
height: 0.6rem;
top:1.15rem;
transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
-moz-transform:rotate(-135deg);
-o-transform:rotate(-135deg);
-ms-transform:rotate(-135deg);
left:1rem;
}
.Logo{
position: absolute;
width: 100%;
text-align: center;
z-index: 98;
height: 100%;
line-height: 3.4rem;
font-size: 1.07rem;
color: #333;
}
.Logo span{
height: 100%;
display: inline-block;
vertical-align: middle;
}
.Logo img{
width:40%;
height: auto;
vertical-align: middle;
}
/*内容*/
.main{
overflow: hidden;
}
/*-------尾部导航-------*/
.footer{
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
}
.footerNav{
position: fixed;
z-index: 92;
bottom: 0;
left: 0;
right: 0;
padding: .115em 0;
background: #f8f8f8;
border-top: 1px solid #e5e5e5;
display: -webkit-box;
display: -moz-box;
display: -o-box;
display: -ms-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
-o-box-orient: horizontal;
}
.footerNav a{
display: block;
height: 100%;
position: static;
-webkit-box-flex: 1;
box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
.footerNav a span{
display: inline-block;
}
.footerNav a span:before{
font-size: 1.6rem;
color: #999;
}
.footerNav a:last-child span{
margin: 0.2rem 0;
}
.footerNav a:last-child span:before{
font-size: 1.4rem;
}
.footerNav a i{
display: block;
font-style: normal;
font-size: 0.9rem;
color: #999;
margin-top: -0.2rem
}
.footerNav a:hover span:before,
.footerNav a:hover i,
.footerNav a.fN_curr span:before,
.footerNav a.fN_curr i{
color: #009b63;
}
/*按钮*/
.BtnCont{
margin:0.3rem 1rem;
overflow: hidden;
}
.BigBtn{
padding: 0.7rem 0;
background: #009b63;
border: none;
border-radius: 5px;
color: #fff;
font-size: 0.92rem;
text-align: center;
margin:0.8rem 0 0;
display: block;
width: 100%;
}
.BigBtnTwo{
background: #f19625;
}
/*弹框*/
.modal{
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 990;
opacity: 0;
background: rgba(109,127,144,0.4);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.MetalInfo{
padding: 1.2rem 0.5rem 1.2rem;
}
.medalCont{
width:280px;
min-height: 160px;
background: #fff;
margin: -110px 0 0 -140px;
position: fixed;
top:50%;
left:50%;
z-index: 991;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
-webkit-backface-visibility: hidden;
-webkit-transition-property:-webkit-transform;
-moz-transition-property:-moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.medalContCurr{
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.medalContCurr .medalCont{
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.md_close{
height:1rem;
width:1rem;
display:block;
position:relative;
}
.md_close:before, .md_close:after{
content:'';
height:2px; width:12px;
display:block;
background:#88898e;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
position:absolute;
top:12px; right:6px;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
}
.md_close:after{
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}
.md_main{
padding:2.5rem 1rem 2rem;
}
LoginRegisterDemo.css:
.logoImg{
width: 200px;
height: auto;
display: block;
margin:0.3rem auto 1.2rem;
}
@media only screen and (max-width: 360px) {
.logoImg{
width: 170px;
}
}
.DeInfo_Inpet{
padding: 1rem;
}
.DeInfo_Inpet2{
/*padding:0 1rem;*/
}
.LoginInput{
position: relative;
}
.LoginInput label{
line-height: 1rem;
padding: 0 0.6rem 0 0.1rem;
margin:0.65rem 0.6rem 0.65rem 0;
border-right: 1px solid #ccc;
}
.LoginInput label:before{
font-size: 1.4rem;
}
.optCont{
overflow: hidden;
}
.OptContInfo{
margin:0 0.8rem 0.8rem 0;
}
.OptContInfo2{
margin: 0;
}
.OptInfoL{
margin:0 0.4rem 0 0;
}
.OptInfoR{
font-size: 0.9rem;
color: #009b63;
}
/*复选框、单选框*/
.checkedNum[data-style="checkeds"]{
display: none;
}
.checkedNum[data-style="checkeds"] + label{
border:1px solid #009b63;
padding: 6px;
border-radius: 2px;
display: inline-block;
overflow: hidden;
position: relative;
width: 0.4rem;
height: 0.4rem;
}
.checkedNum[data-style="checkeds"]:checked + label{
background-color: #009b63;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
}
.checkedNum[data-style="checkeds"] + label:before{
position: absolute;
top:0.15rem;
content:"\e919";
color: #009b63;
width: 100%;
text-align: center;
left:0rem;
font-size: 0.8rem;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.checkedNum[data-style="checkeds"]:checked + label:before{
color: #fff;
}
.loginLink{
text-align: center;
margin-top: 0.8rem;
}
.loginLink_text{
display: inline-block;
}
.loginLink_text a{
font-size: 0.92rem;
color: #009b63;
}
.loginLink_text a:last-child{
color: #333;
}
.loginLink_text span{
margin:0 0.3rem;
height: 0.9rem;
}
/*注册*/
.regUseBtn{
overflow: hidden;
padding: 0.8rem 1rem 0;
}
.regUseBtn a{
display: block;
width: 48%;
float: left;
transition: background 0.5s ease;
-webkit-transition: background 0.5s ease;
}
.regUseBtn a i{
font-style: normal;
}
.regUseBtn a:last-child{
float: right;
}
.yanzhengBtn{
position: absolute;
right: 0.4rem;
top: 0.09rem;
padding: 0.35rem 0;
font-size: 0.85rem;
width: 5rem;
}
.yanzhengNumOn{
background: #ccc;
}
.regUseBtn .regUseCurr{
background: #048858;
}
.regUseBtn .regUseCurr.BigBtnTwo{
background: #de871b;
}
/*团险个险*/
.addPolicyBtn a span{
display: inline-block;
}
.addPolicyBtn a span:before{
color: #fff;
font-size: 1.3rem;
float: left;
}
.addPolicyBtn a i{
font-size: 0.9rem;
display: inline;
line-height: 1.4rem;
margin-left: 0.2rem;
}
/*我*/
.UserList{
overflow: hidden;
margin:1rem 0;
}
.UserList li{
background: #fff;
border-bottom: 1px solid #ccc;
}
.UserList li a{
display: block;
padding:0.8rem 1rem;
position: relative;
overflow: hidden;
color: #666;
line-height: 1.3rem;
font-size: 0.95rem;
}
.UserList li a:before{
content:'';
height:0.6rem;
width:0.6rem;
display:block;
border:2px solid #999;
border-left-width:0;
border-top-width:0;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
position:absolute;
top: 50%;
right:1rem;
margin-top: -0.3rem;
}
.UserList li a i:before{
font-size: 1.3rem;
float: left;
margin: 0.06rem 0.8rem 0 0;
}
.UserList li.UserPic{
margin-bottom: 1rem;
border-bottom: none;
}
.UserList li.UserPic img{
display: block;
width: 4rem;
height:4rem;
border-radius: 50%;
float: left;
margin-right:0.8rem;
}
.UserList li.UserPic a{
color: #009B63;
line-height: 4rem;
}
commonDemo.js:
$(function(){
function CountSize(){
// 计算input宽度
/*$(".DeInfoInput .DeInfo_text").each(function(){
var DeInfoLabel = $(this).parent().find("label").outerWidth(true);
$(this).css("width",$(this).parent().width() - DeInfoLabel -6 + "px");
}); */
// 计算input宽度
$(".LoginInput .DeInfo_text").each(function(index, element) {
var DeInfoLabel = $(this).parent().find("label").outerWidth(true);
console.log(DeInfoLabel);
$(this).css("width",$(this).parent().width() - DeInfoLabel - 25 + 'px');
});
}
CountSize();
// 复选框选中样式,遍历复选框
$(".checkedNum").each(function(i, element) {
var InputVal = $(this).parent().siblings().find("p:first-child span").text();
$(this).attr({"id":"checked" + i,"value":InputVal}); // 设置复选框id和value值
$(this).next("label").attr("for","checked" + i); // label标签
});
});
yanzhengDemo.js:
$(function(){
// section 立即登录按钮
RegInputDiv($('#groupForm'),$('#yanzheng'));
var pwdAnswer = ""; // 定义变量
function RegInputDiv(formId,yanzhengDiv){
formId.find(".DeInfoInput .DeInfo_text").on("blur",function(){ // 文本框失去焦点事件
RegInput($(this),formId); // 文本框 section
})
// 立即登录点击事件 判断input不能为空
yanzhengDiv.on("click",function(){
// 遍历文本框
formId.find(".DeInfoInput .DeInfo_text").each(function(){
return RegInput($(this),formId); // 文本框 section
});
})
}
});
function RegInput(InputThis,formId){
var errorTishi = InputThis.parent().find("label").text(); // 获取label内容
var testVal = new RegExp(InputThis[0].dataset.regtest); // 账号正则表达式
var Regshow = InputThis.is(":visible"); // 如果文本框可见
if(Regshow == false){ // 如果文本框不可见,不做操作
return true;
}
if(testVal.test(InputThis.val())){ // 如果内容合法
formId.find(".errorShow").hide(); // 隐藏错误提示
return true;
}else{ // 如果非法
formId.find(".errorShow").show().text("请输入正确的" + errorTishi); // 提示错误
return false;
}
}