查看效果：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. ADO.NET Entity Framework CodeFirst 如何输出日志(EF 5.0)

    ADO.NET Entity Framework CodeFirst 如何输出日志(EF4.3) 用的EFProviderWrappers ,这个组件好久没有更新了,对于SQL执行日志的解决方案的需求 ...

  2. 使用NServiceBus开发分布式应用

    系列主题:基于消息的软件架构模型演变 NServiceBus 是一个.Net平台下开源的消息服务框架,这类产品有时也被称作ESB(Enterprise Service Bus)--企业服务总线.NSe ...

  3. 玩转Windows服务系列——Windows服务小技巧

    伴随着研究Windows服务,逐渐掌握了一些小技巧,现在与大家分享一下. 将Windows服务转变为控制台程序 由于默认的Windows服务程序,编译后为Win32的窗口程序.我们在程序启动或运行过程 ...

  4. Christmas Trees, Promises和Event Emitters

    今天有同事问我下面这段代码是什么意思: var MyClass = function() { events.EventEmitter.call(this); // 这行是什么意思? }; util.i ...

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

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

  6. C#实现哥德巴赫猜想

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Goet ...

  7. 谈谈php里的DAO Model AR

    这次要谈的3个关键字:DAO.Model.AR,是我们在做web应用时常见的几个概念,也被称作设计模式(design pattern),先简单看看它们的全拼和中文: DAO:Data Access O ...

  8. Data Profiling Task

    Data Profiling Task 是用于收集数据的Metadata的Task,在使用ETL处理数据之前,应该首先检查数据质量,对数据进行分析,这将对Table Schema的设计结构和生成ETL ...

  9. javascript运动系列第六篇——轨迹和投掷

    × 目录 [1]运动轨迹 [2]拖拽轨迹 [3]投掷 前面的话 一般地,不同的运动形式会产生不同的轨迹.但仅凭肉眼去识别运动轨迹,其实并不是很直观.因此,在页面中显示运动轨迹,是一个重要的问题.物体初 ...

  10. Deferred在jQuery和Angular中的使用与简单实现

    Deferred在jQuery和Angular中的使用与简单实现 Deferred是在jQuery1.5版本中加入的,并且jQuery使用它完全重写了AJax,以前也只是偶尔使用.但是上次在使用Ang ...