请使用HTML+CSS实现如下效果：

1、 使用CSS Sprites，实现如图1效果，素材图片为： icons.png；

2、 使用脚本语言验证邮箱、密码的必填以及邮箱的合法性；
若验证失败，则出现如图2效果；

3、 需兼容移动端浏览。

图 1

图2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body{background:#abcdef;font-family:'Microsoft Yahei'}
        a{text-decoration:none;}
        .login{width:400px;height:300px;background:#fff;margin:150px auto;}
        .container{width:350px;height:40px;margin:20px auto;}
        .container1{width:350px;height:15px;margin:10px auto;}
        .container1 label{font-size:14px;color:#000;}
        .container1 label:hover{color:#666;}
        .container1 .right a{color:#999;float: right;}
        .container1 .right a:hover{color:#000;}
        .login_title{font-size:24px;padding-top:10px;padding-left: 20px;}
        .user_name_logo{width:38px;height:38px;background:url("icons.png") no-repeat;border:1px solid #ddd;display: block;float: left;}
        .user_password_logo{width:38px;height:38px;background:url("icons.png") no-repeat -48px 0;;border:1px solid #ddd;display: block;float: left;}
        div.container input{width:290px;height:36px;border:1px solid #ddd;border-left:none;font-size:16px;padding-left: 10px;outline:none;}
        div.focus span{border:1px solid rgb(132, 188, 223)}
        div.focus span.user_name_logo{background-position:0px -48px;}
        div.focus span.user_password_logo{background-position:-48px -48px;}
        div.focus input{border:1px solid rgb(132, 188, 223);border-left:none}
        div.error span{border:1px solid rgb(228, 132, 133)}
        div.error span.user_name_logo{background-position:0px -96px;}
        div.error span.user_password_logo{background-position:-48px -96px;}
        div.error input{border:1px solid rgb(228, 132, 133);border-left:none}
        #submit{width:350px;height:40px;background:#E4393C;color:#fff;font-size:20px;}
    </style>
</head>
<body>
    <div class="login">
        <div class="login_title">会员登入</div>
        <div class="container">
            <span class="user_name_logo"></span>
            <input type="text" id="user_name" placeholder="邮箱" regex="^\w+@\w+\.[a-zA-Z]+(\.[a-zA-Z]+)?$"/>
        </div>
        <div class="container">
            <span class="user_password_logo"></span>
            <input type="password" id="password" placeholder="密码" regex="^\w+"/>
        </div>
        <div class="container1">
            <label class="left">
                <input type='checkbox' name='VoteOption1' value=1>
                记住密码
            </label>
            <label class="right">
                <a href="#">忘记密码？</a>
            </label>
        </div>
        <div class="container">
            <input type="submit" id="submit" value="登&nbsp;&nbsp;&nbsp;陆"/>
        </div>
    </div>
    <script type="text/javascript" src="jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
                $('.container input').focus(function(){
                        $(this).parent().removeClass('error').addClass('focus');
                }).blur(function(){
                        $(this).parent().removeClass('focus');
                        var regex = new RegExp($(this).attr('regex'));
                        //
                        console.log($(this).val());
                        if(!regex.test($(this).val())){
                            $(this).parent().addClass('error');
                        }else{
                            $(this).parent().addClass('focus');
                        }
                });
        });
    </script>
</body>
</html>

2015_WEB页面前端工程师_远程测题_东方蜘蛛_1的更多相关文章

  1. 随心测试_软测基础_002_<测试工程师_核心技能体系>

    测试工程师核心技能体系构成 测试基础体系:[对象——>方法——>流程].[测试活动类型——>质量] 测试分析体系:[测试对象分析]——>[测试设计(计划.数据.用例.文档)] ...

  2. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  3. 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

    15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...

  4. 【Java分享客栈】我有一个朋友，和前端工程师联调接口被狠狠鄙视了一番。

    前言 我有一个朋友,昨天和前端工程师联调一个接口,然后被狠狠鄙视了一番. 大家知道,自从前后端分离以后,像我一样一直以Java工程师为傲而自居的码圣们就砍掉了一半脊梁,从此被贴上了"Java ...

  5. 前端工程师手中的Sublime Text

    原文地址:http://css-tricks.com/sublime-text-front-end-developers/ 我的Blog:http://cabbit.me/sublime-text-f ...

  6. 前端工程师如何快速的开发一个微信JSSDK应用

    亲们,订阅号出来已经很久了,作为一个前端工程师或者全栈工程师,你是不是错过了什么?大概许多攻城狮同砚还没有反应过来订阅号怎么回事,就马上要被微信的应用号秀一脸了.在应用号还没有正式出来之前,我们赶紧一 ...

  7. web前端工程师在移动互联网时代里的地位问题

    支付宝十周年推出了一个新产品:支付宝的十年账单,我也赶个时髦查看了一下我的支付宝十年账单,哎,感慨自己真是太屌丝了,不过这只是说明我使用淘宝少了,当我大规模网上购物时候,我很讨厌慢速的快递,所以我大部 ...

  8. Nicholas C. Zakas（JS圣经：JavaScript高级程序设计作者）如何面试前端工程师

    Original Post:Interviewing the front-end engineerNicholas C. Zakas,2010年1月5日翻译完成:2010年1月7日,最后更新:2010 ...

  9. Nicholas C. Zakas如何面试前端工程师

    转载自:http://www.cnblogs.com/yizuierguo/archive/2010/02/04/1663767.html Original Post:Interviewing the ...

随机推荐

  1. ExecutorService与Executors例子的简单剖析(转)

    对于多线程有了一点了解之后,那么来看看java.lang.concurrent包下面的一些东西.在此之前,我们运行一个线程都是显式调用了 Thread的start()方法.我们用concurrent下 ...

  2. Cocos2d-X中字符串的处理

    CCString 用惯了NSString,你会严重高估自己处理字符串的能力.使用Cocos2d-X后只能用char*或者string来代替.诸如字符串的拼接,替换,查找都比NSString麻烦不少. ...

  3. 【Android】数据库的简单应用——增删改查的操作

    还记得getReadableDatabase()和getWritableDatabase()方法吧?在调用它们的时候会返回一个SQLiteDatabase对象,借助这个对象就可以进行CURD(Crea ...

  4. nodejs 中koa框架下的微信公众号开发初始篇

    最近在搞微信公众号开发,后端采用的是nodejs下的koa框架,初识后端的菜鸟,自己搞难度太大了,网上找了很多文章,采用的中间件大都是express框架下的,不过好在爬了许多坑之后总算看见点曙光了,遂 ...

  5. less编码规范

    Less 编码规范 简介 因为自己最近写css用的比较多还是less,整理了一份less规范, 代码组织 代码按如下形式按顺序组织: @import 变量声明 样式声明 // ✓ @import &q ...

  6. html a标签 图片边框和点击后虚线框的有关问题

    html a标签 图片边框和点击后虚线框的问题 一直在在chrome上开发自己的项目,今天上ie和firefix一看,真丑,a标签在使用图片时,多加了蓝色的边框,并且点击后所有a标签都会出现一个虚线框 ...

  7. document library\ picture library\Asset Library的默认文件夹

    document library\ picture library\Asset Library的默认文件夹? document library 默认文件夹:Forms picture library默 ...

  8. 建立一个方法的attribute，可以放在任意方法上，可以自动记录方法出错时的信息，就不用写try 。。cacth. 【注意】 不是在asp.net MVC下，是在普通三层结构下写的的特性。

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...

  9. Android eclipse - aapt.exe has stopped working.

    今天在修改Android的布局文件的时候,发现每保存一次,就提示: aapt.exe has stopped working(appt.exe已停止工作).很是郁闷,当时Android控制台已经提示错 ...

  10. MyBatis的学习总结六：Mybatis的缓存【参考】

    一.Mybatis缓存介绍 正如大多数持久层框架一样,Mybatis同样提供了一级缓存和二级缓存 1.一级缓存:基于PerpetualCache的HashMap本地缓存,其存储作用域为Session, ...