查看效果：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. HTML5- Canvas入门（二）

    上篇文章我们了解了canvas的定义.获取和基础的绘图操作,其中的绘图功能我们讲解了线段绘制.上色.描边等方面知识点. 今天我们来讲讲矩形(Rectangle)和多边形的绘制. 矩形的绘制一共有两个口 ...

  2. 【BOOM】一款有趣的Javascript动画效果

    实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下.    boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...

  3. [Unity3D]自己动手重制坦克舰队ArmadaTank(2)从碰撞说起

    [Unity3D]自己动手重制坦克舰队ArmadaTank(2)从碰撞说起 在上一篇里我给出了重制的坦克舰队效果图和试玩程序.本篇介绍一下玩家坦克和敌方坦克碰撞问题. +BIT祝威+悄悄在此留下版了个 ...

  4. Android开发学习之路-该怎么学Android（Service和Activity通信为例）

    在大部分地方,比如书本或者学校和培训机构,教学Android的方式都基本类似,就是告诉先上原理方法,然后对着代码讲一下. 但是,这往往不是一个很好的方法,为什么? ① 学生要掌握这个方法的用途,只能通 ...

  5. java.io中的System.in、 System.out和System.err

    System.in, System.out, System.err这3个流同样是常见的数据来源和数据流目的地.使用最多的可能是在控制台程序里利用System.out将输出打印到控制台上. JVM启动的 ...

  6. Hello Blog

    转眼之间,工作已经快五年了. 五年走的时候不觉得,当真正过来了,一回头,才真正体会到什么叫时间匆匆. 做了五年的技术,算是多有波折.想一想,做技术真的挺需要耐得住寂寞的,毕竟花花世界,压力太大,诱惑太 ...

  7. matlab 循环读入多个mat文件组合成一个mat文件

    今天做实验,需要到这个功能,在朋友的告知下,写了代码,在此留个标记 clc clear load('F:\效果对比\colorhist\1.mat'); a=ans; a=a'; : filename ...

  8. [汇编与C语言关系]3. 变量的存储布局

    以下面C程序为例: #include <stdio.h> ; ; ; int c; int main(void) { ; char b[] = "Hello World" ...

  9. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

  10. PHP程序员如何理解IoC/DI

    思想是解决问题的根本 思想必须转换成习惯构建一套完整的思想体系是开发能力成熟的标志 详情请点击