h5登录页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>影像登录</title>
<style>
body{
background: url('image/bg@2x.png')
}
.logo{
width:100px;
margin: 107px auto 101px auto;
}
.carName{
width: 80%;
height: 40px;
margin: 0 auto;
position: relative;
background-color: #4ea7ce;
border-radius: 4px;
opacity: 0.8;
}
.carPassword{
width: 80%;
height: 40px;
margin: 20px auto;
position: relative;
background-color: #4ea7ce;
border-radius: 4px;
opacity: 0.8;
}
.code{
width: 80%;
height: 40px;
margin: 20px auto;
position: relative;
} .carName input{
width:70%;
height: 38px;
background:none;
border: none;
color:#ffffff;
}
.carPassword input{
width:70%;
height: 38px;
background:none;
border: none;
color:#ffffff;
}
.code input{
width:60%;
height: 38px;
background:none;
border: none;
color:#ffffff;
}
.icon-yonghuming{
width:6%;
height:20px;
background-image: url(image/user@2x.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 20px 20px;
z-index: 200000;
display: block;
float: left;
margin: 10px 20px; }
.icon-mima{
width:6%;
height:20px;
background-image: url(image/pwd.png@2x.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 20px 20px;
z-index: 200000;
display: block;
float: left;
margin: 10px 20px;
}
.icon-code{
width:10%;
max-width: 17px;
height:20px;
background-image: url(image/safe@2x.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 20px 20px;
z-index: 200000;
display: block;
float: left;
margin: 10px 20px;
}
.code img{
width:44%;
}
/* 修改placeholder颜色 */
::-webkit-input-placeholder { /* WebKit browsers */
color:#ffffff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#ffffff;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#ffffff;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:#ffffff;
}
.submit{
width:80%;
height: 40px;
margin: 60px auto;
background-color: #ffffff;
border-radius: 4px;
}
.submit input{
width:100%;
background: none;
border:none;
height: 38px;
color: #2c97c5;
font-weight: bold;
}
.ionic_code{
width:70%;
float: left;
height: 40px;
background-color: #4ea7ce;
opacity: 0.8;
}
.codeImg{
float: left;
width: 30%;
height: 40px;
background-color: #b2ddf0;
text-align: center;
line-height: 40px;
}
</style>
</head> <body>
<div class="login">
<div class="logo">
<img width="100" src="data:image/logo@2x.png"/>
</div>
<form id="loginForm" action="" class="">
<div class="carName">
<i class="iconfont icon-yonghuming"></i>
<input id="username" type="text" class="usernames" placeholder="请输入用户名">
</div>
<div class="carPassword">
<span class="ionic_pass">
<i class="iconfont icon-mima"></i>
<input id="password" type="password" class="passwords" placeholder="请输入密码">
</span>
</div>
<div class="code">
<div class="ionic_code">
<i class="iconfont icon-code"></i>
<input id="password" class="passwords" placeholder="请输入验证码">
</div>
<div class="codeImg">
<!-- <img src=""/> -->
1234
</div>
</div>
<div style="clear: both;"></div>
<div class="submit">
<input id="submit" type="button" value="登 录" />
</div>
</form>
</div>
</body>
</html>
一个简单的登录页面，如图。
h5登录页面的更多相关文章
- 微信小程序中h5跳转到登录页面，登陆成功返回携带参数，h5刷新
公司的一个小程序,要做一个活动,需要判断登录状态. 思路:h5跳转到登录页面,登陆成功携带token自动返回. 本来以为是个非常简单的功能,没想到..... 发帖记录一下 1.登录页面 用getCur ...
- 原生js验证简洁美观注册登录页面
序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 sign_up.html 注册表单 <!DOCTYPE html> <html lang=&qu ...
- 原生js+css实现重力模拟弹跳系统的登录页面
今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...
- WebApp之H5登录注册
代码indexhtml <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 解决使用IE8打开ADFS 3.0登录页面
系统上线前一天,发现客户竟然有XP系统和2003系统,这些系统都不能访问外网.测试时,客户端是IE8,打开我们系统ADFS的登录页面,一直在Loading,无法打开,也不报错.后来通过fiddler跟 ...
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
- session过期返回登录页面跳出frame
session 过期返回登录页面 方法1, HttpSession session = request.getSession(); String LOGIN_ID = (String) session ...
随机推荐
- Zabbix-2.4-安装-1
前言 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix组件主要分两个: zabbix-server和zabbix-agent.支持的监控协议有I ...
- How tbb proxy works
- asterisk todo
1, 如何让用户打一个密码才能继续外拨? 可以利用__9xxx那种做法 2,如何和onsip连起来? 3, 如何记录所有拨打记录?
- nginx 镜像使用说明
nginx 镜像说明 目录 说明 /etc/nginx nginx安装目录 /usr/share/nginx/html nginx网站资源存放的目录 运行nginx容器,相关命令: 命令 说明 doc ...
- activemq jms使用
activemq 是 基于 jms 协议的 消息队列 消息 流程: jsm 的 消息流程鼻尖简单 生产者发送消息到目的地,消费者 监听这个目的地,然后收到消息. 相比 amqp 的 消息流程简单很多 ...
- 洛谷 5291 [十二省联考2019]希望（52分）——思路+树形DP
题目:https://www.luogu.org/problemnew/show/P5291 考场上写了 16 分的.不过只得了 4 分. 对于一个救援范围,其中合法的点集也是一个连通块. 2n 枚举 ...
- java-常用注解
JDK自带注解 @Override 重写, 标识覆盖它的父类的方法 @Deprecated 已过期,表示方法是不被建议使用的 @Suppvisewarnings 压制警告,抑制警告 元注解 @Ta ...
- PHP优化思路
想起来记录一下自己对PHP的优化思路 针对Nginx和 PHP-FPM进行优化 首先应该分为代码层面.配置层面.架构层面 代码层面 参见了https://segmentfault.com/a/1190 ...
- java线程池ThreadPoolExecutor类使用详解
在<阿里巴巴java开发手册>中指出了线程资源必须通过线程池提供,不允许在应用中自行显示的创建线程,这样一方面是线程的创建更加规范,可以合理控制开辟线程的数量:另一方面线程的细节管理交给线 ...
- EXSI6.5复制文件太慢的解决方法
听说裸金属服务器性能比在windows中安装VMware workstations要好,就在电脑上安装了一个EXSI6.5. 可是在复制文件时很慢,一个3G的文件复制了两三个小时,还时常担心网络会断, ...