<!doctype html>
<!--[if lt IE 7]><html class="nojs ie6"><![endif]-->
<!--[if IE 7]><html class="nojs ie7"><![endif]-->
<!--[if IE 8]><html class="nojs ie8"><![endif]-->
<!--[if gt IE 8]><!--> <html class=nojs> <!--<![endif]-->
<head>
<meta charset="gbk">
<title>仿果壳网html5手机登陆界面源代码模板-模板在线【http://www.htmldivcss.com/zt/】</title>
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<style>
* {margin:0;padding:0;}
body {min-width:320px;font: normal 100%/1.5 "Microsoft YaHei","Hei","WenQuanYi Micro Hei",SimHei,tohoma,sabs-serif;color:#333;background-color:#E6E6E6;}
.container {margin:0 auto 10px;width: 93.125%;max-width:480px;}
.ie6 .container {width:480px;}
/* line */
.line-wrap {border: 1px solid #c5c5c5; -webkit-border-radius:5px;-o-border-radius:5px;-moz-border-radius:5px;border-radius:5px; background-color: #fff;}
.line,.line-first,.line-last,.line-agree {display: block;margin:2px 1em;line-height:40px;overflow:hidden;}
.line-wrap .line-first {border-bottom: 1px solid #c5c5c5;}
/* form */
.form {margin-top:10px;}
.form p input[type=submit], .form p input[type=text] {-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.form .line input,.form .line-first input,.form .line-last input {float:left;width:100%;height:48px;font-size: 18px;border:none;background:#fff;outline: none;}
.form .line label,.form .line-first label,.form .line-last label {float:left;margin-right:2.96992481203007%;letter-spacing:0;font-size:24px;color:#999;}
.form .line-agree {font-size: 11px; margin-left: 20px;}
.form .line-agree label {margin-left: 5px; line-height: 35px; vertical-align: top}
.form .line-agree a {text-decoration:none; color: #369ce8; line-height: 35px; vertical-align: top}
.js .form .line-first,.js .form .line-last {position: relative;}
.js .form .line-first input,.js .form .line-last input {width: 100%;}
.js .form .line-first label,.js .form .line-last label {position:absolute;top:10px;left:5%;}
.js .form .focus label {display:none;}
.form .form-do input { font-size:18px;
margin: 6px auto 30px auto;
height: 50px;
width: 100%;
display: block;
border-radius: 5px;
border: none;
color: white;
background-color: #369ce8;
-webkit-border-radius:5px;-o-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
cursor: pointer;}
.form .form-do input:hover {background-color: #318ed3;}
.form .form-do input:disabled {background-color: grey}
.form .form-tip {overflow:hidden;font-size:14px;font-weight:normal;margin:10px 0; padding: 10px; background-color: #FFC;color: #F11; border-radius:5px; padding:10px;}
.form .form-tip span{float:left; width:88%;}
.form .form-tip .form-tip-pic {float:left; width: 20px; height: 20px; margin-right: 10px;
background-size: 20px 20px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAMAAADypuvZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGNQTFRF/3R0/62t/2pq/1xc/wQE/7e3/9zc/w4O/y0t/6Cg/x8f/xIS/0ZG/8PD/1BQ/+bm/wEB/3Nz/ygo/0pK/5OT/zMz/6Wl//f3/7m5/6ur//T0/05O/4CA/56e/////wAA////xNWZ4AAAACF0Uk5T//////////////////////////////////////////8An8HQIQAAAVVJREFUeNqc1teSwjAMBVCld9I7rPj/r4QNkw2OJW9kvYXJYTIuuoKnVmPRuXmT+X7W5G5XjPobcP4hqHtUqq8DM1qSFYlak4VHzg2ZujkMCiE63vrZ6niOIKTQ1H7/9RkhtpOOhlg3qoqHM3qk+B/C9KGiQTU0wnT4RlOMVxDG04HCFq8hbMM/BHgVIezIia6jyPmghTgHLMLbsqEEJQiTDa0ytP6iAGUIgzeqpah+wthLUT9CgVKEBXRy1IErRy7kcpRDI0cNZHKUgS9Hvh2y+jyrhbBacqvNtTpGVgeWvhpoMO+rQV9CE6q5626qgGsshlrZFmaohG2WlTeX5exVbLMk2nJ1/yzEveLaMhEA3r5PHhsAetTMO5r5qNFCrdxRyYeaFp8MUuPzHNT0552D+jQSkAuhjwTq8EEtOTV8qGOOtrnMmGM3UFmObnZD4sVx9CXAAAiJONy7/YsnAAAAAElFTkSuQmCC);}
/* h2 */
h2 {margin-top:50px;height:1em;line-height:1.5;font-size:0.8em;color:#9ca5ac;border-top:1px #CCC solid;}
h2 span {margin:0 auto;width:13em;display:block;margin-top:-10px;text-align:center;background-color:#E6E6E6;}
.ie6 h2 span {position:relative;}
/* alias */
.alias {margin-top:15px;}
.alias a {margin: 0 0 7px;border: 1px solid #c5c5c5; -webkit-border-radius:5px;-o-border-radius:5px;-moz-border-radius:5px;border-radius:5px;color:#6c717c;text-align: center;text-decoration:none;font-size:1em;background-color: #fff;}
.alias a:hover {background-color: #c5c5c5;}
.alias a img {margin-right: 10px;height: 20px;vertical-align:middle;border:none;}
.ie6 .alias a img {display:none;}
.alias .line,.alias .line-first,.alias .line-last {padding-top:0;padding-bottom:0;height:50px;line-height:50px;}
.ie7 .alias span {top:-50%;}
@media only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio: 2) {
}
.error {margin-top:10px;height:40px;line-height:40px;text-align:center;color:#C43C3C;background-color:#F9EBEB;border:1px solid #EDC6C6;-webkit-border-radius:10px;-o-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
</style>
</head>
<body onload="init()">
<div class="container">
<form method="POST" class="form" novalidate>
<input id="csrf_token" name="csrf_token" type="hidden" value="1441683228.88##3baf98ea9fe81018b15255a1a2520f61ae628e42">
<input checked id="permanent" name="permanent" type="hidden" value="y">
<div class="line-wrap">
<p class="line-first">
<input type="email" value="" required="" name="email" maxlength="40" id="email" class="placeholder" placeholder="果壳帐号">
</p>
<p class="line-first ">
<input class="placeholder" id="password" name="password" placeholder="密码" required type="password" value="">
</p>
<p class="line-last">
<input class="placeholder" id="captcha" maxlength="4" name="captcha" placeholder="验证码" required type="text" value=""><input type="hidden" name="captcha_rand" id="captchaRand" value="2320687147"><img src="https://account.guokr.com/captcha/2320687147/" id="captchaImage" class="captcha"><span>看不清<a id="changeCaptchaImage" href="#" onclick="javascript:var pic=document.getElementById('captchaImage');src=pic.src.split('?')[0];var v=new Date().getTime();pic.src=src+'?v='+v;return false;">换一张</a></span>
</p>
</div>
<p class="line-agree">
<input type="checkbox" id="agree" checked></input><label for="agree">我已阅读并同意<a href="http://m.guokr.com/help/policy/">《用户服务协议》</a>及<a href="http://m.guokr.com/help/privacy/">《隐私条款》</a></label>
</p>
<p class="form-do"><input id="btn-submit" type="submit" value="登录"></p>
</form>
<h2><span>您还可以用以下方式登录</span></h2>
<div class="alias">
<a class="line-first" href="/qq/sign_in/?display=mobile&success=https%3A%2F%2Faccount.guokr.com%2Foauth2%2Fauthorize%2F%3Fclient_id%3D32353%26display%3Dmobile%26redirect_uri%3Dhttp%253A%252F%252Fm.guokr.com%252Fsso%252Fmobile%252F%253Flazy%253Dy%2526rid%253D1612228310%2526success%253Dhttp%25253A%25252F%25252Fm.guokr.com%25252F%26response_type%3Dcode%26state%3D6a9ab974eb33f03b08e1f4f44c165c0df68e2d5b43d
