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 ...
随机推荐
- day9大纲
01 作业内容回顾 函数的初识: 封装一个功能. def 函数名(): 函数体 函数的返回值:return 1,结束函数. 2,返回给执行者(函数名())值. return ----> None ...
- 【转】Android AlertDialog自定义布局
原文网址:https://blog.csdn.net/u010694658/article/details/53022294 由于开发中经常使用弹框,然而系统自带的弹框太局限,也不太美观,经常不能满足 ...
- 9、后记：公司管理经验总结 - CEO之公司管理经验谈
在前期的公司管理经验谈中,笔者已经将相关考虑到的公司经营的问题做了一些思考和总结,希望能够对广大的想自己创业的IT从业者们提供参考. 这里提供一个连接,能够对广大的初期创业者们有个开公司流程的帮助:h ...
- typedef定义数组类型
typedef语句定义数组类型 1. 一维数组类型的定义格式 typedef <元素类型关键字><数组类型名>[<常量表达式>]; 例如: (1) typedef ...
- spring boot打jar包（maven对jar和lib分离）
spring boot intellij Ide打包有两种方式: 1.maven:熟悉.方便配置灵活 2.Build artifacts:操作比较复杂,jar和lib包分离 重点讲maven如何支持j ...
- Vivado使用技巧(1)
Vivado使用技巧 (1) 1. 2.复位准则: 3. 4. 5. 6. 7. 8.
- excel技巧--批量生成工资条
要想生成如上图的工资条,快速的方法如下: 1.在工资表右侧建立一升序数字列,完成后再复制该列,重复粘贴一次在该列底部.2.对该表排序:“开始”-->“排序和筛选”-->自定义排序.在对话框 ...
- mongoVUE的增删改查操作使用说明(转)
mongoVUE连接数据库 http://jingyan.baidu.com/album/9989c7460fd171f648ecfe06.html?picindex=1 mongoVUE操作数据库 ...
- 自定义抛出throw 对象练习
package ltb6w; import java.util.*; public class Bank { private String select; private String select2 ...
- ubuntu更新提示/boot空间不足
1. 查看当前使用的内核版本 uname -a 2.在终端下察看已经安装的旧的内核: ctrl+alt+t——>进入终端——>输入命令: dpkg --get-selections|gre ...