查看效果：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">&copy; 何问起 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模板的更多相关文章

  1. 响应式的账号登录界面模板完整代码，内置form表单和js控件

    响应式的账号登录界面模板,内置form表单和js控件 <!DOCTYPE html> <html lang="en"><head><met ...

  2. ASP.NET判断是否为手机登录

    protected void Page_Load(object sender, EventArgs e) { MobileHandle(); } 页面加载时候判断是否为手机登录 protected v ...

  3. 基于HTML5手机登录注册表单代码

    分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

  4. PHP判断当前页面是电脑登录，还是手机登录

    //判断是否是电脑登录,还是手机登录 public function isMobil() { $useragent = isset($_SERVER['HTTP_USER_AGENT']) ? $_S ...

  5. JavaWeb_(session和application)用户登录注册模板_进阶版

    用户登录注册模板_基础版 传送门 用户登录注册模板进阶版 添加了获得获得当前登录用户信息及存储登录人数 用户登录后,在首页.注册页.登录页显示登录用户信息和存储登录人数信息 目录结构 <%@pa ...

  6. JavaWeb_(request和response)用户登录注册模板_基础版

    用户登录注册模板进阶版 传送门 用户登录注册模板基础版 登录:当用户登录成功时,跳转到personCenter.jsp,当用户登录失败时,跳转到login.jsp并给出提示 注册:当用户注册成功时,跳 ...

  7. php判断手机段登录，以及phpcms手机PC双模板调用

    首先一段php代码判断是否为手机浏览: function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP ...

  8. android手机登录时遇到“QQ安全登录发现病毒”解决

    android手机作为开源系统非常容易感染病毒,有时候我们会经常遇到手机QQ登录时检测到app被感染,一般情况是由手机感染病毒所引起的,安装腾讯管家后只能检测病毒和卸载感染病毒的软件,不能清除病毒.解 ...

  9. 【今日推荐】10大流行的 Metro UI 风格的 Bootstrap 主题和模板

    1. BootMetro 基于 Twitter Bootstrap 的简单灵活的 HTML.CSS 和 Javascript 框架,Win8 风格,大爱啊! 立即下载     效果演示 2. Boot ...

随机推荐

  1. 使用ReSharper打造团队代码检查流程

    首先我想跟大家分享一下我们团队的代码检查流程. 1. 项目经理随时会检查成员的代码,如果发现有不符合规范的代码,会在注释里面加todo.比如,假设leo的代码不符合规范,那么项目经理就会加注释: // ...

  2. [ASP.NET MVC 小牛之路]18 - Web API

    Web API 是ASP.NET平台新加的一个特性,它可以简单快速地创建Web服务为HTTP客户端提供API.Web API 使用的基础库是和一般的MVC框架一样的,但Web API并不是MVC框架的 ...

  3. ORA-12899: value too large for column (actual: 27, maximum: 20)

    导入数据时报错以下错误,这是因为原来的数据库是GBK的,每个汉字两个字节,但新数据库是UTF-8的,每个汉字是三个字节,导致超过长度了. ORA-12899: value too large for ...

  4. jsp的 javascript中 嵌套 html 注释

    看到公司的代码,我也是蛋疼了,各种乱. 还发现有很多的jsp的 javascript中 嵌套 html 注释, 这个可行? 我之前可是没用过. 后面查找各种资料发现,这个也是可行的,主要是为了兼容不支 ...

  5. JavaScript中的百变大咖～this

    原文链接:http://www.jeffjade.com/2015/08/03/2015-08-03-javascript-this/ JavaScript作为一种脚本语言身份的存在,因此被很多人认为 ...

  6. IL指令汇总

    名称 说明   名称 说明 Add 将两个值相加并将结果推送到计算堆栈上.   Ldelem.I1 将位于指定数组索引处的 int8 类型的元素作为 int32 加载到计算堆栈的顶部. Add.Ovf ...

  7. 精通visual c++指纹模式识别系统算法及实现

    通过学习,掌握以下几个问题: 1.核心算法,并且向GVF衍生: 2.核心库封装的方法 2016年11月16日06:52:51 昨日实现了梯度场和频率场的计算.最大的感觉就是建立基础代码库的重要性. 如 ...

  8. Nhibernate 4.0 教程入门

    Nhibernate 4.0 教程 目录 1.      下载Nhibernate 4.04. 1 2.      入门教程... 2 3.      测试项目详解... 3 4.      总结.. ...

  9. JS原生第八篇 （帅哥）

    1.1 复习     1. clientX          clientWidth   可视区域的宽度 clientWidth     width  +  padding offsetWidth   ...

  10. NotSupportedException-无法将类型“System.DateTime”强制转换为类型“System.Object”

    几张图就可以说明一切 2015-03-29 21:54:09,206 [77] ERROR log - System.NotSupportedException: 无法将类型“System.DateT ...