jQuery仿魅族官网注册表单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿魅族官网注册表单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
	<title>jQuery仿魅族官网注册表单代码</title>
	<meta http-equiv="content-Type" content="text/html" charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
	<div class="content">
		<form id="#mainForm1" class="mainForm mainForm1">
			<div class="number">
				<a href="##" class="linkABlue">手机号码注册</a>
				<span></span>
				<a href="##" class="linkAGray number1">账户名注册</a>
			</div>
			<div class="normalInput">
				<input type="text" class="phone" maxlength="11" placeholder="手机号码">	
			</div>
			<span class="error error1"></span>
			<div class="normalInput">
				<input type="text" class="kapkey" maxlength="6" placeholder="验证码">
				<span class="formLine"></span>
				<a href="##" id="getKey" class="linkABlue">获取验证码</a>
			</div>
			<span class="error error2"></span>
			<div class="normalInput">
				<input type="text" class="password" maxlength="16" autocomplete="off" placeholder="密码">
				<input type="password" class="password1" maxlength="16" autocomplete="off" placeholder="密码">
				<a id="pwdBtn" href="##" class="pwdBtnShow" isshow="false">
					<i class="i_icon"></i>
				</a>
			</div>
			<span class="error error3"></span>
			<div class="rememberField">
				<span class="checkboxPic check_chk" tabindex="-1" isshow="false">
					<i class="i_icon"></i>
				</span>
				<label class="pointer">我已阅读并接受</label>
				<a href="#" target="_blank" class="linkABlue">《Flyme服务协议条款》</a>
			</div>
			<span class="otherError">请确认已阅读并同意Flyme服务协议条款</span>
			<a href="##" class="fullBtnBlue">注册</a>
		</form>
		<form id="#mainForm2" class="mainForm mainForm2">
			<div class="number">
				<a href="##" class="linkABlue2 number2">手机号码注册</a>
				<span></span>
				<a href="##" class="linkAGray2">账户名注册</a>
			</div>
			<div class="normalInput">
				<input type="text" class="username" maxlength="32" placeholder="账户名" autocomplete="off">	
				<span class="grayTip">@flyme.cn</span>
			</div>
			<span class="error error1"></span>		
			<div class="normalInput">
				<input type="text" class="passwordN" maxlength="16" autocomplete="off" placeholder="密码">
				<input type="password" class="password1N" maxlength="16" autocomplete="off" placeholder="密码">
				<a id="pwdBtnN" href="##" class="pwdBtnShowN" isshow="false">
					<i class="i_icon"></i>
				</a>
			</div>
			<span class="error error3"></span>
			<div class="normalInput">
				<input type="text" class="email" maxlength="32" placeholder="安全邮箱" autocomplete="off">
			</div>
			<span class="error error2"></span>
			<div class="rememberField">
				<span class="checkboxPic check_chk" tabindex="-1" isshow="false">
					<i class="i_icon"></i>
				</span>
				<label class="pointer">我已阅读并接受</label>
				<a href="https://member.meizu.com/ServiceAgreement.jsp" target="_blank" class="linkABlue">《Flyme服务协议条款》</a>
			</div>
			<span class="otherError">请确认已阅读并同意Flyme服务协议条款</span>
			<a href="##" class="fullBtnBlue">注册</a>
		</form>
	</div>
	
	</div>
	<ul class="bRadius2 mail">
		<li data-mail="@qq.com" class="item item1">@qq.com</li>
		<li data-mail="@sina.com" class="item item2">@sina.com</li>
		<li data-mail="@126.com" class="item item3">@126.com</li>
		<li data-mail="@163.com" class="item item4">@163.com</li>
		<li data-mail="@gmail.com" class="item item5">@gmail.com</li>
	</ul>
	<div id="mz_Float">
		<div class="mz_FloatBox">
			<div class="mz3AngleL">
				<i class="i_icon"></i>
			</div>
			<div class="mzFloatTip bRadius2">长度为8-16个字符，区分大小写，至少包含两种类型</div>
		</div>
	</div>
</body>
</html>

JS代码(index.js):

