鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。

下载大键盘: http://www.cnblogs.com/Files/sccxszy/softKey.rar

小键盘：http://www.cnblogs.com/Files/sccxszy/smallSoftkey.rar

小键盘:

效果还原:Default.aspx,softkeyboard.js,softkey.css三个文件

js代码:

softkeyboard.js

复制代码 代码如下:

window.onload=

function()

{

password=null;

initCalc();

}

varpassword;

varCapsLockValue=;

varcheckSoftKey;

functionsetVariables(){

tablewidth=;

tableheight=;

if(navigator.appName=="Netscape"){

horz=".left";

vert=".top";

doc;

styleDoc="";

innerW="window.innerWidth";

innerH="window.innerHeight";

offsetX="window.pageXOffset";

offsetY="window.pageYOffset";

}

else{

horz=".pixelLeft";

vert=".pixelTop";

doc;

styleDoc=".style";

innerW="document.body.clientWidth";

innerH="document.body.clientHeight";

offsetX="document.body.scrollLeft";

offsetY="document.body.scrollTop";

}

}

functioncheckLocation(){

if(checkSoftKey){

objectXY="softkeyboard";

varavailableX=eval(innerW);

varavailableY=eval(innerH);

varcurrentX=eval(offsetX);

varcurrentY=eval(offsetY);

x=availableX-tablewidth+currentX;

y=currentY;

evalMove();

}

setTimeout("checkLocation()",);

}

functionevalMove(){

eval(docStyle+objectXY+styleDoc+vert+"="+y);

}

self.onError=null;

currentX=currentY=;

whichIt=null;

lastScrollX=;lastScrollY=;

NS=(document.layers)?:;

IE=(document.all)?:;

functionheartBeat(){

if(IE){diffY=document.body.scrollTop;diffX=document.body.scrollLeft;}

if(NS){diffY=self.pageYOffset;diffX=self.pageXOffset;}

if(diffY!=lastScrollY){

percent=.*(diffY-lastScrollY);

if(percent>)percent=Math.ceil(percent);

elsepercent=Math.floor(percent);

if(IE)document.all.softkeyboard.style.pixelTop+=percent;

if(NS)document.softkeyboard.top+=percent;

lastScrollY=lastScrollY+percent;}

if(diffX!=lastScrollX){

percent=.*(diffX-lastScrollX);

if(percent>)percent=Math.ceil(percent);

elsepercent=Math.floor(percent);

if(IE)document.all.softkeyboard.style.pixelLeft+=percent;

if(NS)document.softkeyboard.left+=percent;

lastScrollX=lastScrollX+percent;}}

functioncheckFocus(x,y){

stalkerx=document.softkeyboard.pageX;

stalkery=document.softkeyboard.pageY;

stalkerwidth=document.softkeyboard.clip.width;

stalkerheight=document.softkeyboard.clip.height;

if((x>stalkerx&&x<(stalkerx+stalkerwidth))&&(y>stalkery&&y<

(stalkery+stalkerheight)))returntrue;

elsereturnfalse;}

functiongrabIt(e){

checkSoftKey=false;

if(IE){

whichIt=event.srcElement;

while(whichIt.id!=null&&whichIt.id.indexOf("softkeyboard")==-){

whichIt=whichIt.parentElement;

if(whichIt==null){returntrue;}}

if(whichIt.style!=null){

whichIt.style.pixelLeft=whichIt.offsetLeft;

whichIt.style.pixelTop=whichIt.offsetTop;

}

currentX=(event.clientX+document.body.scrollLeft);

currentY=(event.clientY+document.body.scrollTop);

}else{

window.captureEvents(Event.MOUSEMOVE);

if(checkFocus(e.pageX,e.pageY)){

whichIt=document.softkeyboard;

StalkerTouchedX=e.pageX-document.softkeyboard.pageX;

StalkerTouchedY=e.pageY-document.softkeyboard.pageY;}}

returntrue;}

