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 ...
随机推荐
- neutron通信原理理解
compute: [root@compute01 ~]# ip add show 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue ...
- 四、springboot（一）入门
1.创建maven工程 2.修改jdk版本为1.8以上 3.项目结构如下 4.添加依赖jar包 <parent> <groupId>org.springframework.bo ...
- ASP.NET AJAX入门系列（3）：使用ScriptManagerProxy控件
在ASP.NET AJAX中,由于一个ASPX页面上只能有一个ScriptManager控件,所以在有母版页的情况下,如果需要在Master-Page和Content-Page中需要引入不同的脚本时, ...
- kindeditor在线编辑器的使用心得
1. 如何声明引用? <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- 一个基于netty的websocket聊天demo
这里,仅仅是一个demo,模拟客户基于浏览器咨询卖家问题的场景,但是,这里的demo中,卖家不是人,是基于netty的程序(我就叫你uglyRobot吧),自动回复了客户问的问题. 项目特点如下: 1 ...
- CentOS 6 上安装 pip、setuptools
通常 python 升级后,会带来一系列的出错信息,例如缺少pip.zlib.setuptools等,虽然你已经把python升级到了2.7版本,但是使用的依赖.模块还是旧的,所以要在新的 pytho ...
- centos绑定多个域名
正在使用aliyun主机,运行centos6.4 64位系统,安装lamp环境后进行域名绑定.配置文件如下: <VirtualHost *:80> DocumentRoot /var/ww ...
- Thinkphp 视图模型
1.创建视图模型 2.定义视图模型 class BlogViewModel extends ViewModel { public $viewFields = array( 'Blog'=>arr ...
- influxDB1.6版安装与配置(windows环境)、Jmeter+influxDB+Grafana性能监控
influxDB1.6版安装与配置(windows环境).Jmeter+influxDB+Grafana性能监控 来源:https://blog.csdn.net/SwTesting/article/ ...
- 在已有Windows系统基础上安装ubuntu后无Windows启动项
1. 原系统为windows 2. 清出一个不用的分区给linux,使用windows磁盘管理器将该分区重新划分为两个分区,分别用于root和swap 3. 安装过程中ubuntu提示原系统为非UEF ...