<!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登录页面的更多相关文章

  1. 微信小程序中h5跳转到登录页面，登陆成功返回携带参数，h5刷新

    公司的一个小程序,要做一个活动,需要判断登录状态. 思路:h5跳转到登录页面,登陆成功携带token自动返回. 本来以为是个非常简单的功能,没想到..... 发帖记录一下 1.登录页面 用getCur ...

  2. 原生js验证简洁美观注册登录页面

    序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 sign_up.html 注册表单 <!DOCTYPE html> <html lang=&qu ...

  3. 原生js+css实现重力模拟弹跳系统的登录页面

    今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...

  4. WebApp之H5登录注册

    代码indexhtml <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  5. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  6. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  7. 解决使用IE8打开ADFS 3.0登录页面

    系统上线前一天,发现客户竟然有XP系统和2003系统,这些系统都不能访问外网.测试时,客户端是IE8,打开我们系统ADFS的登录页面,一直在Loading,无法打开,也不报错.后来通过fiddler跟 ...

  8. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

  9. session过期返回登录页面跳出frame

    session 过期返回登录页面 方法1, HttpSession session = request.getSession(); String LOGIN_ID = (String) session ...

随机推荐

  1. YUICompressor的安装及使用（一）

    step1:下载ant和YUICompressor    1) Ant:   http://ant.apache.org/bindownload.cgi   打开页面后,下拉滚动条,找到如下图所示,单 ...

  2. Openfire源码阅读（一）

    本篇先分析openfire源码的主要流程,模块细节后续再继续分析: 一.简介: Openfire是开源的实时协作服务器(RTC),它是基于公开协议XMPP(RFC-3920),并在此基础上实现了XMP ...

  3. SqlServer ：利用快捷键快速查看 字段说明查询及表结构 (小技巧）

    1.自定义4个常用的存储过程: sp_select :select * from sp_helpremark :查表的列,列的类型,备注(这里只查询有备注的列) sp_columns1 : 查表所有的 ...

  4. 基于tornado的文件上传demo

    这里,web框架是tornado的4.0版本,文件上传组件,是用的bootstrap-fileinput. 这个小demo,是给合作伙伴提供的,模拟APP上摄像头拍照,上传给后台服务进行图像识别用,识 ...

  5. 【java】浅谈swtich

    在java中switch后的表达式的类型只能为以下几种:byte.short.char.int(在Java1.6中是这样),java1.7后支持了对string的判断 switch 的括号一定是表达式 ...

  6. <亲测>CentOS7中使用yum安装Nginx的方法

    CentOS7中使用yum安装Nginx的方法   最近无意间发现Nginx官方提供了Yum源.因此写个文章记录下. 1.添加源 默认情况Centos7中无Nginx的源,最近发现Nginx官网提供了 ...

  7. 【JVM】Class结构之常量池

    常量池 主要包括下面2类: 字面量(Literal):如int,double,String等: 符号引用(Symbolic Reference): 符号引用 类和接口的全限定名: 字段的名称和描述符: ...

  8. pj1--学生信息管理系统

    1.根据班上的情况做一个班级学生信息管理系统.包含功能有每日签到.学分管理.个人信息管理 2.要求:用winform+序列化(本地化)的技术实现,以教师机做服务器,要有文件保存.读取.还要有上传头像功 ...

  9. [转]Windows7：Visual Studio 2008试用版的评估期已经结束解决方法

    原文来自:http://blog.sina.com.cn/s/blog_6b1815080100y5z3.html     以前在Windows2003碰到这个问题时,都是到"控制面板→添加 ...

  10. es中的一些知识点记录

    1. forcemerge接口 强制段合并,设置为1时,是期望最终只有1个索引段.但实际情况是,合并的结果是段的总数会减少,但仍大于1,可以多次执行强制合并的命令. 设置的的目标值越小.合并消耗的时间 ...