查看效果：http://hovertree.com/texiao/mobile/10/
或者手机扫描二维码查看效果：
效果图：
代码如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" /><meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable" /><meta content="black" name="apple-mobile-web-app-status-bar-style" /><meta content="telephone=no" name="format-detection" /><title>移动端HTML5登录模板 - 何问起</title><style>body {margin: 0;padding: 0;color: #666;background: #c1d2fe;font-family: Verdana, sans-serif}.form_login {max-width: 640px;margin: auto;text-align: center;padding-top: 100px;}.form-group {width: 355px;margin: 0 auto;height: 50px;margin-bottom: 20px;}.form-group .fa {display: block;width: 50px;height: 50px;float: left;}.form-group .form-control {display: block;width: 300px;height: 48px;float: left;border: 1px solid #ccc;padding: 0;margin-left: 0;text-indent: 1em;themeColor: #00a988;}.form-group .form-control:hover {border: 1px solid #0160A0;}.form-group .checkfont {color: #666;}.form-group .btn {width: 350px;height: 50px;background-color: #0160A0;border: 0px;color: #fff;font-size: 14px;}.fa-user {background: url(http://hovertree.com/texiao/mobile/10/images/user.png) no-repeat center;}.fa-key {background: url(http://hovertree.com/texiao/mobile/10/images/pw.png) no-repeat center;}.hovertree_form_footer {margin-top: 100px;font-size: 14px;color: #5B809A;}.form_logo{font-size:26px;}a{color:gray}</style></head><body><div class="form_login"><div class="form_logo"><img src="http://hovertree.com/themes/hvtimages/hlogo.png" / alt="淡蓝风格的手机登录HTML模板_html/css_WEB-ITnose" ><br />何问起管理系统</div><form method="post" role="form" id="form_login"><div class="form-group"><i class="fa fa-user"></i><input type="text" class="form-control" name="username" id="username" placeholder="Username" autocomplete="off"></div><div class="form-group"><i class="fa fa-key"></i><input type="password" class="form-control" name="password" id="password" placeholder="Password" autocomplete="off"></div><div class="form-group" style="max-width:90%"><input type="checkbox" class="" name="checkbox" id="checkbox" placeholder="checkbox" autocomplete="off"><label class="checkfont" for="checkbox" >记住我的帐号</label></div><div class="form-group"><button type="submit" class="btn btn-primary btn-block btn-login">登录</button><br /><a href="http://hovertree.com/h/bjaf/loucldil.htm" target="_blank">查看代码</a> <a href="http://hovertree.com" target="_blank">首页</a> <a href="http://hovertree.com/texiao/" target="_blank">特效</a></div></form><div class="hovertree_form_footer">© 何问起 hovertree.com</div></div></body></html>转自：http://hovertree.com/h/bjaf/loucldil.htm
推荐：http://hovertree.com/hvtart/bjae/jftxwtko.htm
更多特效：
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
