2015_WEB页面前端工程师_远程测题_东方蜘蛛_1
请使用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="登 陆"/>
</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的更多相关文章
- 随心测试_软测基础_002_<测试工程师_核心技能体系>
测试工程师核心技能体系构成 测试基础体系:[对象——>方法——>流程].[测试活动类型——>质量] 测试分析体系:[测试对象分析]——>[测试设计(计划.数据.用例.文档)] ...
- 前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)
15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...
- 【Java分享客栈】我有一个朋友，和前端工程师联调接口被狠狠鄙视了一番。
前言 我有一个朋友,昨天和前端工程师联调一个接口,然后被狠狠鄙视了一番. 大家知道,自从前后端分离以后,像我一样一直以Java工程师为傲而自居的码圣们就砍掉了一半脊梁,从此被贴上了"Java ...
- 前端工程师手中的Sublime Text
原文地址:http://css-tricks.com/sublime-text-front-end-developers/ 我的Blog:http://cabbit.me/sublime-text-f ...
- 前端工程师如何快速的开发一个微信JSSDK应用
亲们,订阅号出来已经很久了,作为一个前端工程师或者全栈工程师,你是不是错过了什么?大概许多攻城狮同砚还没有反应过来订阅号怎么回事,就马上要被微信的应用号秀一脸了.在应用号还没有正式出来之前,我们赶紧一 ...
- web前端工程师在移动互联网时代里的地位问题
支付宝十周年推出了一个新产品:支付宝的十年账单,我也赶个时髦查看了一下我的支付宝十年账单,哎,感慨自己真是太屌丝了,不过这只是说明我使用淘宝少了,当我大规模网上购物时候,我很讨厌慢速的快递,所以我大部 ...
- Nicholas C. Zakas（JS圣经：JavaScript高级程序设计作者）如何面试前端工程师
Original Post:Interviewing the front-end engineerNicholas C. Zakas,2010年1月5日翻译完成:2010年1月7日,最后更新:2010 ...
- Nicholas C. Zakas如何面试前端工程师
转载自:http://www.cnblogs.com/yizuierguo/archive/2010/02/04/1663767.html Original Post:Interviewing the ...
随机推荐
- Cocos2d-x3.0TestCpp文件夹笔记（二）
3.Actions-Basic:此demo中体现ccp由Point取代 ①ActionManual:直接设置精灵的属性demo. const Color3B Color3B::RED (255, ...
- Java JDBC批处理插入数据操作(转)
在此笔记里,我们将看到我们如何可以使用像Statement和PreparedStatement JDBC API来批量在任何数据库中插入数据.此外,我们将努力探索一些场景,如在内存不足时正常运行,以及 ...
- jdk和jre是什么?都有什么用?（转帖）
jdk和jre是什么?都有什么用?(转帖) 文章分类:Java编程 大家肯定在安装JDK的时候会有选择是否安装单独的jre,一般都会一起安装,我也建议大家这样做.由于这样更能帮助大家弄清楚它们的差别: ...
- LabVIEW设计模式系列——移位寄存器
标准:1.太多移位寄存器会导致连线太多,看起来凌乱,使用簇将变量打包,统一用一个移位寄存器,这样可以减少连线的麻烦2.如果每个变量都使用一个移位寄存器,没有一个名字是很难区分移位寄存器到底属于哪一个变 ...
- request对象
Servlet三大域对象的应用 request.session.application(ServletContext) 请求转发器: public void doGet(HttpServletRequ ...
- InnoDB MyISAM区别及优化（摘录）
InnoDB 是 MySQL 上第一个提供外键约束的引擎,除了提供事务处理外,InnoDB 还支持行锁,提供和 Oracle 一样的一致性的不加锁读取,能增加并发读的用户数量并提高性能,不会增加锁的数 ...
- win8 需要管理员权限才能删除此应用程序
在win8系统里面 安装了 dotfuscator,安装在c盘,结果发现运行是提示需要有管理员权限,想重新删除后安装也不行,删除的时候提示也需要管理员权限,网上查了一下资料,windows自xp开始, ...
- C#编程使用到的几种调试方式
一.前言: 使用C#语言从08年算起,到现在也有6个年头的时间了. 但 是会使用调试进行辅助编程的时间,却只有5个年头,其中第一年里面,只能傻傻地敲着老师给的案例,不会写就一遍一遍重复手写编码,上机练 ...
- [Twisted] Protocols协议和Protocol Factories 协议工厂
Protocols 描述了如何异步处理网络事件.Twisted维护了许多协议的实现,如HTTP,Telent,DNS,IMAP.Portocols实现了IProtocol接口, IProtocol包含 ...
- 类库探源——System.Environment
Environment 类: 提供有关当前环境和平台的信息以及操作它们的方法.此类不能被继承. 命名空间: System 程序集: mscorlib.dll 继承关系: 常用属性(字段)和方法: ...