jQuery用户注册提示效果js代码

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

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

以下是 jQuery用户注册提示效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery用户注册提示效果</title>
<link href="css/layout.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<br>
<link href="css/home_login.css" rel="stylesheet" type="text/css">
<div class="nc-login-layout">
	<div class="nc-login">
		<div class="nc-login-title">
			<h3>用户注册</h3>
		</div>
		<div class="nc-login-content">
			<form id="register_form" method="post" action="#">
				<dl>
					<dt>用户名</dt>
					<dd style="min-height:54px;">
					<input type="text" id="user_name" name="user_name" class="text tip" title="3-20位字符，可由中文、英文、数字及“_”、“-”组成" />
					<label></label></dd>
				</dl>
				<dl>
					<dt>设置密码</dt>
					<dd style="min-height:54px;">
					<input type="password" id="password" name="password" class="text tip" title="6-16位字符，可由英文、数字及标点符号组成" />
					<label></label></dd>
				</dl>
				<dl>
					<dt>确认密码</dt>
					<dd style="min-height:54px;">
					<input type="password" id="password_confirm" name="password_confirm" class="text tip" title="请再次输入您的密码" />
					<label></label></dd>
				</dl>
				<dl>
					<dt>邮箱</dt>
					<dd style="min-height:54px;">
					<input type="text" id="email" name="email" class="text tip" title="请输入常用的邮箱，将用来找回密码、接受订单通知等" />
					<label></label></dd>
				</dl>

				<dl>
					<dt>&nbsp;</dt>
					<dd>
					<input type="submit" name="Submit" value="立即注册" class="submit fl" title="立即注册" />
					<input name="agree" type="checkbox" class="fl mt10 ml10" id="clause" value="1" checked="checked" />
					<span for="clause" class="fl ml5">阅读并同意<a href="document-agreement.html" target="_blank" class="agreement" title="阅读并同意">服务协议</a></span>
					<label></label></dd>
				</dl>
				<input type="hidden" value name="ref_url">
				<input name="nchash" type="hidden" value="206f94ec" />
			</form>
			<div class="clear">
			</div>
		</div>
		<div class="nc-login-bottom">
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery.poshytip.min.js" charset="utf-8"></script>
<script>
//注册表单提示
$('.tip').poshytip({
	className: 'tip-yellowsimple',
	showOn: 'focus',
	alignTo: 'target',
	alignX: 'center',
	alignY: 'top',
	offsetX: 0,
	offsetY: 5,
	allowTipHover: false
});

