查看效果：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. GIT常用命令笔记

    最近在做了一个自己的项目.两个人合作的,所以需要用到版本管理工具.本来打算学一下自己搭建svn的,后来朋友推荐我用git,免费,流行,好用,逼格.所以就学习了一下.发现这个git与已经使用惯了的svn ...

  2. SQL Server 中的事务与事务隔离级别以及如何理解脏读, 未提交读,不可重复读和幻读产生的过程和原因

    原本打算写有关 SSIS Package 中的事务控制过程的,但是发现很多基本的概念还是需要有 SQL Server 事务和事务的隔离级别做基础铺垫.所以花了点时间,把 SQL Server 数据库中 ...

  3. [.net 面向对象程序设计进阶] (15) 缓存(Cache)(二) 利用缓存提升程序性能

    [.net 面向对象程序设计进阶] (15) 缓存(Cache)(二) 利用缓存提升程序性能 本节导读: 上节说了缓存是以空间来换取时间的技术,介绍了客户端缓存和两种常用服务器缓布,本节主要介绍一种. ...

  4. ASP.NET MVC 路由(二)

     ASP.NET MVC路由(二) 前言 在上一篇中,提及了Route.RouteCollection对象的一些信息,以及它们的结构所对应的关系.按照处理流程走下来还有遗留的疑问没有解决这个篇幅就来讲 ...

  5. JSP模板继承功能实现

    背景 最近刚入职新公司,浏览一下新公司项目,发现项目中大多数JSP页面都是独立的.完整的页面,因此许多页面都会有如下重复的代码: <%@ page language="java&quo ...

  6. 《App研发录》 源码

    第1章源码: 1.1 重新规划Android项目结构 1.1.zip 1.2 为Activity定义新的生命周期 1.2.zip 1.3 统一事件编程模型 1.3.zip 1.4 实体化编程 1.4. ...

  7. [Hadoop大数据]——Hive初识

    Hive出现的背景 Hadoop提供了大数据的通用解决方案,比如存储提供了Hdfs,计算提供了MapReduce思想.但是想要写出MapReduce算法还是比较繁琐的,对于开发者来说,需要了解底层的h ...

  8. Js toString()方法笔记

    一.前言 toString()用于将该对象以字符串(string)的形式返回,该方法属于Object对象;也就是说对象都能够使用此方法. 之前所接触的是array.toString()数组转换为字符串 ...

  9. Android笔记——SQLiteOpenHelper类

    public 抽象类 SQLiteOpenHelper 继承关系 Java.lang.Object android.database.sqlite.SQLiteOpenHelper 类概要 这是一个辅 ...

  10. 分区函数Partition By的与row_number()的用法以及与排序rank()的用法详解(获取分组(分区)中前几条记录)

    partition by关键字是分析性函数的一部分,它和聚合函数不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录,partition by用于给结果集分组,如果没有指 ...