functionmoveIt(e){

if(whichIt==null){returnfalse;}

if(IE){

if(whichIt.style!=null){

newX=(event.clientX+document.body.scrollLeft);

newY=(event.clientY+document.body.scrollTop);

distanceX=(newX-currentX);distanceY=(newY-currentY);

currentX=newX;currentY=newY;

whichIt.style.pixelLeft+=distanceX;

whichIt.style.pixelTop+=distanceY;

if(whichIt.style.pixelTop<document.body.scrollTop)whichIt.style.pixelTop=

document.body.scrollTop;

if(whichIt.style.pixelLeft<document.body.scrollLeft)whichIt.style.pixelLeft=

document.body.scrollLeft;

if(whichIt.style.pixelLeft>document.body.offsetWidth-document.body.scrollLeft-

whichIt.style.pixelWidth-)whichIt.style.pixelLeft=document.body.offsetWidth-

whichIt.style.pixelWidth-;

if(whichIt.style.pixelTop>document.body.offsetHeight+document.body.scrollTop-

whichIt.style.pixelHeight-)whichIt.style.pixelTop=document.body.offsetHeight+

document.body.scrollTop-whichIt.style.pixelHeight-;

event.returnValue=false;

}

}else{

whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);

if(whichIt.left<+self.pageXOffset)whichIt.left=+self.pageXOffset;

if(whichIt.top<+self.pageYOffset)whichIt.top=+self.pageYOffset;

if((whichIt.left+whichIt.clip.width)>=(window.innerWidth+self.pageXOffset-))

whichIt.left=((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-;

if((whichIt.top+whichIt.clip.height)>=(window.innerHeight+self.pageYOffset-))

whichIt.top=((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-;

returnfalse;}

returnfalse;}

functiondropIt(){whichIt=null;

if(NS)window.releaseEvents(Event.MOUSEMOVE);

returntrue;}

if(NS){window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);

window.onmousedown=grabIt;

window.onmousemove=moveIt;

window.onmouseup=dropIt;}

if(IE){

document.onmousedown=grabIt;

document.onmousemove=moveIt;

document.onmouseup=dropIt;}

var;

style+=".btn_letter{BORDER-RIGHT:pxsolid;PADDING-RIGHT:px;BORDER-TOP:pxsolid;

PADDING-LEFT:px;FONT-SIZE:px;BORDER-LEFT:pxsolid;CURSOR:hand;PADDING-TOP:px;

BORDER-BOTTOM:pxsolid;width:px;height:px;}";

style+=".btn_num{width:px;BORDER-RIGHT:pxsolid;PADDING-RIGHT:px;BORDER-TOP:px

solid;PADDING-LEFT:px;FONT-SIZE:px;BORDER-LEFT:pxsolid;CURSOR:hand;PADDING-

TOP:px;BORDER-BOTTOM:pxsolid;height:px;}";

style+=".table_title{FILTER:progid:DXImageTransform.Microsoft.Gradient

(GradientType=,StartColorStr=#BDEF,EndColorStr=#ABDA);height:px;padding-top:

px;}";

style+=".btn_input{BORDER-RIGHT:#CAApxsolid;PADDING-RIGHT:px;BORDER-TOP:

#CAApxsolid;PADDING-LEFT:px;FONT-SIZE:px;FILTER:

