淡蓝风格的手机登录HTML模板

全栈程序员-站长 • 2021年12月22日下午8:00 • 未分类 • 阅读 39

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

查看效果：http://hovertree.com/texiao/mobile/10/

或者手机扫描二维码查看效果：
淡蓝风格的手机登录HTML模板

效果图：

代码如下：

<!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">&copy; 何问起 hovertree.com</div>
</div>
</body>
</html>