$(function(){
	//页面切换初始化$(".number2").click(function(){
	$(".mainForm1").show();
	$(".mainForm2").hide();
	$(".error").hide();
	$(".normalInput").removeClass("errorC");
	$(".normalInput").removeClass("checkedN");
	$(".mainForm input").val("");
}
);
	$(".number1").click(function(){
	$(".mainForm2").show();
	$(".mainForm1").hide();
	$(".error").hide();
	$(".normalInput").removeClass("errorC");
	$(".normalInput").removeClass("checkedN");
	$(".mainForm input").val("");
}
);
	//文本框失去焦点$(".mainForm input").blur(function(){
	$("#mz_Float").css("top","");
}
);
	//协议条款$(".checkboxPic").click(function(){
	if($(this).attr("isshow")=="false"){
	$(this).parent().css("margin-bottom","10px");
	$(".checkboxPic i").css({
	"background-position":" -0px -127px"}
);
	$(".otherError").css("display","block");
	$(this).attr("isshow","true");
}
else{
	$(this).parent().css("margin-bottom","");
	$(".checkboxPic i").css({
	"background-position":"-31px -127px"}
);
	$(".otherError").hide();
	$(this).attr("isshow","false");
}
}
);
	//mainform1//密码是否可见(mainform1)$(".pwdBtnShow").click(function(){
	if($(".pwdBtnShow").attr("isshow")=="false"){
	$(".pwdBtnShow i").css("background-position","-60px -93px");
	$(".password").hide();
	$(".password1").val($(".password").val());
	$(".password1").show();
	$(".pwdBtnShow").attr("isshow","true");
}
else{
	$(".pwdBtnShow i").css("background-position","-30px -93px");
	$(".password1").hide();
	$(".password").val($(".password1").val());
	$(".password").show();
	$(".pwdBtnShow").attr("isshow","false");
}
}
);
	//手机号栏失去焦点$(".phone").blur(function(){
	reg=/^1[3|4|5|8][0-9]\d{
	4,8}
