ホームページ > 記事 > ウェブフロントエンド > 水色スタイルのモバイル ログイン HTML template_html/css_WEB-ITnose
水色スタイルのモバイル ログイン HTML template_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:19:401249ブラウズ
効果を表示します: http://hovertree.com/texiao/mobile/10/
または、携帯電話で QR コードをスキャンして効果を表示します:
レンダリング:
コードは次のとおりです以下:
<!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" /><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="height:25px; line-height:25px; text-align:left;"><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
その他の特殊効果:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。