div css手机网站login表单特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 div css手机网站login表单特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>div css手机网站login表单特效</title>
<link type="text/css" href="css/reset.css" rel="stylesheet">
<link type="text/css" href="css/style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
<meta name="viewport" content="minimal-ui">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">
</head>
<body>
<div>
<div class="hj_wrapPage">
    <div class="hj_wrapImgList">
      	<center><p>xxxx</p></center>
      	<center><p>xxxx</p></center>
    </div>
</div>
<div class="bd1">
	<div class="wa">
	 <div class="wa_wrapImgList">
       <p> 注册可获得价值1000元体验劵</p>
	   <p> 用于免费体验一次付费服务</p>
    </div>
	</div>
	 <div class="hj_wrapImgList2">
       <center>
			<input type="" placeholder="请输入邮箱" class="ku">
			<input type="" placeholder="请输入密码" class="ku">
	   </center>
    </div>
<div class="hj_wrapImgList4">
<center>
<a href="login.html">提交</a>
</center>
</div>
</div>
</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";html{height:100%;width:100%;}
html{font:normal 62.5%/1.5rem "Arial","Microsoft YaHei";}
body{overflow:scroll;overflow-y:hidden;overflow:hidden;background:#b0b0b0;}
@media screen and (min-width:360px){.index table{top:26%;}
.ku{border:medium none;color:#666;font-size:1rem;margin-bottom:8px;padding:3%;width:60%;height:25px;}
}
@media screen and (min-width:600px){.index table{top:26%;}
.ku{border:medium none;color:#666;font-size:1rem;margin-bottom:8px;padding:3%;width:60%;}
}
@media screen and (min-width:320px)and (max-width:375px){.index table{top:17%;}
.gz_wrapImgList2 p{font-size:0.8rem;}
.ku{border:medium none;color:#666;font-size:1rem;margin-bottom:8px;padding:3%;width:60%;}
.hj_wrapImgList2{margin-top:100px;}
}
@media screen and (min-width:320px)and (max-width:360px){.index table{top:17%;}
.gz_wrapImgList2 p{font-size:0.8rem;}
.ku{border:medium none;color:#666;font-size:1rem;margin-bottom:8px;padding:3%;width:60%;}
}
@media screen and (min-width:375px)(max-width:414px){.index table{top:16%;font-size:0.8rem;}
.ku{border:medium none;color:#666;font-size:1rem;margin-bottom:8px;padding:3%;width:60%;}
}
.wrapImgList2 table img{width:19rem;}
.wrapImgList table img{width:19rem;}
/* iphone6 */
@media (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2){.wrapImgList table img{width:240px;}
.gz_wrapImgList2 p{font-size:1.5rem;}
.ku{border:medium none;color:#666;font-size:1rem;margin-bottom:8px;padding:4%;width:60%;height:18px;}
}
/* iphone6 plus */
@media (min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3){.wrapImgList table img{width:250px;margin-left:10px;margin-right:10px;}
.gz_wrapImgList2 p{font-size:1.5rem;}
.ku{border:medium none;color:#666;font-size:1rem;margin-bottom:8px;padding:4%;width:60%;}
}
.clear{zoom:1;}
.hj_wrapPage{height:100%;width:100%;overflow:hidden;}
.hj_wrapImgList{width:100%;background:#0099ff;background-size:100% 100%;background-repeat:no-repeat;height:84px}
.hj_wrapImgList1{top:30%;left:50%;width:100%;padding-left:5px;padding-right:5px;color:#000;font-size:1.5rem;}
.hj_wrapImgList2{margin-top:20px;}
.hj_wrapImgList p{padding:2px;font-size:1.5rem;font-weight:bold;color:#FFFFFF;}
.hj_wrapImgList2 td{line-height:30px;}
.hj_wrapImgList3{top:70%;left:50%;width:80%;padding-left:5px;padding-right:5px;color:#fff;font-size:14px;}
.hj_wrapImgList4{width:100%;color:#fff;font-size:1rem;margin-top:11px;height:40px;}
.hj_wrapImgList4 a{border-radius:5px;background:#009dd9;font-size:2rem;font-weight:bold;color:#ffffff;font-family:"微软雅黑";padding:10px 28%;}
.hj_wrapImgList5{width:100%;color:#fff;font-size:0.8rem;position:absolute;bottom:35px;}
.bd{height:100%;background:#b0b0b0;}
.bd1{height:100%;height:80%;margin:0 auto;}
.bd_wrapImgList{width:100%;padding-left:5px;padding-right:5px;color:#FFFFFF;font-size:2rem;margin-top:50px;}
.bd_wrapImgList1{width:100%;padding-left:5px;padding-right:5px;color:#FFFFFF;font-size:1.5rem;margin-top:70px;}
.bd_wrapImgList00{font-size:1.5rem;color:#FFFFFF;margin:0 auto;}
.bd_wrapImgList1{color:#FFFFFF;font-size:1.5rem;margin-top:60px;margin-bottom:10px;}
.bd_wrapImgList00 p{}
.ku{border:medium none;color:#666;font-size:1.3rem;margin-bottom:15px;width:60%;padding:10px;}
.wa_wrapImgList{margin-top:30px;font-size:1.6rem;color:#FFFFFF;text-align:center;font-weight:bold;}

附件:下载该文件资源,减少时间成本(增值服务)