$/i;
	//验证手机正则(输入前7位至11位)if( $(".phone").val()==""){
	$(".phone").parent().addClass("errorC");
	$(".error1").html("请输入手机号");
	$(".error1").css("display","block");
}
else if($(".phone").val().length<11){
	$(".phone").parent().addClass("errorC");
	$(".error1").html("手机号长度有误！");
	$(".error1").css("display","block");
}
else if(!reg.test($(".phone").val())){
	$(".phone").parent().addClass("errorC");
	$(".error1").html("逗我呢吧，你确定这是你的手机号!!");
	$(".error1").css("display","block");
}
else{
	$(".phone").parent().addClass("checkedN");
}
}
);
	//验证码栏失去焦点$(".kapkey").blur(function(){
	reg=/^.*[\u4e00-\u9fa5]+.*$/;
	if( $(".kapkey").val()==""){
	$(".kapkey").parent().addClass("errorC");
	$(".error2").html("请填写验证码");
	$(".error2").css("display","block");
}
else if($(".kapkey").val().length<6){
	$(".kapkey").parent().addClass("errorC");
	$(".error2").html("验证码长度有误！");
	$(".error2").css("display","block");
}
else if(reg.test($(".kapkey").val())){
	$(".kapkey").parent().addClass("errorC");
	$(".error2").html("验证码里无中文！");
	$(".error2").css("display","block");
}
else{
	$(".kapkey").parent().addClass("checkedN");
}
}
);
	//密码栏失去焦点(mainform1)$(".password,.password1").blur(function(){
	reg1=/^.*[\d]+.*$/;
	reg2=/^.*[A-Za-z]+.*$/;
	reg3=/^.*[_@#%&^+-/*\/\\]+.*$/;
	//验证密码if($(".pwdBtnShow").attr("isshow")=="false"){
	var Pval = $(".password").val();
}
else{
	var Pval = $(".password1").val();
}
if( Pval ==""){
	$(".password").parent().addClass("errorC");
	$(".error3").html("请填写密码");
	$(".error3").css("display","block");
}
else if(Pval.length>16 || Pval.length<8){
	$(".password").parent().addClass("errorC");
	$(".error3").html("密码应为8-16个字符，区分大小写");
	$(".error3").css("display","block");
}
else if(!((reg1.test(Pval) && reg2.test(Pval)) || (reg1.test(Pval) && reg3.test(Pval)) || (reg2.test(Pval) && reg3.test(Pval)) )){
	$(".password").parent().addClass("errorC");
	$(".error3").html("需至少包含数字、字母和符号中的两种类型");
	$(".error3").css("display","block");
}
else{
	$(".password").parent().addClass("checkedN");
}
}
);
	//手机号栏获得焦点$(".phone").focus(function(){
	$(".phone").parent().removeClass("errorC");
	$(".phone").parent().removeClass("checkedN");
	$(".error1").hide();
	$("#mz_Float").css("top","232px");
	$("#mz_Float").find(".bRadius2").html("输入11位手机号码，可用于登录和找回密码");
}
);
	//验证码栏获得焦点$(".kapkey").focus(function(){
	$(".kapkey").parent().removeClass("errorC");
	$(".kapkey").parent().removeClass("checkedN");
	$(".error2").hide();
	if($(".error1").css("display")=="block"){
	$("#mz_Float").css("top","334px");
}
else{
	$("#mz_Float").css("top","304px");
}
$("#mz_Float").find(".bRadius2").html("请输入手机收到的验证码");
}
);
	//密码栏获得焦点(mainform1)$(".password,.password1").focus(function(){
	$(".password").parent().removeClass("errorC");
	$(this).parent().removeClass("checkedN");
	$(".error3").hide();
	if($(".error1").css("display")=="block" && $(".error2").css("display")=="block"){
	$("#mz_Float").css("top","436px");
}
else if($(".error1").css("display")=="block" || $(".error2").css("display")=="block"){
	$("#mz_Float").css("top","406px");
}
else{
	$("#mz_Float").css("top","376px");
}
$("#mz_Float").find(".bRadius2").html("长度为8-16个字符，区分大小写，至少包含两种类型");
}
);
	//mainform1end//mainForm2//密码是否可见(mainform2)$(".pwdBtnShowN").click(function(){
	if($(".pwdBtnShowN").attr("isshow")=="false"){
	$(".pwdBtnShowN i").css("background-position","-60px -93px");
	$(".passwordN").hide();
	$(".password1N").val($(".passwordN").val());
	$(".password1N").show();
	$(".pwdBtnShowN").attr("isshow","true");
}
else{
	$(".pwdBtnShowN i").css("background-position","-30px -93px");
	$(".password1N").hide();
	$(".passwordN").val($(".password1N").val());
	$(".passwordN").show();
	$(".pwdBtnShowN").attr("isshow","false");
}
}
);
	//账户名栏获得焦点$(".username").focus(function(){
	$(".username").parent().removeClass("errorC");
	$(".username").parent().removeClass("checkedN");
	$(".error1").hide();
	$("#mz_Float").css("top","232px");
	$("#mz_Float").find(".bRadius2").html("长度为4-32个字符支持数字、字母、下划线，字母开头，字母或数字结尾");
}
);
	//邮箱栏获得焦点$(".email").focus(function(){
	$(".email").parent().removeClass("errorC");
	$(".email").parent().removeClass("checkedN");
	$(".error2").hide();
	if($(".error1").css("display")=="block" && $(".error3").css("display")=="block"){
	$("#mz_Float").css("top","436px");
}
else if($(".error1").css("display")=="block" || $(".error3").css("display")=="block"){
	$("#mz_Float").css("top","406px");
}
else{
	$("#mz_Float").css("top","376px");
}
$("#mz_Float").find(".bRadius2").html("用于找回密码，提高账户安全等级");
}
);
	//密码栏获得焦点(mainform2)$(".passwordN,.password1N").focus(function(){
	$(".passwordN").parent().removeClass("errorC");
	$(this).parent().removeClass("checkedN");
	$(".error3").hide();
	if($(".error1").css("display")=="block"){
	$("#mz_Float").css("top","334px");
}
else{
	$("#mz_Float").css("top","304px");
}
$("#mz_Float").find(".bRadius2").html("长度为8-16个字符，区分大小写，至少包含两种类型");
}
);
	//账户名栏失去焦点$(".username").blur(function(){
	reg=/^[a-zA-Z][0-9a-zA-Z_]{
	2,30}