progid:DXImageTransform.Microsoft.Gradient(GradientType=,StartColorStr=#ffffff,

EndColorStr=#CDAF);BORDER-LEFT:#CAApxsolid;CURSOR:hand;COLOR:black;PADDING-

TOP:px;BORDER-BOTTOM:#CAApxsolid}";

style+="</style>";

document.write(style);

document.write("<DIValign=centerid="softkeyboard"name="softkeyboard"

><table

id="CalcTable"width=""border=""align="center"cellpadding=""cellspacing="

"bgcolor=""><FORMid=Calcname=Calcaction=""method=postautocomplete="off"><tr><td

class="table_title"align="right"valign="middle"bgcolor=""><INPUTtype=hiddenvalue=""name=password><INPUTtype=hiddenvalue=ok

name=action> <font>博客园

密码输入器

</font>       &n

bsp  <INPUTid=useKeyclass="btn_input"type=button

value="使用键盘输入"bgtype=""onclick="password.readOnly=;password.focus

();closekeyboard();password.value='';"><span></span></td></tr><tr

align="center"><tdalign="center"bgcolor="#FFFFFF"><tablealign="center"width="%

"border=""cellspacing=""cellpadding="">n<tralign="left"valign="middle">

n<td><inputtype=buttonvalue="~"></td>n<td><inputtype=buttonvalue="!

"></td>n<td><inputtype=buttonvalue="@"></td>n<td><inputtype=buttonvalue="#

"></td>n<td><inputtype=buttonvalue="$"></td>n<td><inputtype=buttonvalue="%

"></td>n<td><inputtype=buttonvalue="^"></td>n<td><inputtype=buttonvalue="&

"></td>n<td><inputtype=buttonvalue="*"></td>n<td><inputtype=buttonvalue="(

"></td>n<td><inputtype=buttonvalue=")"></td>n<td><inputtype=buttonvalue="_

"></td>n<td><inputtype=buttonvalue="+"></td>n<td><inputtype=buttonvalue="|

"></td>n<tdcolspan=""rowspan=""><inputname="button"type=buttonvalue="退

格"onclick="setpassvalue();"onDblClick="setpassvalue();"

>n</td>n</tr>n<tralign="left"valign="middle">

n<td><inputtype=buttonvalue="`"></td>n<td><inputtype=buttonbgtype=""

name="button_number"value=""></td>n<td><inputtype=buttonbgtype=""

name="button_number"value=""></td>n<td><inputtype=buttonbgtype=""

name="button_number"value=""></td>n<td><inputtype=buttonbgtype=""

name="button_number"value=""></td>n<td><inputtype=buttonbgtype=""

name="button_number"value=""></td>n<td><inputtype=buttonbgtype=""

name="button_number"value=""></td>n<td><inputtype=buttonbgtype=""

name="button_number"value=""></td>n<td><inputtype=buttonbgtype=""

name="button_number"value=""></td>n<td><inputtype=buttonbgtype=""

name="button_number"value=""></td>n<td><inputbgtype=""

name="button_number"type=buttonvalue=""></td>n<td><inputtype=buttonvalue="-

"></td>n<td><inputtype=buttonvalue="="></td>n<td><inputtype=buttonvalue="

"></td>n<td></td>n</tr>n<tralign="left"valign="middle">n<td><inputtype=button

value="q"></td>n<td><inputtype=buttonvalue="w"></td>n<td><inputtype=button

value="e"></td>n<td><inputtype=buttonvalue="r"></td>n<td><inputtype=button

value="t"></td>n<td><inputtype=buttonvalue="y"></td>n<td><inputtype=button

value="u"></td>n<td><inputtype=buttonvalue="i"></td>n<td><inputtype=button

value="o"></td>n<td><inputname="button"type=buttonvalue="p"></td>n<td>

<Inputname="button"type=buttonvalue="{"></td>n<td><inputtype=buttonvalue="}

"></td>n<td><inputtype=buttonvalue="["></td>n<td><inputtype=buttonvalue="]

"></td>n<td><inputname="button"type=buttononClick="capsLockText();setCapsLock();"

onDblClick="capsLockText();setCapsLock();"value="切换大/小写"

></td>n</tr>n<tralign="left"valign="middle">n<td><input

type=buttonvalue="a"></td>n<td><inputtype=buttonvalue="s"></td>n<td><input

type=buttonvalue="d"></td>n<td><inputtype=buttonvalue="f"></td>n<td><input

type=buttonvalue="g"></td>n<td><inputtype=buttonvalue="h"></td>n<td><input

type=buttonvalue="j"></td>n<td><inputname="button"type=buttonvalue="k

"></td>n<td><inputname="button"type=buttonvalue="l"></td>n<td><input

name="button"type=buttonvalue=":"></td>n<td><inputname="button"type=button

value="""></td>n<td><inputtype=buttonvalue=";"></td>n<td><input

type=buttonvalue="'"></td>n<tdrowspan=""colspan=""><inputname="button"

type=buttononclick="OverInput();"value="确定"

></td>n</tr>n<tralign="left"valign="middle">

n<td><inputname="button"type=buttonvalue="z"></td>n<td><inputtype=button

value="x"></td>n<td><inputtype=buttonvalue="c"></td>n<td><inputtype=button

value="v"></td>n<td><inputtype=buttonvalue="b"></td>n<td><inputtype=button

value="n"></td>n<td><inputtype=buttonvalue="m"></td>n<td><inputtype=button

value="<"></td>n<td><inputtype=buttonvalue=">"></td>n<td><input

type=buttonvalue="?"></td>n<td><inputtype=buttonvalue=","></td>n<td><input

type=buttonvalue="."></td>n<td><inputtype=buttonvalue="/

"></td>n</tr>n</table></td></FORM></tr></table></DIV>");

functionaddValue(newValue)

{

if(CapsLockValue==)

{

varstr=Calc.password.value;

if(str.length<password.maxLength)

{

Calc.password.value+=newValue;

}

if(str.length<=password.maxLength)

{

password.value=Calc.password.value;

}

}

else

{

varstr=Calc.password.value;

if(str.length<password.maxLength)

{

//Calc.password.value+=newValue.toUpperCase();

Calc.password.value+=newValue;

}

if(str.length<=password.maxLength)

{

password.value=Calc.password.value;

}

}

}

functionsetpassvalue()

{

varlongnum=Calc.password.value.length;

varnum

num=Calc.password.value.substr(,longnum-);

Calc.password.value=num;

varstr=Calc.password.value;

password.value=Calc.password.value;

}

functionOverInput()

{

varstr=Calc.password.value;

password.value=Calc.password.value;

closekeyboard();

Calc.password.value="";

password.readOnly=;

}

functionclosekeyboard(theForm)

{

softkeyboard.style.display="none";

if(null!=unhideSelect){

unhideSelect();

}

}

functionshowkeyboard()

{

randomNumberButton();

varth=password;

varttop=th.offsetTop;

varthei=th.clientHeight;

vartleft=th.offsetLeft;

varttyp=th.type;

while(th=th.offsetParent){ttop+=th.offsetTop;tleft+=th.offsetLeft;}

softkeyboard.style.top=ttop+thei+;

softkeyboard.style.left=tleft-;

softkeyboard.style.display="block";

password.readOnly=;

password.blur();

document.all.useKey.focus();

if(null!=hideSelect){

hideSelect();

}

}

functionsetCapsLock()

{

if(CapsLockValue==)

{

CapsLockValue=

}

else

{

CapsLockValue=

}

}

functionsetCalcborder()

{

CalcTable.style.border="pxsolid#BADF"

}

functionsetHead()

{

CalcTable.cells[].style.backgroundColor="#BADF"

}

functionsetCalcButtonBg()

{

for(vari=;i<Calc.elements.length;i++)

{

if(Calc.elements[i].type=="button"&&Calc.elements[i].bgtype!="")

{

if(Calc.elements[i].bgtype==""){

Calc.elements[i].className="btn_num";

}else{

Calc.elements[i].className="btn_letter";

}

varstr=Calc.elements[i].value;

str=str.trim();

if(str.length==)

{

}

varthisButtonValue=Calc.elements[i].value;

thisButtonValue=thisButtonValue.trim();

if(thisButtonValue.length==)

{

Calc.elements[i].onclick=

function()

{

varthisButtonValue=this.value;

thisButtonValue=thisButtonValue.trim();

thisButtonValue=jiamiMimaKey(thisButtonValue);

addValue(thisButtonValue);

}

Calc.elements[i].ondblclick=

function()

{

varthisButtonValue=this.value;

thisButtonValue=thisButtonValue.trim();

thisButtonValue=jiamiMimaKey(thisButtonValue);

addValue(thisButtonValue);

}

}

}

}

}

functioninitCalc()

{

setCalcborder();

setHead();

setCalcButtonBg();

}

String.prototype.trim=function()

{

returnthis.replace(/(^s*)|(s*$)/g,"");

}

varcapsLockFlag;

capsLockFlag=true;

functioncapsLockText()

{

if(capsLockFlag)

{

for(vari=;i<Calc.elements.length;i++)

{

varchar=Calc.elements[i].value;

varchar=char.trim()

if(Calc.elements[i].type=="button"&&char>="a"&&char<="z"&&char.length==)

{

Calc.elements[i].value=""+String.fromCharCode(char.charCodeAt()-)+""

}

}

}

else

{

for(vari=;i<Calc.elements.length;i++)

{

varchar=Calc.elements[i].value;

varchar=char.trim()

if(Calc.elements[i].type=="button"&&char>="A"&&char<="Z"&&char.length==)

{

Calc.elements[i].value=""+String.fromCharCode(char.charCodeAt()+)+""

}

}

}

capsLockFlag=!capsLockFlag;

}

functionrandomNumberButton(){

vara=newArray();

a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;

varrandomNum;

vartimes=;

for(vari=;i<;i++){

randomNum=parseInt(Math.random()*);

vartmp=a[];

a[]=a[randomNum];

a[randomNum]=tmp;

}

Calc.button_number.value=""+a[]+"";

Calc.button_number.value=""+a[]+"";

Calc.button_number.value=""+a[]+"";

Calc.button_number.value=""+a[]+"";

Calc.button_number.value=""+a[]+"";

Calc.button_number.value=""+a[]+"";

Calc.button_number.value=""+a[]+"";

Calc.button_number.value=""+a[]+"";

Calc.button_number.value=""+a[]+"";

Calc.button_number.value=""+a[]+"";

}

functionhideSelect(){

vari=;

while(i<document.getElementsByTagName("select").length){

document.getElementsByTagName("select")[i].style.visibility="hidden";

i=i+;

}

}

functionunhideSelect(){

vari=;

while(i<document.getElementsByTagName("select").length){

document.getElementsByTagName("select")[i].style.visibility="visible";

i=i+;

}

}

functionjiamiMimaKey(newValue){

if(typeof(b)=="undefined"||typeof(ifUseYinshe)=="undefined"||ifUseYinshe==

){returnnewValue;}

vareveryone='';

varafterPass='';

for(vari=;i<newValue.length;i++){

everyone=newValue.charAt(i);

for(varj=;j<((b.length)/);j++){

if(everyone==b[*j]){

afterPass=afterPass+b[*j+];

break;

}

}

}

newValue=afterPass;

jiami=;

returnafterPass;

}

Default.aspx:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"

Inherits="_Default"

ResponseEncoding="GB"%>

<!DOCTYPEhtmlPUBLIC"-//WC//DTDXHTML.Transitional//EN"

"http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">

<html>

<head>

<title>软键盘</title>

<linkhref="softkey.css"type="text/css"rel="stylesheet">

<scriptsrc="softkeyboard.js"type="text/javascript"></script>

</head>

<body>

<formrunat="server">

<divalign="center">

<inputid="tipLogPwd"type="text"onkeydown="Calc.password.value=this.value"

onblur="tipLogPwd.className='tip_off'"

onclick="password=this;showkeyboard();this.readOnly=;Calc.password.value=''"

>

</div>

</form>

</body>

</html>

softkey.css:

复制代码 代码如下:

#Page_content{}{

PADDING-RIGHT:px;PADDING-LEFT:px;BACKGROUND:#fff;PADDING-BOTTOM:px;

MARGIN:pxauto;WIDTH:px;PADDING-TOP:px

}

#Header{}{

BACKGROUND:url(../images/blue/header_bg.gif)repeat-xlefttop

}

#Page_left{}{

FLOAT:left;MARGIN:pxpxpx;WIDTH:px

}

#Page_right{}{

FLOAT:right;MARGIN:pxpx;WIDTH:px

}

#Footer{}{

PADDING-RIGHT:px;BORDER-TOP:#eeepxsolid;PADDING-LEFT:px;PADDING-BOTTOM:

px;COLOR:#aaa;PADDING-TOP:px;TEXT-ALIGN:left

}

.Area_title{}{

PADDING-RIGHT:px;BORDER-TOP:#cpxsolid;MARGIN-TOP:px;PADDING-LEFT:px;

FONT-WEIGHT:bold;FONT-SIZE:px;PADDING-BOTTOM:px;COLOR:#d;PADDING-TOP:px

}

.Area_content{}{

PADDING-RIGHT:px;PADDING-LEFT:px;PADDING-BOTTOM:px;PADDING-TOP:px

}

.Area_button{}{

MARGIN-TOP:px;PADDING-LEFT:px

}

.Area_buttonIMG{}{

VERTICAL-ALIGN:px

}

.float_left{}{

FLOAT:left

}

.float_right{}{

FLOAT:right

}

.content_title{}{

PADDING-RIGHT:px;PADDING-LEFT:px;FONT-WEIGHT:bold;PADDING-BOTTOM:px;COLOR:

#;PADDING-TOP:px

}

.relative{}{

PADDING-RIGHT:px;BORDER-TOP:#cpxsolid;PADDING-LEFT:px;LIST-STYLE-

POSITION:inside;BACKGROUND:nonetransparentscrollrepeat%%;LIST-STYLE-IMAGE:url

(../images/blue/icon_list.gif);PADDING-BOTTOM:px;MARGIN:pxpxpx;PADDING-TOP:px

}

.relativeLI{}{

PADDING-RIGHT:px;PADDING-LEFT:px;FONT-WEIGHT:normal;PADDING-BOTTOM:px;

MARGIN:pxpxpx;COLOR:#;PADDING-TOP:px;BORDER-BOTTOM:#dddpxsolid

}

{}{

PADDING-RIGHT:px;PADDING-LEFT:px;PADDING-BOTTOM:px;MARGIN:px;PADDING-TOP:

px

}

BODY{}{

BACKGROUND:#eee

}

BODY{}{

FONT:px"宋体",Tahoma;COLOR:#

}

DIV{}{

FONT:px"宋体",Tahoma;COLOR:#

}

TD{}{

FONT:px"宋体",Tahoma;COLOR:#

}

SPAN{}{

FONT:px"宋体",Tahoma;COLOR:#

}

SELECT{}{

FONT:px"宋体",Tahoma;COLOR:#

}

P{}{

FONT:px"宋体",Tahoma;COLOR:#

}

IMG{}{

BORDER-TOP-WIDTH:px;BORDER-LEFT-WIDTH:px;BORDER-BOTTOM-WIDTH:px;BORDER-

RIGHT-WIDTH:px

}

A{}{

COLOR:#;TEXT-DECORATION:none

}

A:hover{}{

COLOR:#b;TEXT-DECORATION:none

}

INPUT{}{

FONT:px"宋体",Tahoma

}

INPUT.button{}{

BORDER-TOP-WIDTH:px;PADDING-RIGHT:px;PADDING-LEFT:px;BORDER-LEFT-WIDTH:

px;BACKGROUND:url(../images/blue/button_bg.gif)#adarepeat-xlefttop;BORDER-

BOTTOM-WIDTH:px;PADDING-BOTTOM:px;CURSOR:hand;COLOR:#fff;MARGIN-RIGHT:px;

PADDING-TOP:px;BORDER-RIGHT-WIDTH:px

}

INPUT.button_dis{}{

BORDER-TOP-WIDTH:px;PADDING-RIGHT:px;PADDING-LEFT:px;BORDER-LEFT-WIDTH:

px;BORDER-BOTTOM-WIDTH:px;PADDING-BOTTOM:px;CURSOR:hand;COLOR:#fff;MARGIN-RIGHT:

px;PADDING-TOP:px;BORDER-RIGHT-WIDTH:px

}

UL{}{

PADDING-LEFT:px;FONT-WEIGHT:bold;LIST-STYLE-POSITION:outside;BACKGROUND:url

(../images/icon_ul.gif)no-repeatlefttop;LIST-STYLE-IMAGE:url

(../images/blue/icon_list.gif);MARGIN:px;COLOR:#

}

LI{}{

PADDING-RIGHT:px;PADDING-LEFT:px;FONT-WEIGHT:normal;PADDING-BOTTOM:px;

MARGIN:pxpxpx;COLOR:#;PADDING-TOP:px

}

.clear{}{

CLEAR:both

}

.top_margin{}{

MARGIN:pxpxpxpx

}

.text_bold{}{

FONT-WEIGHT:bold

}

.step_on.text_content{}{

COLOR:#

}

.text_content{}{

PADDING-RIGHT:px;PADDING-LEFT:px;PADDING-BOTTOM:px;PADDING-TOP:px;BORDER

-BOTTOM:#eeepxsolid

}

.text_red{}{

COLOR:#b

}

A.text_red:hover{}{

COLOR:#

}

.req{}{

FONT-WEIGHT:bold;COLOR:#b

}

.info{}{

COLOR:#

}

.dark{}{

COLOR:#

}

.text_big{}{

FONT-SIZE:px;COLOR:#;LINE-HEIGHT:px

}

.big{}{

FONT-SIZE:px

}

.reg_flow{}{

PADDING-RIGHT:px;PADDING-LEFT:px;FONT-WEIGHT:normal;FONT-SIZE:px;

BACKGROUND:#fff;PADDING-BOTTOM:px;MARGIN:pxpxpx;COLOR:#;PADDING-TOP:

px

}

.reg_title{}{

PADDING-RIGHT:px;PADDING-LEFT:px;FONT-WEIGHT:bold;FONT-SIZE:px;

BACKGROUND:url(../images/icon_reg.gif)no-repeatlefttop;PADDING-BOTTOM:px;COLOR:

#d;PADDING-TOP:px

}

.flow_focus{}{

FONT-WEIGHT:bold;COLOR:#b

}

.flow_undo{}{

COLOR:#

}

.flow_done{}{

COLOR:#

}

.image_safe{}{

PADDING-LEFT:px;BACKGROUND:url(../images/icon_safe_big.gif)no-repeatlefttop

}

.text_success{}{

BORDER-RIGHT:#cpxsolid;PADDING-RIGHT:px;BORDER-TOP:#cpxsolid;

PADDING-LEFT:px;BACKGROUND:url(../images/blue/icon_success.gif)#ffffno-repeatpx

%;PADDING-BOTTOM:px;BORDER-LEFT:#cpxsolid;PADDING-TOP:px;BORDER-BOTTOM:

#cpxsolid

}

.text_notice{}{

BORDER-RIGHT:#cpxsolid;PADDING-RIGHT:px;BORDER-TOP:#cpxsolid;

PADDING-LEFT:px;BACKGROUND:url(../images/blue/icon_gantan.gif)#ffffno-repeatpx

%;PADDING-BOTTOM:px;BORDER-LEFT:#cpxsolid;PADDING-TOP:px;BORDER-BOTTOM:

#cpxsolid

}

.reg_info{}{

BORDER-RIGHT:#cpxsolid;PADDING-RIGHT:px;BORDER-TOP:#cpxsolid;

PADDING-LEFT:px;BACKGROUND:url(../images/blue/icon_info.gif)#ffffno-repeatpx

%;PADDING-BOTTOM:px;BORDER-LEFT:#cpxsolid;PADDING-TOP:px;BORDER-BOTTOM:#c

pxsolid

}

.step_on.tip_off{}{

BORDER-RIGHT:#deefpxsolid;PADDING-RIGHT:px;BORDER-TOP:#deefpxsolid;

PADDING-LEFT:px;BACKGROUND:url(../images/blue/arr_tip_off.gif)#fffno-repeatpxpx;

PADDING-BOTTOM:px;BORDER-LEFT:#deefpxsolid;COLOR:#;PADDING-TOP:px;BORDER-

BOTTOM:#deefpxsolid

}

.tip_off{}{

PADDING-RIGHT:px;PADDING-LEFT:px;BACKGROUND:url

(../images/blue/arr_tip_off.gif)#fffno-repeatpxpx;PADDING-BOTTOM:px;COLOR:#;

PADDING-TOP:px

}

.tip_on{}{

BORDER-RIGHT:#pxsolid;PADDING-RIGHT:px;BORDER-TOP:#pxsolid;

PADDING-LEFT:px;BACKGROUND:url(../images/blue/arr_tip_on.gif)#efdeno-repeatpx

px;PADDING-BOTTOM:px;BORDER-LEFT:#pxsolid;COLOR:#;PADDING-TOP:px;

BORDER-BOTTOM:#pxsolid

}

.tip_onIMG{}{

VERTICAL-ALIGN:top

}

.tip_offIMG{}{

VERTICAL-ALIGN:top

}

.step_on{}{

PADDING-RIGHT:px;PADDING-LEFT:px;BACKGROUND:#fff;PADDING-BOTTOM:px;

PADDING-TOP:px

}

.step_off{}{

PADDING-RIGHT:px;PADDING-LEFT:px;BACKGROUND:#fff;PADDING-BOTTOM:px;

PADDING-TOP:px

}

.step_on.content_title{}{

COLOR:#

}

P{}{

MARGIN:pxpx;TEXT-INDENT:em

}

.btn_letter{}{

BORDER-LEFT-COLOR:#bebd;FILTER:progid:DXImageTransform.Microsoft.Gradient

(GradientType=,StartColorStr=#ffffff,EndColorStr=#DDDCDC);BORDER-BOTTOM-COLOR:#cb;

COLOR:#bc;BORDER-TOP-COLOR:#bebd;BORDER-RIGHT-COLOR:#cb

}

.btn_num{}{

BORDER-LEFT-COLOR:#ebff;FILTER:progid:DXImageTransform.Microsoft.Gradient

(GradientType=,StartColorStr=#ffffff,EndColorStr=#BD);BORDER-BOTTOM-COLOR:#ebff;

COLOR:black;BORDER-TOP-COLOR:#ebff;BORDER-RIGHT-COLOR:#ebff

}

想还原事例，又怕麻烦的朋友，也可以留下Email,将发到您邮箱！水平有限，写不出多高深

和理论性较强的文章，只能发些实用的东西给大家.

Ps:一周一博，工作太忙，时间太少！

小键盘本地下载

下载此文件 大键盘本地下载

下载此文件