//注册表单验证
$(function(){
		jQuery.validator.addMethod("lettersonly", function(value, element) {
			return this.optional(element) || /^[^:%,'\*\"\s\<\>\&]+$/i.test(value);
		}, "Letters only please"); 
		jQuery.validator.addMethod("lettersmin", function(value, element) {
			return this.optional(element) || ($.trim(value.replace(/[^\u0000-\u00ff]/g,"aa")).length>=3);
		}, "Letters min please"); 
		jQuery.validator.addMethod("lettersmax", function(value, element) {
			return this.optional(element) || ($.trim(value.replace(/[^\u0000-\u00ff]/g,"aa")).length<=15);
		}, "Letters max please");
    $("#register_form").validate({
        errorPlacement: function(error, element){
            var error_td = element.parent('dd');
            error_td.find('label').hide();
            error_td.append(error);
        },
        submitHandler:function(form){
            ajaxpost('register_form', '', '', 'onerror') 
        },
        rules : {
            user_name : {
                required : true,
                lettersmin : true,
                lettersmax : true,
                lettersonly : true,
                remote   : {
                    url :'index.php?act=login&op=check_member&column=ok',
                    type:'get',
                    data:{
                        user_name : function(){
                            return $('#user_name').val();
                        }
                    }
                }
            },
            password : {
                required : true,
                minlength: 6,
				maxlength: 20
            },
            password_confirm : {
                required : true,
                equalTo  : '#password'
            },
            email : {
                required : true,
                email    : true,
                remote   : {
                    url : 'index.php?act=login&op=check_email',
                    type: 'get',
                    data:{
                        email : function(){
                            return $('#email').val();
                        }
                    }
                }
            },
			            captcha : {
                required : true,
                minlength: 4,
                remote   : {
                    url : 'index.php?act=seccode&op=check&nchash=206f94ec',
                    type: 'get',
                    data:{
                        captcha : function(){
                            return $('#captcha').val();
                        }
                    }
                }
            },
			            agree : {
                required : true
            }
        },
        messages : {
            user_name : {
                required : '用户名不能为空',
                lettersmin : '用户名必须在3-15个字符之间',
                lettersmax : '用户名必须在3-15个字符之间',
				lettersonly: '用户名不能包含敏感字符',
				remote	 : '该用户名已经存在'
            },
            password  : {
                required : '密码不能为空',
                minlength: '密码长度应在6-20个字符之间',
				maxlength: '密码长度应在6-20个字符之间'
            },
            password_confirm : {
                required : '请再次输入您的密码',
                equalTo  : '两次输入的密码不一致'
            },
            email : {
                required : '电子邮箱不能为空',
                email    : '这不是一个有效的电子邮箱',
				remote	 : '该电子邮箱已经存在'
            },
			            captcha : {
                required : '请输入验证码',
                minlength: '验证码不正确',
				remote	 : '验证码不正确'
            },
			            agree : {
                required : '请阅读并同意该协议'
            }
        }
    });
});
</script>
</body>
</html>

JS代码(jquery.poshytip.min.js):

/* * Poshy Tip jQuery plugin v1.1 * http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/ * Copyright 2010-2011,Vasil Dinkov,http://vadikom.com/ */
(function(e){
	var a=[],d=/^url\(["']?([^"'\)]*)["']?\);
	?$/i,c=/\.png$/i,b=e.browser.msie&&e.browser.version==6;
	function f(){
	e.each(a,function(){
	this.refresh(true)}
)}
e(window).resize(f);
	e.Poshytip=function(h,g){
	this.$elm=e(h);
	this.opts=e.extend({
}
,e.fn.poshytip.defaults,g);
	this.$tip=e(['<div class="',this.opts.className,'">','<div class="tip-inner tip-bg-image"></div>','<div class="tip-arrow tip-arrow-top tip-arrow-right tip-arrow-bottom tip-arrow-left"></div>',"</div>"].join("")).appendTo(document.body);
	this.$arrow=this.$tip.find("div.tip-arrow");
	this.$inner=this.$tip.find("div.tip-inner");
	this.disabled=false;
	this.content=null;
	this.init()}
;
	e.Poshytip.prototype={
	init:function(){
	a.push(this);
	var g=this.$elm.attr("title");
	this.$elm.data("title.poshytip",g!==undefined?g:null).data("poshytip",this);
	if(this.opts.showOn!="none"){
	this.$elm.bind({
	"mouseenter.poshytip":e.proxy(this.mouseenter,this),"mouseleave.poshytip":e.proxy(this.mouseleave,this)}
);
	switch(this.opts.showOn){
	case"hover":if(this.opts.alignTo=="cursor"){
	this.$elm.bind("mousemove.poshytip",e.proxy(this.mousemove,this))}
if(this.opts.allowTipHover){
	this.$tip.hover(e.proxy(this.clearTimeouts,this),e.proxy(this.mouseleave,this))}
break;
	case"focus":this.$elm.bind({
	"focus.poshytip":e.proxy(this.show,this),"blur.poshytip":e.proxy(this.hide,this)}
);
	break}
}
}
,mouseenter:function(g){
	if(this.disabled){
	return true}
this.$elm.attr("title","");
	if(this.opts.showOn=="focus"){
	return true}
this.clearTimeouts();
	this.showTimeout=setTimeout(e.proxy(this.show,this),this.opts.showTimeout)}
,mouseleave:function(g){
	if(this.disabled||this.asyncAnimating&&(this.$tip[0]===g.relatedTarget||jQuery.contains(this.$tip[0],g.relatedTarget))){
	return true}
var h=this.$elm.data("title.poshytip");
	if(h!==null){
	this.$elm.attr("title",h)}
if(this.opts.showOn=="focus"){
	return true}
this.clearTimeouts();
	this.hideTimeout=setTimeout(e.proxy(this.hide,this),this.opts.hideTimeout)}
,mousemove:function(g){
	if(this.disabled){
	return true}
this.eventX=g.pageX;
	this.eventY=g.pageY;
	if(this.opts.followCursor&&this.$tip.data("active")){
	this.calcPos();
	this.$tip.css({
	left:this.pos.l,top:this.pos.t}
);
	if(this.pos.arrow){
	this.$arrow[0].className="tip-arrow tip-arrow-"+this.pos.arrow}
}
}
,show:function(){
	if(this.disabled||this.$tip.data("active")){
	return}
this.reset();
	this.update();
	this.display();
	if(this.opts.timeOnScreen){
	setTimeout(e.proxy(this.hide,this),this.opts.timeOnScreen)}
}
,hide:function(){
	if(this.disabled||!this.$tip.data("active")){
	return}
this.display(true)}
,reset:function(){
	this.$tip.queue([]).detach().css("visibility","hidden").data("active",false);
	this.$inner.find("*").poshytip("hide");
	if(this.opts.fade){
	this.$tip.css("opacity",this.opacity)}
this.$arrow[0].className="tip-arrow tip-arrow-top tip-arrow-right tip-arrow-bottom tip-arrow-left";
	this.asyncAnimating=false}
,update:function(j,k){
	if(this.disabled){
	return}
var i=j!==undefined;
	if(i){
	if(!k){
	this.opts.content=j}
if(!this.$tip.data("active")){
	return}
}
else{
	j=this.opts.content}
var h=this,g=typeof j=="function"?j.call(this.$elm[0],function(l){
	h.update(l)}
):j=="[title]"?this.$elm.data("title.poshytip"):j;
	if(this.content!==g){
	this.$inner.empty().append(g);
	this.content=g}
this.refresh(i)}
,refresh:function(h){
	if(this.disabled){
	return}
if(h){
	if(!this.$tip.data("active")){
	return}
var k={
	left:this.$tip.css("left"),top:this.$tip.css("top")}
}
this.$tip.css({
	left:0,top:0}
).appendTo(document.body);
	if(this.opacity===undefined){
	this.opacity=this.$tip.css("opacity")}
var l=this.$tip.css("background-image").match(d),m=this.$arrow.css("background-image").match(d);
	if(l){
	var i=c.test(l[1]);
	if(b&&i){
	this.$tip.css("background-image","none");
	this.$inner.css({
	margin:0,border:0,padding:0}
);
	l=i=false}
else{
	this.$tip.prepend('<table border="0" cellpadding="0" cellspacing="0"><tr><td class="tip-top tip-bg-image" colspan="2"><span></span></td><td class="tip-right tip-bg-image" rowspan="2"><span></span></td></tr><tr><td class="tip-left tip-bg-image" rowspan="2"><span></span></td><td></td></tr><tr><td class="tip-bottom tip-bg-image" colspan="2"><span></span></td></tr></table>').css({
	border:0,padding:0,"background-image":"none","background-color":"transparent"}
).find(".tip-bg-image").css("background-image",'url("'+l[1]+'")').end().find("td").eq(3).append(this.$inner)}
if(i&&!e.support.opacity){
	this.opts.fade=false}
}
if(m&&!e.support.opacity){
	if(b&&c.test(m[1])){
	m=false;
	this.$arrow.css("background-image","none")}
this.opts.fade=false}
var o=this.$tip.find("table");
	if(b){
	this.$tip[0].style.width="";
	o.width("auto").find("td").eq(3).width("auto");
	var n=this.$tip.width(),j=parseInt(this.$tip.css("min-width")),g=parseInt(this.$tip.css("max-width"));
	if(!isNaN(j)&&n<j){
	n=j}
else{
	if(!isNaN(g)&&n>g){
	n=g}
}
this.$tip.add(o).width(n).eq(0).find("td").eq(3).width("100%")}
else{
	if(o[0]){
	o.width("auto").find("td").eq(3).width("auto").end().end().width(document.defaultView&&document.defaultView.getComputedStyle&&parseFloat(document.defaultView.getComputedStyle(this.$tip[0],null).width)||this.$tip.width()).find("td").eq(3).width("100%")}
}
this.tipOuterW=this.$tip.outerWidth();
	this.tipOuterH=this.$tip.outerHeight();
	this.calcPos();
	if(m&&this.pos.arrow){
	this.$arrow[0].className="tip-arrow tip-arrow-"+this.pos.arrow;
	this.$arrow.css("visibility","inherit")}
if(h){
	this.asyncAnimating=true;
	var p=this;
	this.$tip.css(k).animate({
	left:this.pos.l,top:this.pos.t}
,200,function(){
	p.asyncAnimating=false}
)}
else{
	this.$tip.css({
	left:this.pos.l,top:this.pos.t}
)}
}
,display:function(h){
	var i=this.$tip.data("active");
	if(i&&!h||!i&&h){
	return}
this.$tip.stop();
	if((this.opts.slide&&this.pos.arrow||this.opts.fade)&&(h&&this.opts.hideAniDuration||!h&&this.opts.showAniDuration)){
	var m={
}
,l={
}
;
	if(this.opts.slide&&this.pos.arrow){
	var k,g;
	if(this.pos.arrow=="bottom"||this.pos.arrow=="top"){
	k="top";
	g="bottom"}
else{
	k="left";
	g="right"}
var j=parseInt(this.$tip.css(k));
	m[k]=j+(h?0:(this.pos.arrow==g?-this.opts.slideOffset:this.opts.slideOffset));
	l[k]=j+(h?(this.pos.arrow==g?this.opts.slideOffset:-this.opts.slideOffset):0)+"px"}
if(this.opts.fade){
	m.opacity=h?this.$tip.css("opacity"):0;
	l.opacity=h?0:this.opacity}
this.$tip.css(m).animate(l,this.opts[h?"hideAniDuration":"showAniDuration"])}
h?this.$tip.queue(e.proxy(this.reset,this)):this.$tip.css("visibility","inherit");
	this.$tip.data("active",!i)}
,disable:function(){
	this.reset();
	this.disabled=true}
,enable:function(){
	this.disabled=false}
,destroy:function(){
	this.reset();
	this.$tip.remove();
	delete this.$tip;
	this.content=null;
	this.$elm.unbind(".poshytip").removeData("title.poshytip").removeData("poshytip");
	a.splice(e.inArray(this,a),1)}
,clearTimeouts:function(){
	if(this.showTimeout){
	clearTimeout(this.showTimeout);
	this.showTimeout=0}
if(this.hideTimeout){
	clearTimeout(this.hideTimeout);
	this.hideTimeout=0}
}
,calcPos:function(){
	var n={
	l:0,t:0,arrow:""}
,h=e(window),k={
	l:h.scrollLeft(),t:h.scrollTop(),w:h.width(),h:h.height()}
,p,j,m,i,q,g;
	if(this.opts.alignTo=="cursor"){
	p=j=m=this.eventX;
	i=q=g=this.eventY}
else{
	var o=this.$elm.offset(),l={
	l:o.left,t:o.top,w:this.$elm.outerWidth(),h:this.$elm.outerHeight()}
;
	p=l.l+(this.opts.alignX!="inner-right"?0:l.w);
	j=p+Math.floor(l.w/2);
	m=p+(this.opts.alignX!="inner-left"?l.w:0);
	i=l.t+(this.opts.alignY!="inner-bottom"?0:l.h);
	q=i+Math.floor(l.h/2);
	g=i+(this.opts.alignY!="inner-top"?l.h:0)}
switch(this.opts.alignX){
	case"right":case"inner-left":n.l=m+this.opts.offsetX;
	if(n.l+this.tipOuterW>k.l+k.w){
	n.l=k.l+k.w-this.tipOuterW}
if(this.opts.alignX=="right"||this.opts.alignY=="center"){
	n.arrow="left"}
break;
	case"center":n.l=j-Math.floor(this.tipOuterW/2);
	if(n.l+this.tipOuterW>k.l+k.w){
	n.l=k.l+k.w-this.tipOuterW}
else{
	if(n.l<k.l){
	n.l=k.l}
}
break;
	default:n.l=p-this.tipOuterW-this.opts.offsetX;
	if(n.l<k.l){
	n.l=k.l}
if(this.opts.alignX=="left"||this.opts.alignY=="center"){
	n.arrow="right"}
}
switch(this.opts.alignY){
	case"bottom":case"inner-top":n.t=g+this.opts.offsetY;
	if(!n.arrow||this.opts.alignTo=="cursor"){
	n.arrow="top"}
if(n.t+this.tipOuterH>k.t+k.h){
	n.t=i-this.tipOuterH-this.opts.offsetY;
	if(n.arrow=="top"){
	n.arrow="bottom"}
}
break;
	case"center":n.t=q-Math.floor(this.tipOuterH/2);
	if(n.t+this.tipOuterH>k.t+k.h){
	n.t=k.t+k.h-this.tipOuterH}
else{
	if(n.t<k.t){
	n.t=k.t}
}
break;
	default:n.t=i-this.tipOuterH-this.opts.offsetY;
	if(!n.arrow||this.opts.alignTo=="cursor"){
	n.arrow="bottom"}
if(n.t<k.t){
	n.t=g+this.opts.offsetY;
	if(n.arrow=="bottom"){
	n.arrow="top"}
}
}
this.pos=n}
}
;
	e.fn.poshytip=function(h){
	if(typeof h=="string"){
	var g=arguments,k=h;
	Array.prototype.shift.call(g);
	if(k=="destroy"){
	this.die("mouseenter.poshytip").die("focus.poshytip")}
return this.each(function(){
	var l=e(this).data("poshytip");
	if(l&&l[k]){
	l[k].apply(l,g)}
}
)}
var i=e.extend({
}
,e.fn.poshytip.defaults,h);
	if(!e("#poshytip-css-"+i.className)[0]){
	e(['<style id="poshytip-css-',i.className,'" type="text/css">',"div.",i.className,"{
	visibility:hidden;
	position:absolute;
	top:0;
	left:0;
}
","div.",i.className," table,div.",i.className," td{
	margin:0;
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	font-variant:inherit;
}
","div.",i.className," td.tip-bg-image span{
	display:block;
	font:1px/1px sans-serif;
	height:",i.bgImageFrameSize,"px;
	width:",i.bgImageFrameSize,"px;
	overflow:hidden;
}
","div.",i.className," td.tip-right{
	background-position:100% 0;
}
","div.",i.className," td.tip-bottom{
	background-position:100% 100%;
}
","div.",i.className," td.tip-left{
	background-position:0 100%;
}
","div.",i.className," div.tip-inner{
	background-position:-",i.bgImageFrameSize,"px -",i.bgImageFrameSize,"px;
}
","div.",i.className," div.tip-arrow{
	visibility:hidden;
	position:absolute;
	overflow:hidden;
	font:1px/1px sans-serif;
}
","</style>"].join("")).appendTo("head")}
if(i.liveEvents&&i.showOn!="none"){
	var j=e.extend({
}
,i,{
	liveEvents:false}
);
	switch(i.showOn){
	case"hover":this.live("mouseenter.poshytip",function(){
	var l=e(this);
	if(!l.data("poshytip")){
	l.poshytip(j).poshytip("mouseenter")}
}
);
	break;
	case"focus":this.live("focus.poshytip",function(){
	var l=e(this);
	if(!l.data("poshytip")){
	l.poshytip(j).poshytip("show")}
}
);
	break}
return this}
return this.each(function(){
	new e.Poshytip(this,i)}
)}
;
	e.fn.poshytip.defaults={
	content:"[title]",className:"tip-yellow",bgImageFrameSize:10,showTimeout:500,hideTimeout:100,timeOnScreen:0,showOn:"hover",liveEvents:false,alignTo:"cursor",alignX:"right",alignY:"top",offsetX:-22,offsetY:18,allowTipHover:true,followCursor:false,fade:true,slide:true,slideOffset:8,showAniDuration:300,hideAniDuration:300}
}
)(jQuery);

CSS代码(base.css):

/** * 鍒濆鍖朒TML鏍囩鍙婂父鐢ㄧ被鍨? * @kivenhan * www.shopnc.net * Apr-01-2012 **/
/* =============== * 閲嶆柊瀹氫箟Html鍏冪礌 * =============== */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input{padding:0;margin:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,table,th,td{font-size:1em;font-style:normal;font-weight:normal;}
strong{font-weight:bold;}
ul,ol{list-style:none outside none;}
fieldset,img{border:medium none;}
caption,th{text-align:left;}
table{border-collapse:collapse;border-spacing:0;}
body{background:none repeat scroll 0 0 #FFF;color:#333333;font:12px/1 "Microsoft YaHei","Lucida Grande","Lucida Sans Unicode",Tahoma,Helvetica,Arial,sans-serif;}
input,select,textarea{font:12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;}
a{outline:medium none;}
a:link,a:visited,a:active{text-decoration:none;}
a:hover{text-decoration:underline;}
i,cite,em{font-style:normal;}
input,button,select,textarea{outline:none}
html{-webkit-text-size-adjust:none;}
html{min-height:101%;}
/* Clearfix,閬垮厤鍥犲瓙鍏冪礌娴姩鑰屽鑷寸殑鐖跺厓绱犻珮搴︾己澶辫兘闂 */
.clearfix:after{clear:both;content:".";display:block;height:0;line-height:0;visibility:hidden;}
.clearfix{display:inline-block;}
html[xmlns] .clearfix{display:block;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
time{color:#777;}
/* ========================== * 涓烘棫鐗堟湰娴忚鍣ㄦ牸寮忓寲Html5鍏冪礌 * ========================== */
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}
/*鏂囧瓧鎺掔増******************************/
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}
.fb{font-weight:bold;}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh150{line-height:150%}
.lh180{line-height:180%}
.lh200{line-height:200%}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}
.noborder{border-style:none!important;border-width:0!important;}
/*瀹氫綅******************************/
.tl{text-align:left !important;}
.tc{text-align:center !important;}
.tr{text-align:right !important;}
.bc{margin-right:auto;margin-left:auto;}
.fl{float:left;display:inline;}
.fr{float:right !important;display:inline;}
.cb{clear:both;}
.cl{clear:left;}
.cr{clear:right;}
.vm{vertical-align:middle;}
.vt{vertical-align:top;}
.pr{position:relative;}
.pa{position:absolute;}
.abs-right{position:absolute;right:0;}
.zoom{zoom:1}
/*.hidden{visibility:hidden;*/
}
.none{display:none;}
.clear{clear:both;height:0;font-size:0;line-height:0;}
/*闀垮害楂樺害******************************/
.w10{width:10px;}
.w20{width:20px;}
.w30{width:30px;}
.w40{width:40px !important;}
.w50{width:50px !important;}
.w60{width:60px !important;}
.w65{width:65px;}
.w70{width:70px;}
.w80{width:80px;}
.w90{width:90px;}
.w96{width:96px;}
.w100{width:100px;}
.w110{width:110px;}
.w120{width:120px;}
.w150{width:150px;}
.w160{width:160px;}
.w180{width:180px;}
.w200{width:200px !important;}
.w210{width:210px !important;}
.w230{width:230px;}
.w240{width:240px;}
.w250{width:250px !important;}
.w270{width:270px;}
.w300{width:300px !important;}
.w340{width:340px;}
.w380{width:380px;}
.w400{width:400px!important;}
.w450{width:450px!important;}
.w500{width:500px;}
.w530{width:530px;}
.w600{width:600px !important;}
.w700{width:700px;}
.w780{width:780px;}
.w800{width:800px;}
.w208{width:208px;}
.w{width:100%}
.h50{height:50px !important;}
.h80{height:80px;}
.h100{height:100px !important;}
.h200{height:200px;}
.h{height:100%}
.size30{width:30px;height:30px;}
.size32{width:32px;height:32px;}
.size40{width:40px;height:40px;}
.size60{width:60px;height:60px;}
.size70{width:70px;height:70px;}
.size72{width:72px;height:72px;}
.size75{width:75px;height:75px;}
.size80{width:80px;height:80px;}
.size90{width:90px;height:90px;}
.size100{width:100px;height:100px;}
.size110{width:110px;height:110px;}
.size120{width:120px;height:120px;}
.size128{width:128px;height:128px;}
.size142-80{width:142px;height:80px;}
.size160{width:160px;height:160px;}
.size160-48{width:160px;height:48px;}
.size150{width:150px;height:150px;}
.size160{width:160px;height:160px;}
.size184{width:184px;height:114px;}
.size190{width:190px;height:190px;}
.size196{width:196px;height:196px;}
.size233{width:233px;}
.size250{width:250px;height:250px;}
.size310{width:310px;height:310px;}
.size-brand-logo{width:88px;height:42px;}
/*杈硅窛******************************/
.m10{margin:10px;}
.m15{margin:15px;}
.m30{margin:30px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mt50{margin-top:50px !important;}
.mt100{margin-top:100px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb50{margin-bottom:50px;}
.mb100{margin-bottom:100px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml50{margin-left:50px;}
.ml100{margin-left:100px !important;}
.ml200{margin-left:200px !important;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px !important;}
.mr50{margin-right:50px !important;}
.mr100{margin-right:100px;}
/*杈硅窛******************************/
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt50{padding-top:50px;}
.pt100{padding-top:100px;}
.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom:15px;}
.pb20{padding-bottom:20px !important;}
.pb30{padding-bottom:30px;}
.pb50{padding-bottom:50px;}
.pb100{padding-bottom:100px;}
.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl50{padding-left:50px;}
.pl100{padding-left:100px;}
.pr5{padding-right:5px;}
.pr10{padding-right:10px;}
.pr15{padding-right:15px;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pr50{padding-right:50px;}
.pr100{padding-right:100px;}
/*div瀹介珮灞€涓?******************************/
.thumb,.logo{display:table-cell;vertical-align:middle;text-align:center;}
.thumb i,.logo i{*display:inline-block;*height:100%;*vertical-align:middle;}
.thumb img,.logo img{*vertical-align:middle;}
.thumb-cut{overflow:hidden;}
.thumb-cut a{text-align:center;float:left;position:relative;overflow:hidden;}
.thumb-cut img{vertical-align:text-top;float:none;position:relative;}
#page{background-color:#F5F5F5;width:100%;height:29px;border-bottom:1px solid #D8D8D8;}
.warp-all{width:1000px;margin:0 auto;}
/*==============================*/
/* 椤堕儴瀵艰埅鏉℃牱寮?*/
/*==============================*/
#topNav{height:29px;position:relative;z-index:998;}
#topNav a{color:#666;}
#topNav a:hover{color:#F30;text-decoration:underline;}
#topNav .user-entry{line-height:20px;display:block;width:550px;height:20px;float:left;padding:4px 0 5px 0;margin:0;overflow:hidden;}
.user-entry dt{color:#555;display:block;float:left;padding:0 5px;}
.user-entry dt span{font-weight:600;padding:0 2px;}
.user-entry dd{color:#999;display:block;float:left;padding:0 4px;}
.user-entry dd a{color:#999;padding:0 2px;}
#topNav .quick-menu{position:absolute;top:4px;right:0px;}
.quick-menu li{background:url(../images/nc_topbar.gif) no-repeat 100% -26px;float:left;margin-left:-1px;position:relative;z-index:auto;}
.quick-menu li.last{background:none transparent scroll repeat 0% 0%}
.quick-menu li a{line-height:18px;background-color:transparent;padding:2px 10px 0 10px;display:block;}
.quick-menu .menu{}
.quick-menu .menu-hd{line-height:18px;display:block;height:18px;padding:0px 22px 2px 10px;margin:1px 1px 0 1px;position:relative;z-index:10002;cursor:pointer;}
.quick-menu .menu-hd i{font-size:0px;line-height:0;width:0px;height:0px;border-width:4px;border-color:#333 transparent transparent transparent;border-style:solid dashed dashed dashed;position:absolute;top:9px;right:10px;-webkit-transition:.2s ease-in;-moz-transition:-webkit-transform .2s ease-in;-o-transition:-webkit-transform .2s ease-in;transition:.2s ease-in;}
.quick-menu .menu:hover .menu-hd{background:#FFF;margin:0px;border:#CCC 1px solid;border-bottom-style:none;}
.quick-menu .menu:hover .menu-hd i{top:7px;FILTER:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-moz-transform:rotate(180deg);-moz-transform-origin:50% 30%;-webkit-transform:rotate(180deg);-webkit-transform-origin:50% 30%;-o-transform:rotate(180deg);-o-transform-origin:50% 30%;transform:rotate(180deg);transform-origin:50% 30%;}
.quick-menu .menu-bd{background:#fff;display:none;border:#CCC 1px solid;position:absolute;z-index:10001;top:21px;overflow:hidden;zoom:1;}
.quick-menu .menu-bd .loading{margin:10px auto 10px 48%;}
.quick-menu .menu:hover .menu-bd{display:block;}
.quick-menu .user-center .menu-hd{width:48px;padding-top:1px;_padding-top:1px;}
.quick-menu .user-center .menu-bd{width:92px;right:0px;}
.quick-menu .user-center ul{padding:8px;float:left;}
.quick-menu .user-center ul li{background-image:none;}
.quick-menu .user-center ul li a{background-image:none;line-height:20px;width:76px;height:20px;float:left;clear:both;padding:0 0 2px 0;margin:0;}
.quick-menu .seller-center .menu-hd{width:48px;padding-top:1px;_padding-top:1px;}
.quick-menu .seller-center .menu-bd{width:92px;right:0px;}
.quick-menu .seller-center ul{padding:8px;float:left;}
.quick-menu .seller-center ul li{background-image:none;}
.quick-menu .seller-center ul li a{line-height:20px;background-image:none;width:76px;height:20px;float:left;clear:both;padding:0 0 2px 0;margin:0;}
.quick-menu .cart .menu-hd{color:#60332c;width:90px;padding-top:1px;_padding-top:1px;padding-left:25px;}
.quick-menu .cart .menu-hd s{background:url(../images/nc_topbar.gif) no-repeat scroll 0px 0px;width:12px;height:12px;position:absolute;top:5px;*top:4px;left:7px;}
.quick-menu .cart .menu-hd strong{font-weight:600;color:#F60;padding:0 3px;}
.quick-menu .cart .menu:hover .menu-hd{color:#F30;text-decoration:underline;}
.quick-menu .cart .menu-bd{width:370px;left:0px;}
.quick-menu .cart .order a{padding:0;}
.quick-menu .cart .order table{width:354px;padding:0;margin:0;}
.quick-menu .cart .order td{padding:5px;border-bottom:solid 1px #F1F1F1;}
.quick-menu .cart .order td.picture{height:40px;width:40px;float:left;}
.quick-menu .cart .order td.name{line-height:18px;width:200px;height:36;padding:5px 5px 9px 5px;}
.quick-menu .cart .order td.price{height:40px;width:84px;}
.quick-menu .cart .order td.price p{line-height:20px;color:#F30;height:20px;text-align:right;}
.quick-menu .cart .order td.no-border{border:none;}
.quick-menu .cart .order td span.all{width:200px;float:left;}
.quick-menu .cart .order td span.all strong{font-weight:600;padding:0 4px;color:#F30;}
.quick-menu .cart .order td span.button a,.quick-menu .cart .no-order .button{line-height:24px;color:#FFF;background-color:#FE8502;text-align:center;display:block;float:right;padding:0 10px;margin:0px;border:solid 1px #ED6002;border-radius:4px;}
.quick-menu .cart .no-order,.quick-menu .cart .order{padding:8px;float:left;}
.quick-menu .cart .no-order span{line-height:24px;color:#999;display:block;height:24px;float:left;}
.quick-menu .favorite .menu-hd{width:48px;padding-top:1px;_padding-top:1px;}
.quick-menu .favorite .menu-bd{width:80px;left:0px;}
.quick-menu .favorite ul{padding:8px;float:left;}
.quick-menu .favorite ul li{background-image:none;}
.quick-menu .favorite ul li a{background-image:none;line-height:20px;width:60px;height:20px;float:left;clear:both;padding:0 0 2px 0;margin:0;}
.quick-menu li.links{background:url(../images/hbg.png) no-repeat -119px 6px;}
.quick-menu .links .menu-hd{width:48px;padding-top:1px;_padding-top:1px;}
.quick-menu .links .menu-db{display:block;}
.quick-menu .links .menu-bd{float:left;right:0px;}
.quick-menu .links .menu-bd ul{padding:8px;float:left;}
.quick-menu .links .menu-bd ul li{background-image:none;}
.quick-menu .links .menu-bd ul li a{line-height:20px;background:url(../images/hbg.png) no-repeat 0px -530px;white-space:nowrap;width:64px;height:20px;clear:left;padding:0 0 2px 12px;margin:0;overflow:hidden;}
.warning{color:#C00;background-color:#FFC;width:98%;clear:both;padding:6px;margin:6px auto;border:1px dashed #F90;}
.warning label{clear:both;line-height:20px;}
#footer{font-size:12px !important;line-height:20px;color:#aaa;text-align:center;display:block;width:1000px;clear:both;margin:12px auto 0px auto;padding-bottom:10px;border-top:1px solid #E9ECEF;overflow:hidden;}
#footer p{color:#666;word-spacing:5px;padding:10px 0;}
#footer a{color:#666;text-decoration:none;}
#footer a:hover{text-decoration:underline;}
#footer .vol{font-family:Verdana,Geneva,sans-serif;font-weight:600;font-style:oblique;font-size:12px;}
#footer .vol .b{color:#00F;}
#footer .vol .o{color:#F60;}
#footer .vol em{font-family:Georgia,Arial;font-weight:600;font-style:italic;color:#000;margin-left:2px;}
/* tip鎻愮ず */
.tip-yellowsimple{color:#000;background-color:#fff9c9;text-align:left;min-width:50px;max-width:300px;border:1px solid #c7bf93;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;z-index:1000;padding:6px 8px;}
.tip-yellowsimple .tip-inner{font:12px/16px arial,helvetica,sans-serif;}
.tip-yellowsimple .tip-arrow-top{background:url(../images/tip-yellowsimple_arrows.gif) no-repeat;width:9px;height:6px;margin-top:-6px;margin-left:-5px;top:0;left:50%;}
.tip-yellowsimple .tip-arrow-right{background:url(../images/tip-yellowsimple_arrows.gif) no-repeat -9px 0;width:6px;height:9px;margin-top:-4px;margin-left:0;top:50%;left:100%;}
.tip-yellowsimple .tip-arrow-bottom{background:url(../images/tip-yellowsimple_arrows.gif) no-repeat -18px 0;width:9px;height:6px;margin-top:0;margin-left:-5px;top:100%;left:50%;}
.tip-yellowsimple .tip-arrow-left{background:url(../images/tip-yellowsimple_arrows.gif) no-repeat -27px 0;width:6px;height:9px;margin-top:-4px;margin-left:-6px;top:50%;left:0;}
/* 璋冭瘯妯″紡 */
.trace{font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-size:14px;color:#000;line-height:18px;background:#FFF299;padding:8px;margin:8px;border:1px dashed silver;}
.trace fieldset{margin:8px;}
.trace fieldset legend{font-size:16px;color:#000;font-weight:bold;}
.trace fieldset div{overflow:auto;max-height:300px;_height:300px;text-align:left;}

CSS代码(home_login.css):

@charset "utf-8";.quick-login{background:#FFF url(login_bg.png) repeat-x scroll center top;overflow:hidden;width:278px;padding:0 40px;margin-top:-1px;}
.quick-login dl{width:100%;margin:0 auto;overflow:hidden;}
.quick-login dl dt{line-height:20px;height:20px;margin:8px 0 2px 0;text-shadow:1px 1px 0 #FFF;}
.quick-login dl dd span{line-height:28px;color:#999;margin-left:8px;}
.quick-login .text{font-family:Tahoma;width:250px;height:24px;line-height:24px;background-color:#FFF;padding:1px 2px 3px 4px !important;padding:3px 2px 1px 4px;border:solid 1px;border-color:#CCC #DDD #DDD #CCC;border-radius:0;box-shadow:2px 2px 1px 0 #E7E7E7 inset;-moz-box-shadow:2px 2px 1px 0 #E7E7E7 inset/* if FF*/
;-webkit--box-shadow:2px 2px 1px 0 #E7E7E7 inset/* if Webkie*/
;}
.quick-login .text:focus{background-color:#FFF;border-color:#CCC;box-shadow:1px 1px 1px 0 #E7E7E7;-moz-box-shadow:1px 1px 1px 0 #E7E7E7/* if FF*/
;-webkit--box-shadow:1px 1px 1px 0 #E7E7E7/* if Webkie*/
;}
.quick-login ul{width:100%;display:block;clear:both;margin:20px auto 10px auto;padding-bottom:10px;overflow:hidden;border-bottom:solid 1px #E7E7E7;}
.quick-login ul li{line-height:20px;color:#999;}
.quick-login ul li a{text-decoration:underline;font-weight:600;margin:0 2px;}
.quick-login ul li a.forget{color:#FF7F00;}
.quick-login ul li a.register{color:#006DD9;}
.quick-login .enter{width:100%;margin:10px auto 20px auto;overflow:hidden;}
.quick-login .enter .submit{color:#FFF;font-weight:600;background:url(login.png) no-repeat scroll 0px 0px;width:88px;height:28px;padding:0;margin:0;border:0;cursor:pointer;text-shadow:1px 1px 0 #DB7800;}
.quick-login .enter .submit:hover{background:url(login.png) no-repeat scroll 0px -28px;}
.quick-login .enter span{border-left:dotted 1px #ccc;padding-left:6px;margin:0 0 0 6px;line-height:28px;}
.quick-login .enter span a{background-image:url(login.png);background-repeat:no-repeat;background-attachment:scroll;height:28px;display:inline-block;}
.quick-login .enter span a.qq{background-position:-88px 0px;width:78px;}
.quick-login .enter span a:hover.qq{background-position:-88px -28px;text-decoration:none;}
.quick-login .enter span a.sina{background-position:-166px 0px;width:88px;}
.quick-login .enter span a:hover.sina{background-position:-166px -28px;text-decoration:none;}
/* 娉ㄥ唽琛ㄥ崟鏍峰紡 */
.nc-login-layout{width:850px;margin:0 auto}
.nc-login{width:400px;float:right;}
.nc-login-title{background:#F9F9F9;border:#D8D8D8 solid;border-width:1px 1px 0 1px;}
.nc-login-title h3{font-size:18px;font-family:"寰蒋闆呴粦";font-weight:700;line-height:20px;padding:15px 0 25px 25px;color:#555;}
.nc-login-content{background:#F9F9F9;padding:0 20px;border:#D8D8D8 solid;border-width:0 1px;overflow:hidden;zoom:1;}
.nc-login-content dl{width:100%;float:left;clear:both;padding:0;}
.nc-login-content dt{font-size:14px;line-height:28px;color:#777;text-align:right;width:22%;float:left;}
.nc-login-content dd{text-align:left;width:75%;float:right;}
.nc-login-content dd label{clear:both;float:left;line-height:24px;height:24px;width:210px;margin:0;}
.nc-login-content dd .text{font-family:Tahoma;width:220px;height:20px;line-height:20px;background-color:#FFF;padding:3px!important;border:solid 1px;border-color:#BBB;}
.nc-login-content dd .text:focus{background-color:#FFF;border-color:#EFA100;outline:2px solid #FFDC97;}
.nc-login-content dd a{line-height:28px;height:28px;text-align:left;color:#999;}
.nc-login-content .submit{font-size:14px;font-weight:700;color:#FFF;background:url(login.png) no-repeat scroll 0px -56px;width:98px;height:34px;padding:0;margin:0;border:0;cursor:pointer;}
.nc-login-content .submit:hover{background:url(login.png) no-repeat scroll 0px -90px;}
.nc-login-layout a.forget{font-weight:700;color:#06C;margin-left:10px;}
.nc-login-layout a.register{font-weight:600;line-height:26px;color:#555;background:#FFF url(login.png) no-repeat scroll -98px -56px;text-align:center;display:inline-block;width:50px;height:26px;margin:0 6px;}
.nc-login-layout a:hover.register{background-position:-98px -82px;color:#000;text-decoration:none;}
.nc-login-layout a.agreement{color:#c53801;font-weight:600;}
.nc-login-layout a.agreement:hover{text-decoration:underline;}
.nc-login-other{border-top:dashed 1px #D8D8D8;padding:10px 0px 20px 28%;}
.nc-login-other p{line-height:20px;color:#777;}
.nc-login-other a{text-decoration:none;display:inline-block;background:url(login.png) no-repeat scroll;vertical-align:middle;margin-top:10px;height:28px;}
.nc-login-other a.qq{background-position:-88px 0px;width:78px;}
.nc-login-other a:hover.qq{background-position:-88px -28px;}
.nc-login-other a.sina{background-position:-166px 0px;width:88px;}
.nc-login-other a:hover.sina{background-position:-166px -28px;}
.nc-login-bottom{clear:both;background:url(login.png) no-repeat scroll 0px -124px;width:400px;height:40px;}
.nc-login-layout .left-pic{background-color:#FFF;width:450px;height:350px;float:left;position:relative;z-index:1;}
.nc-login-layout .left-pic img{width:450px;height:350px;position:absolute;z-index:1;top:0;left:0}
.nc-login-layout .left-pic span{position:absolute;z-index:2;top:220px;left:100px;line-height:32px;font-size:24px;font-family:"寰蒋闆呴粦";width:250px;text-align:center;}
.nc-login-layout .left-pic p a{color:#FFF;position:absolute;z-index:2;top:270px;left:165px;line-height:28px;font-size:12px;width:120px;text-align:center;}
.nc-login-left{line-height:22px;color:#626A73;display:inline;width:450px;float:left;margin:10px 0;}
.nc-login-left h3{font-size:18px;font-family:"寰蒋闆呴粦";font-weight:700;color:#555;line-height:30px;margin-top:2px;margin-bottom:6px;}
.nc-login-left ol{width:420px;margin-top:20px;border-bottom:dashed 1px #E7E7E7;}
.nc-login-left ol li{font-family:"寰蒋闆呴粦";font-size:14px;line-height:48px;display:block;vertical-align:middle;width:200px;height:48px;float:left;padding:0 0 12px 0;margin:0 0 5px 10px;overflow:hidden;}
.nc-login-left ol li i{display:inline-block;background:url(login.png) no-repeat scroll;vertical-align:middle;width:48px;height:48px;margin-right:10px;}
.nc-login-left ol li.ico01 i{background-position:-256px 0;}
.nc-login-left ol li.ico02 i{background-position:-304px 0;}
.nc-login-left ol li.ico03 i{background-position:-352px 0;}
.nc-login-left ol li.ico04 i{background-position:-256px -48px;}
.nc-login-left ol li.ico05 i{background-position:-304px -48px;}
.nc-login-left ol li.ico06 i{background-position:-352px -48px;}
@media projection,screen{.ui-tabs-hide{display:none;}
}
@media print{.ui-tabs-nav{display:none;}
}
.ui-tabs-nav:after{display:block;clear:both;content:" ";}
.ui-tabs-disabled{opacity:.4;filter:alpha(opacity=40);}
.ui-tabs-loading em{background:url(loading.gif) no-repeat 0 50%;padding:0 0 0 20px;}
* html .ui-tabs-nav{display:inline-block;}
*:first-child+html .ui-tabs-nav{display:inline-block;}
.nc-login ul li{background:#FFF;display:block;border:solid #D8D8D8;border-width:1px 1px 1px 1px;float:left;width:199px;height:30px;line-height:30px;text-align:center;margin:5px -1px 0 -1px;font-size:12px;font-weight:600;line-height:28px;position:relative;z-index:1;}
.nc-login ul li a{color:#999;}
.nc-login ul li.ui-tabs-selected{line-height:36px;font-size:14px;font-weight:600;border:solid #D8D8D8;border-width:1px 1px 0 1px;background:#F9F9F9;float:left;width:198px;height:36px;margin:0;text-align:center;position:relative;z-index:2;}
.nc-login ul li.ui-tabs-selected a{color:#333;}

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