[0-9a-zA-Z]$/;
	//验证手机正则(输入前7位至11位)if( $(".username").val()==""){
	$(".username").parent().addClass("errorC");
	$(".error1").html("请输入账户名");
	$(".error1").css("display","block");
}
else if($(".username").val().length>32 || $(".username").val().length<4){
	$(".username").parent().addClass("errorC");
	$(".error1").html("账户名长度有误！");
	$(".error1").css("display","block");
}
else if(!reg.test($(".username").val())){
	$(".username").parent().addClass("errorC");
	$(".error1").html("账户名格式有误!!");
	$(".error1").css("display","block");
}
else{
	$(".username").parent().addClass("checkedN");
}
}
);
	//密码栏失去焦点(mainform2)$(".passwordN,.password1N").blur(function(){
	reg1=/^.*[\d]+.*$/;
	reg2=/^.*[A-Za-z]+.*$/;
	reg3=/^.*[_@#%&^+-/*\/\\]+.*$/;
	//验证密码if($(".pwdBtnShow").attr("isshow")=="false"){
	var Pval = $(".passwordN").val();
}
else{
	var Pval = $(".password1N").val();
}
if( Pval ==""){
	$(".passwordN").parent().addClass("errorC");
	$(".error3").html("请填写密码");
	$(".error3").css("display","block");
}
else if(Pval.length>16 || Pval.length<8){
	$(".passwordN").parent().addClass("errorC");
	$(".error3").html("密码应为8-16个字符，区分大小写");
	$(".error3").css("display","block");
}
else if(!((reg1.test(Pval) && reg2.test(Pval)) || (reg1.test(Pval) && reg3.test(Pval)) || (reg2.test(Pval) && reg3.test(Pval)) )){
	$(".passwordN").parent().addClass("errorC");
	$(".error3").html("需至少包含数字、字母和符号中的两种类型");
	$(".error3").css("display","block");
}
else{
	$(".passwordN").parent().addClass("checkedN");
}
}
);
	//邮箱栏键盘操作$(".email").keyup(function(){
	//键盘监听keyup,keydown,keypressvar emailVal = $(".email").val();
	emailValN = emailVal.replace(/\s/g,'');
	//去空emailValN = emailValN.replace(/[\u4e00-\u9fa5]/g,'');
	//屏蔽中文if(emailValN!=emailVal){
	$(".email").val(emailValN);
}
var mailVal = emailValN.split("@");
	var mailHtml=mailVal[0];
	if(mailHtml.length>15){
	mailHtml=mailHtml.slice(0,15)+"...";
	//字数超加省略}
for(var i=1;
	i<6;
	i++){
	var M = $(".item"+i).attr("data-mail");
	$(".item"+i).html(mailHtml+M);
}
}
);
	//邮箱提示$(".item").click(function(){
	var a= $(".email").val();
	var b= $(this).attr("data-mail");
	$(".email").val(a+b);
	$(".email").trigger("focus");
	//setTimeout($(".email").("focus") );
	效果同，时间设多少无所谓}
);
	$(".email").click(function(){
	if($(".error1").css("display")=="block" && $(".error3").css("display")=="block"){
	$(".mail").css("top","489px");
}
else if($(".error1").css("display")=="block" || $(".error3").css("display")=="block"){
	$(".mail").css("top","459px");
}
else{
	$(".mail").css("top","429px");
}
$(".mail").show();
	return false;
}
);
	$(document).click(function(){
	$(".mail").hide();
}
);
	//邮箱栏失去焦点$(".email").blur(function(){
	reg=/^\w+[@]\w+((.com)|(.net)|(.cn)|(.org)|(.gmail))$$/;
	if( $(".email").val()==""){
	$(".email").parent().addClass("errorC");
	$(".error2").html("邮箱不能为空!");
	$(".error2").css("display","block");
}
else if(!reg.test($(".email").val())){
	$(".email").parent().addClass("errorC");
	$(".error2").html("邮箱格式错误！");
	$(".error2").css("display","block");
}
else{
	$(".email").parent().addClass("checkedN");
}
}
);
}
);

CSS代码(index.css):

