淡蓝风格的手机登录HTML模板-roucheng
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了淡蓝风格的手机登录HTML模板-roucheng，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3080字，纯文字阅读大概需要5分钟。
内容图文
查看效果：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" />
<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
更多特效：http://www.cnblogs.com/roucheng/p/texiao.html
内容总结
以上是互联网集市为您收集整理的淡蓝风格的手机登录HTML模板-roucheng全部内容，希望文章能够帮你解决淡蓝风格的手机登录HTML模板-roucheng所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】