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 ...
随机推荐
- linux修改文件所有者和文件所在组 【转载】
chgrp 用户名 文件名 -R chown 用户名 文件名 -R -R表示递归目录下所有文件 以上部分已验证 地址原贴
- 3d tech
product Company 3D "smart cameras" such as the Gocator LMI Technologies (Delta, BC Cana ...
- tp5服务器验证案例
1.验证器代码 <?php namespace app\user\validate; use think\Validate; use Potting\IDCard; /** * 山区治理报名验证 ...
- java-线程（runoob.com）
参考链接: https://www.cnblogs.com/wxd0108/p/5479442.html https://www.cnblogs.com/dolphin0520/p/3920373.h ...
- 学习笔记: jstack与线程状态
jstatck可以打印JVM内部所有线程 1.查看有哪些java进程 2.查看所有线程的信息 重定向到5579.txt文件中 jstack 5579 > 5579.txt 3.线程的状态 New ...
- C# 继承、虚方法、方法重载和多态
继承:继承属于单继承,只能继承一个父类. 继承的一个结果是派生于基类的子类在方法和属性上有一定的重叠. 继承只能够同时继承与一个基类:可以同时继承一个基类和多个接口,但是基类必须放在第一个.(注:C# ...
- 日期控件My97 DatePicker 的使用
1.解压后添加My97DatePicker文件夹 2.引入WdatePicker.js文件 日期控件My97DatePicker的使用.html <!DOCTYPE html> <h ...
- ML平台_Angel参考
Angel 是腾讯开源基于参数服务器(Parameter Server)理念的机器学习框架(为支持超大维度机器学习模型运算而生).核心设计理念围绕模型,它将高维度的大模型切分到多个参数服务器节点,并通 ...
- 解析H5本地储存Web Storage
一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...
- java中的强,软,弱,虚引用
引用的应用场景 我们都知道垃圾回收器会回收符合回收条件的对象的内存,但并不是所有的程序员都知道回收条件取决于指向该对象的引用类型.这正是Java中弱引用和软引用的主要区别. 如果一个对象只有弱引用指向 ...