*{margin:0;padding:0;}
li,ul{list-style:none;}
img,input{border:0;}
a{text-decoration:none;}
body{font-family:"寰蒋闆呴粦","Microsoft Yahei",Arial,Helvetica,sans-serif,"瀹嬩綋";font-size:14px;color:#515151;}
body input,body textarea{font-family:"寰蒋闆呴粦","Microsoft Yahei",Arial,Helvetica,sans-serif,"瀹嬩綋";background-color:white;outline:none;}
.content{width:100%;height:auto;}
.ucSimpleHeader{height:30px;margin:0 auto;position:relative;padding-top:45px;width:1000px;}
.meizuLogo{width:110px;height:20px;float:left;background:url("images/base.png") -388px -90px no-repeat;display:block;}
.trigger{float:right;height:20px;line-height:20px;width:100px;text-align:center;}
.trigger a{color:#7f7f7f;}
.trigger a:hover{color:#474747;}
.trigger a:nth-child(3){color:#474747;}
/*mainForm1*/
.mainForm{margin-top:100px;width:343px;margin:100px auto 0px;overflow:hidden;}
.number{font-size:20px;margin-left:-5px;margin-bottom:30px;width:350px;text-align:center;}
.number a{color:#515151;}
.linkABlue:visited{color:#00a7ea;}
.linkAGray:hover{color:#2b2b2b;}
.number span{color:#d9d9d9;display:inline-block;border:1px solid #dadada;border-left:1px;height:16px;line-height:20px;margin-right:50px;margin-left:50px;}
.normalInput{float:left;position:relative;display:inline-block;padding:0px 10px;width:320px;height:50px;line-height:22px;font-size:16px;margin-bottom:20px;border:1px solid #dadada;outline:none;color:#474747;overflow:visible;}
.error{display:none;margin-left:0px;margin-bottom:20px;color:red;float:left;}
/*#mainForm1 .normalInput input,#mainForm2 .normalInput input{line-height:22px;padding:14px 0;height:22px;}
*/
.normalInput input{font-size:16px;width:100%;padding:14px 0;height:22px;}
.errorC{margin-bottom:10px;border-color:red;color:red;}
.checkedN{border:1px solid #1ece6d;}
.formLine{color:#d9d9d9;height:40px;display:inline-block;border-left:1px solid #dadada;position:absolute;right:100px;top:5px;}
#getKey{width:80px;border:none;outline:none;height:50px;line-height:50px;font-size:16px;position:absolute;right:10px;top:0px;}
.i_icon{display:inline-block;width:100%;height:100%;overflow:hidden;}
.normalInput .password{float:left;width:200px;}
.normalInput .password1{float:left;width:200px;display:none;}
.normalInput .passwordN{float:left;width:200px;display:block;}
.normalInput .password1N{float:left;width:200px;display:none;}
.pwdBtnShow{outline:none;position:relative;display:inline-block;width:30px;height:30px;cursor:pointer;overflow:hidden;float:right;margin-right:5px;}
#pwdBtn{margin-top:13px;margin-bottom:10px;}
.pwdBtnShow i{background-image:url("images/elements.png");background-position:-30px -93px;background-repeat:no-repeat;}
.pwdBtnShowN{outline:none;position:relative;display:inline-block;width:30px;height:30px;cursor:pointer;overflow:hidden;float:right;margin-right:5px;}
#pwdBtnN{margin-top:13px;margin-bottom:10px;}
.pwdBtnShowN i{background-image:url("images/elements.png");background-position:-30px -93px;background-repeat:no-repeat;}
.rememberField{margin-bottom:30px;height:20px;line-height:20px;float:left;display:block;}
.checkboxPic{outline:none;display:inline-block;width:25px;height:20px;line-height:20px;cursor:pointer;vertical-align:middle;overflow:hidden;}
.check_chk i{background-position:-31px -127px;background-image:url("images/elements.png");background-repeat:no-repeat;}
.pointer{cursor:pointer;}
.otherError{display:none;margin-left:0px;margin-bottom:20px;color:red;float:left;}
.fullBtnBlue{display:inline-block;height:50px;width:342px;font-size:20px;line-height:50px;text-align:center;margin-bottom:20px;outline:none;cursor:pointer;background-color:#32a5e7;color:#fff;}
/*mainForm1end*/
/*mainForm2*/
.linkAGray2:visited{color:#00a7ea;}
.linkABlue2:hover{color:#2b2b2b;}
.normalInput .username{width:220px;border:none;outline:none;font-size:16px;height:22px;line-height:22px;padding:14px 0;}
.grayTip{height:50px;line-height:50px;vertical-align:top;display:inline-block;color:#7f7f7f;}
/*mainForm2end*/
.footer{position:absolute;bottom:0;width:100%;height:130px;border-top:solid 1px #E5E6E7;background-color:#fff;color:black;top:669px;}
.footerInner{width:1000px;margin:24px auto 30px;}
.footerLayer1{height:50px;line-height:50px;}
.footerInnerLink{float:left;}
.footerInnerLink a{color:black;}
.foot-line{background-color:#888;margin:0px 5px;width:1px;height:10px;}
.footerLanguage{position:relative;overflow:hidden;cursor:default;background:url("images/base.png") -30px -150px no-repeat;}
.footerService{float:left;margin-left:36px;}
.serviceLabel{margin-right:10px;}
.serviceNum{margin-right:20px;}
.serviceOnline{display:inline-block;height:20px;line-height:18px;width:64px;color:white;background-color:#32a5e7;border-radius:2px;-webkit-border-radius:2px;text-align:center;}
.footerOuterLink{position:relative;float:right;padding-top:9px;}
.footerOuterLink a{margin-left:10px;display:inline-block;overflow:hidden;width:32px;height:32px;}
.footerOuterLink i{background:url("images/base.png") no-repeat;}
.footerSinaMblog i{background-position:-168px -91px;}
.footerTencentMblog i{background-position:-210px -91px;}
.footerWeChat i{background-position:-252px -91px;}
.footerQzone i{background-position:-294px -91px;}
.footerSinaMblog:hover i{background-position:-168px -137px;}
/*鍙兘浣滅敤浜庤嚜韬垨瀛愬厓绱犲姞 ~(閫氱敤鍏勫紵閫夋嫨鍣? 鍙互浣滅敤浜庡厔寮熷厓绱?/.footerTencentMblog:hover i{background-position:-210px -137px;}
.footerWeChat:hover i{background-position:-252px -137px;}
.footerQzone:hover i{background-position:-294px -137px;}
.wechatPic{position:absolute;z-index:100;width:310px;height:270px;background:url("images/weixin.png") no-repeat;left:-38px;top:-267px;display:none;}
.footerWeChat:hover ~ .wechatPic{display:block;}
.footerLanguagMenuBox{display:inline-block;}
.footerLanguagMenu{left:474.5px;bottom:89px;display:none;box-shadow:0px 0px 10px #E1E4E8;border-radius:2px;background-color:#FEFEFE;position:absolute;border:solid 1px #E1E4E8;overflow:hidden;width:140px;height:200px;z-index:10;}
.footerLanguagMenu a{display:block;height:40px;line-height:40px;width:118px;margin:0px auto;border-bottom:solid 1px #E4E7E9;font-size:14px;color:#000000;text-align:left;padding-left:10px;}
.footerLanguagMenu .checked,.footerLanguagMenu .checked:hover{color:#1daeed;}
.footerLanguagMenu .ClobalItem:hover{color:#515151;}
#globalContainer a:nth-child(5):{border-width:0px;}
.footerLanguagMenuBox:hover #globalContainer{display:block;}
;.copyrightWrap{width:100%;}
.copyrightInner{width:1000px;margin:0px auto;overflow:hidden;}
.copyrightInner span{color:#a2a2a2;float:left;}
.copyrightInner a{float:left;color:#a2a2a2;margin-left:6px;white-space:nowrap;}
/*white-space 灞炴€ц缃浣曞鐞嗗厓绱犲唴鐨勭┖鐧姐€?/#mz_Float{position:absolute;z-index:1000;top:-376px;left:851px;width:200px;display:block;}
.mz_FloatBox{position:relative;}
.mz3AngleL{z-index:1;position:absolute;width:10px;height:16px;top:10px;left:-1px;overflow:hidden;}
.mz3AngleL i{background-position:0px -96px;background-image:url("images/elements.png");background-repeat:no-repeat;}
.mzFloatTip{width:170px;padding:6px 10px 6px 10px;background-color:#fff;position:absolute;right:0px;color:#515151;border:solid 1px #E5E5E5;}
.bRadius2{border-radius:2px;outline:medi um none;}
.mail{box-shadow:0 0 15px #141414;width:340px;border:solid 1px silver;position:absolute;z-index:10;left:503px;top:429px;display:none;}
.mail .item{background-color:#fff;color:#515151;cursor:pointer;height:22px;line-height:22px;letter-spacing:1px;font-size:13px;padding-left:5px;}
/*letter-spacing瀛楃闂磋窛*/
.mail .item:hover{background-color:#ccc;color:#fff;}
.mainForm2{display:none;}

附件:下载该文件资源,减少时间成本(增值服务)