查看效果：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. Hadoop学习笔记—11.MapReduce中的排序和分组

    一.写在之前的 1.1 回顾Map阶段四大步骤 首先,我们回顾一下在MapReduce中,排序和分组在哪里被执行: 从上图中可以清楚地看出,在Step1.4也就是第四步中,需要对不同分区中的数据进行排 ...

  2. 推荐:图片轮播插件Nivo Slider

          因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的.        ...

  3. [.net 面向对象程序设计进阶] (28) 结束语——告别2015

    [.net 面向对象程序设计进阶] (28) 结束语——告别2015 <.net面向对象程序设计进阶>这一系列文章写了太长的时间了,大概有半年没写,在年底又一口气写了好几篇.在整个过程中目 ...

  4. [nRF51822] 8、基础实验代码解析大全 · 实验11 - PPI

    前一篇分析了前十个基础实验的代码,从这里开始分析后十个~ 一.PPI原理: PPI(Programmable Peripheral Interconnect),中文翻译为可编程外设互连. 在nRF51 ...

  5. Worktile协同特色之二：任务看板管理

    什么是看板 看板是一种使用可视化管理的方式,跟踪任务在整个价值流中流经的不同阶段,通常我们会用带贴纸的白板,或是电子卡片墙.具备如下几个特征:1. 流程可视化 把工作拆分成小块,一张卡片写一件任务,再 ...

  6. C语言 · 矩阵乘法

    问题描述 输入两个矩阵,分别是m*s,s*n大小.输出两个矩阵相乘的结果. 输入格式 第一行,空格隔开的三个正整数m,s,n(均不超过200). 接下来m行,每行s个空格隔开的整数,表示矩阵A(i,j ...

  7. 在互联网公司参与拍卖是一种怎样的感觉？part 1

    拍卖在中国是不太流行的一件事,为什么呢?说不太出.当初在外国火的不得了的ebay在交易时采用的就是拍卖出价的模式,但进入中国后这种方式就是玩不转,不得以后来也变成了跟淘宝一样的一口价方式. 话说现在每 ...

  8. 每天一个linux命令（49）：at命令

    在windows系统中,windows提供了计划任务这一功能,在控制面板 -> 性能与维护 -> 任务计划, 它的功能就是安排自动运行的任务. 通过'添加任务计划'的一步步引导,则可建立一 ...

  9. Atitit常见的标准化组织与规范数量jcp ecma iso

    Atitit常见的标准化组织与规范数量jcp ecma iso 1. 常见的标准化组织1 1.1. 重要的基金会apache1 1.2. 美国国家标准学会(American NationalStand ...

  10. 上传伪技术~很多人都以为判断了后缀，判断了ContentType，判断了头文件就真的安全了。是吗？

    今天群里有人聊图片上传,简单说下自己的经验(大牛勿喷) 0.如果你的方法里面是有指定路径的,记得一定要过滤../,比如你把 aa文件夹设置了权限,一些类似于exe,asp,php之类的文件不能执行,那 ...