Heim > Artikel > Web-Frontend > 淡蓝风格的手机登录HTML模板_html/css_WEB-ITnose
淡蓝风格的手机登录HTML模板_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:19:401249Durchsuche
查看效果：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
更多特效：
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS获取非行间样式及兼容问题_html/css_WEB-ITnoseNächster Artikel：第 8 章 嵌入元素_html/css_WEB-ITnose