Js之软键盘实现(js源码)

【 tulaoshi.com - 软键盘 】

鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。
下载大键盘: 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(); 
} 
var password; 
var CapsLockValue=; 
var checkSoftKey; 
function setVariables() { 
tablewidth=; 
tableheight=; 
if (navigator.appName == "Netscape") { 
horz=".left"; 
vert=".top"; 
docStyle="document."; 
styleDoc=""; 
innerW="window.innerWidth"; 
innerH="window.innerHeight"; 
offsetX="window.pageXOffset"; 
offsetY="window.pageYOffset"; 
} 
else { 
horz=".pixelLeft"; 
vert=".pixelTop"; 
docStyle=""; 
styleDoc=".style"; 
innerW="document.body.clientWidth"; 
innerH="document.body.clientHeight"; 
offsetX="document.body.scrollLeft"; 
offsetY="document.body.scrollTop"; 
} 
} 
function checkLocation() { 
if (checkSoftKey) { 
objectXY="softkeyboard"; 
var availableX=eval(innerW); 
var availableY=eval(innerH); 
var currentX=eval(offsetX); 
var currentY=eval(offsetY); 
x=availableX-tablewidth+currentX; 
y=currentY; 
evalMove(); 
} 
setTimeout("checkLocation()",); 
} 
function evalMove() { 
eval(docStyle + objectXY + styleDoc + vert + "=" + y); 
} 
self.onError=null; 
currentX = currentY =;   
whichIt = null;            
lastScrollX =; lastScrollY =; 
NS = (document.layers) ? :; 
IE = (document.all) ?:; 
function heartBeat() { 
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); 
else percent = 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); 
else percent = Math.floor(percent); 
if(IE) document.all.softkeyboard.style.pixelLeft += percent; 
if(NS) document.softkeyboard.left += percent; 
lastScrollX = lastScrollX + percent;    }        } 
function checkFocus(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))) return true; 
else return false;} 
function grabIt(e) { 
checkSoftKey = false; 
if(IE) { 
whichIt = event.srcElement; 
while (whichIt.id!=null&&whichIt.id.indexOf("softkeyboard") == -) { 
whichIt = whichIt.parentElement; 
if (whichIt == null) { return true; } } 
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;} } 
return true;    } 
function moveIt(e) { 
if (whichIt == null) { return false; } 
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)-; 
return false;} 
return false;    } 
function dropIt() {whichIt = null; 
if(NS) window.releaseEvents (Event.MOUSEMOVE); 
return true;    } 
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="style"; 
style+=".btn_letter {BORDER-RIGHT:px solid; PADDING-RIGHT:px; BORDER-TOP:px solid;  
PADDING-LEFT:px;FONT-SIZE:px; BORDER-LEFT:px solid; CURSOR: hand;PADDING-TOP:px;  
BORDER-BOTTOM:px solid; width:px; height:px;}"; 
style+=".btn_num {width:px;BORDER-RIGHT:px solid; PADDING-RIGHT:px; BORDER-TOP:px  
solid; PADDING-LEFT:px; FONT-SIZE:px; BORDER-LEFT:px solid; CURSOR: hand; PADDING- 
TOP:px; BORDER-BOTTOM:px solid;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: #CAApx solid; PADDING-RIGHT:px; BORDER-TOP:  
#CAApx solid; PADDING-LEFT:px; FONT-SIZE:px; FILTER:  
progid:DXImageTransform.Microsoft.Gradient(GradientType=, StartColorStr=#ffffff,  
EndColorStr=#CDAF); BORDER-LEFT: #CAApx solid; CURSOR: hand; COLOR: black; PADDING- 
TOP:px; BORDER-BOTTOM: #CAApx solid}"; 
style+="/style";     
document.write(style);                                                                    

                                             
document.write("DIV style="text-align:center" id="softkeyboard" name="softkeyboard"  
style="position:absolute; left:px; top:px; width:px; z-index:;display:none"table  
id="CalcTable" width="" border="" align="center" cellpadding="" cellspacing=" 
" bgcolor=""FORM id=Calc name=Calc action="" method=post autocomplete="off"trtd  
class="table_title"  align="right" valign="middle" bgcolor="" style="cursor:  
default;height:"INPUT type=hidden value="" name=passwordINPUT type=hidden value=ok  
name=action font style="font-weight:bold; font-size:px; color:#BC"博客园 
  密码输入器 
/font               &n 
bsp      INPUT id=useKey class="btn_input" type=button  
value="使用键盘输入" bgtype="" onclick="password.readOnly=;password.focus 
();closekeyboard();password.value='';"span style="width:px;"/span/td/trtr  
align="center"td align="center" bgcolor="#FFFFFF"table align="center" width="% 
" border="" cellspacing="" cellpadding=""ntr align="left" valign="middle"  
ntd input type=button value=" ~ "/tdntd input type=button value=" !  
"/tdntd input type=button value=" @ "/tdntd input type=button value=" #  
"/tdntd input type=button value=" $ "/tdntdinput type=button value=" %  
"/tdntdinput type=button value=" ^ "/tdntd input type=button value=" &  
"/tdntdinput type=button value=" * "/tdntdinput type=button value=" (  
"/tdntdinput type=button value=" ) "/tdntdinput type=button value=" _  
"/tdntd input type=button value=" + "/tdntdinput type=button value=" |  
"/tdntd colspan="" rowspan="" input name="button" type=button value=" 退 
格" onclick="setpassvalue();"  onDblClick="setpassvalue();"  
style="width:px;height:px" n/tdn/trntr align="left" valign="middle"  
ntdinput type=button value=" ` "/tdntdinput type=button bgtype=""  
name="button_number" value=" "/tdntd input type=button bgtype=""  
name="button_number" value=" "/tdntd input type=button bgtype=""  
name="button_number" value=" "/tdntd input type=button bgtype=""  
name="button_number" value=" "/tdntd input type=button bgtype=""  
name="button_number" value=" "/tdntd input type=button bgtype=""  
name="button_number" value=" "/tdntd input type=button bgtype=""  
name="button_number" value=" "/tdntd input type=button bgtype=""  
name="button_number" value=" "/tdntd input type=button bgtype=""  
name="button_number" value=" "/tdntd input bgtype=""   
name="button_number" type=button value=" "/tdntd input type=button value=" -  
"/tdntd input type=button value=" = "/tdntd input type=button value="   
"/tdntd /tdn/trntr align="left" valign="middle" ntd input type=button  
value=" q "/tdntd input type=button value=" w "/tdntd input type=button  
value=" e "/tdntd input type=button value=" r "/tdntd input type=button  
value=" t "/tdntd input type=button value=" y "/tdntd input type=button  
value=" u "/tdntd input type=button value=" i "/tdntd input type=button  
value=" o "/tdntd input name="button" type=button value=" p "/tdntd  
Input name="button" type=button value=" { "/tdntd input type=button value=" }  
"/tdntd input type=button value=" [ "/tdntd input type=button value=" ]  
"/tdntdinput name="button" type=button onClick="capsLockText();setCapsLock();"   
onDblClick="capsLockText();setCapsLock();" value="切换大/小写"  
style="width:px;"/tdn/trntr align="left" valign="middle" ntd input  
type=button value=" a "/tdntd input type=button value=" s "/tdntd input  
type=button value=" d "/tdntd input type=button value=" f "/tdntd input  
type=button value=" g "/tdntd input type=button value=" h "/tdntd input  
type=button value=" j "/tdntd input name="button" type=button value=" k  
"/tdntd input name="button" type=button value=" l "/tdntd input  
name="button" type=button value=" : "/tdntd input name="button" type=button  
value=" " "/tdntd input type=button value=" ; "/tdntd input  
type=button value=" ' "/tdntd rowspan="" colspan="" input name="button"  
type=button onclick="OverInput();" value="   确定  "  
style="width:px;height:px;"/tdn/trntr align="left" valign="middle"  
ntdinput name="button" type=button value=" z "/tdntd input type=button  
value=" x "/tdntd input type=button value=" c "/tdntd input type=button  
value=" v "/tdntd input type=button value=" b "/tdntd input type=button  
value=" n "/tdntd input type=button value=" m "/tdntd input type=button  
value="  "/tdntd input type=button value="  "/tdntd input  
type=button value=" ? "/tdntd input type=button value=" , "/tdn td input  
type=button value=" . "/tdn td input type=button value=" /  
"/tdn/trn/table/td/FORM/tr/table/DIV"); 

function addValue(newValue) 
{ 
if (CapsLockValue==) 
{ 
var str=Calc.password.value; 
if(str.lengthpassword.maxLength) 
{ 
Calc.password.value += newValue; 
}             
if(str.length=password.maxLength) 
{ 
password.value=Calc.password.value; 
} 
} 
else 
{ 
var str=Calc.password.value; 
if(str.lengthpassword.maxLength) 
{ 
//Calc.password.value += newValue.toUpperCase(); 
Calc.password.value += newValue; 
} 
if(str.length=password.maxLength) 
{ 
password.value=Calc.password.value; 
} 
} 
} 

function setpassvalue() 
{ 
var longnum=Calc.password.value.length; 
var num 
num=Calc.password.value.substr(,longnum-); 
Calc.password.value=num; 
var str=Calc.password.value; 
password.value=Calc.password.value; 
} 

function OverInput() 
{ 
var str=Calc.password.value; 
password.value=Calc.password.value; 
closekeyboard(); 
Calc.password.value=""; 
password.readOnly=; 
} 

function closekeyboard(theForm) 
{ 
softkeyboard.style.display="none"; 
if(null!=unhideSelect){ 
unhideSelect(); 
} 
} 

function showkeyboard() 
{ 
randomNumberButton(); 
var th = password; 
var ttop  = th.offsetTop; 
var thei  = th.clientHeight; 
var tleft = th.offsetLeft; 
var ttyp  = 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(); 
} 
} 

function setCapsLock() 
{ 
if (CapsLockValue==) 
{ 
CapsLockValue= 
} 
else  
{ 
CapsLockValue= 
} 
} 
function setCalcborder() 
{ 
CalcTable.style.border="px solid #BADF" 
} 
function setHead() 
{ 
CalcTable.cells[].style.backgroundColor="#BADF"     
} 
function setCalcButtonBg() 
{ 
for(var i=;iCalc.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"; 
} 
var str=Calc.elements[i].value; 
str=str.trim(); 
if(str.length==) 
{ 
} 
var thisButtonValue=Calc.elements[i].value; 
thisButtonValue=thisButtonValue.trim(); 
if(thisButtonValue.length==) 
{ 
Calc.elements[i].onclick= 
function () 
{ 
var thisButtonValue=this.value; 
thisButtonValue=thisButtonValue.trim(); 
thisButtonValue=jiamiMimaKey(thisButtonValue); 
addValue(thisButtonValue); 
} 
Calc.elements[i].ondblclick= 
function () 
{ 
var thisButtonValue=this.value; 
thisButtonValue=thisButtonValue.trim(); 
thisButtonValue=jiamiMimaKey(thisButtonValue); 
addValue(thisButtonValue); 
} 
} 
} 
} 
} 
function initCalc() 
{ 
setCalcborder(); 
setHead(); 
setCalcButtonBg(); 
} 
String.prototype.trim = function() 
{ 
return this.replace(/(^s*)|(s*$)/g, ""); 
} 
var capsLockFlag; 
capsLockFlag=true; 
function capsLockText() 
{ 
if(capsLockFlag) 
{ 
for(var i=;iCalc.elements.length;i++) 
{ 
var char=Calc.elements[i].value; 
var char=char.trim() 
if(Calc.elements[i].type=="button"&&char="a"&&char="z"&&char.length==) 
{ 
Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt()-)+" " 
} 
} 
} 
else 
{ 
for(var i=;iCalc.elements.length;i++) 
{ 
var char=Calc.elements[i].value; 
var char=char.trim() 
if(Calc.elements[i].type=="button"&&char="A"&&char="Z"&&char.length==) 
{ 
Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt()+)+" " 
} 
} 
} 
capsLockFlag=!capsLockFlag; 
} 

function randomNumberButton(){ 
var a = new Array();   
a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=; 
var randomNum; 
var times=; 
for(var i=;i;i++){ 
randomNum = parseInt(Math.random()*); 
var tmp=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[]+" "; 
} 

function hideSelect(){ 
var i=; 
while(idocument.getElementsByTagName("select").length){ 
document.getElementsByTagName("select")[i].style.visibility = "hidden"; 
i=i+; 
} 
} 

function unhideSelect(){ 
var i=; 
while(idocument.getElementsByTagName("select").length){ 
document.getElementsByTagName("select")[i].style.visibility = "visible"; 
i=i+; 
} 
} 


function  jiamiMimaKey(newValue) { 
    if (typeof(b) == "undefined" || typeof(ifUseYinshe) == "undefined" || ifUseYinshe ==  
) {return newValue;} 
    var everyone = ''; 
    var afterPass = ''; 
    for (var i=;inewValue.length;i++ ) { 
            everyone = newValue.charAt(i); 
            for (var j =;j((b.length)/);j++) { 
                    if (everyone == b[*j]) { 
                            afterPass = afterPass + b[*j+]; 
                            break; 
                    } 
            } 
        } 
        newValue= afterPass; 
        jiami =; 
        return afterPass; 
} 

  Default.aspx: 
%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"  
Inherits="_Default" 
    ResponseEncoding="GB" % 

!DOCTYPE html PUBLIC "-//WC//DTD XHTML. Transitional//EN"  
"http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd" 
html 
head 
    title软键盘/title 
    link href="softkey.css" type="text/css" rel="stylesheet" 
    script src="softkeyboard.js" type="text/javascript"/script 
/head 
body 
    form runat="server" 
        div style="text-align:center" 
          input id="tipLogPwd"  type="text" onkeydown="Calc.password.value=this.value" 
           onblur="tipLogPwd.className='tip_off'" 
           onclick="password=this;showkeyboard();this.readOnly=;Calc.password.value=''" 
                style="width:px" 
        /div 
    /form 
/body 
/html 

         softkey.css: 
代码如下：

#Page_content {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; BACKGROUND: #fff; PADDING-BOTTOM:px;  
MARGIN:px auto; WIDTH:px; PADDING-TOP:px 
} 
#Header {}{ 
    BACKGROUND: url(../images/blue/header_bg.gif) repeat-x left top 
} 
#Page_left {}{ 
    FLOAT: left; MARGIN:pxpxpx; WIDTH:px 
} 
#Page_right {}{ 
    FLOAT: right; MARGIN:pxpx; WIDTH:px 
} 
#Footer {}{ 
    PADDING-RIGHT:px; BORDER-TOP: #eeepx solid; PADDING-LEFT:px; PADDING-BOTTOM:  
px; COLOR: #aaa; PADDING-TOP:px; TEXT-ALIGN: left 
} 
.Area_title {}{ 
    PADDING-RIGHT:px; BORDER-TOP: #cpx solid; 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_button IMG {}{ 
    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: #cpx solid; PADDING-LEFT:px; LIST-STYLE- 
POSITION: inside; BACKGROUND: none transparent scroll repeat%%; LIST-STYLE-IMAGE: url 
(../images/blue/icon_list.gif); PADDING-BOTTOM:px; MARGIN:pxpxpx; PADDING-TOP:px 
} 
.relative LI {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: normal; PADDING-BOTTOM:px;  
MARGIN:pxpxpx; COLOR: #; PADDING-TOP:px; BORDER-BOTTOM: #dddpx solid 
} 
 {}{ 
    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) #ada repeat-x left top; 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-repeat left top; 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: #eeepx solid 
} 
.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-repeat left top; 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-repeat left top 
} 
.text_success {}{ 
    BORDER-RIGHT: #cpx solid; PADDING-RIGHT:px; BORDER-TOP: #cpx solid;  
PADDING-LEFT:px; BACKGROUND: url(../images/blue/icon_success.gif) #ffff no-repeatpx  
%; PADDING-BOTTOM:px; BORDER-LEFT: #cpx solid; PADDING-TOP:px; BORDER-BOTTOM:  
#cpx solid 
} 
.text_notice {}{ 
    BORDER-RIGHT: #cpx solid; PADDING-RIGHT:px; BORDER-TOP: #cpx solid;  
PADDING-LEFT:px; BACKGROUND: url(../images/blue/icon_gantan.gif) #ffff no-repeatpx  
%; PADDING-BOTTOM:px; BORDER-LEFT: #cpx solid; PADDING-TOP:px; BORDER-BOTTOM:  
#cpx solid 
} 
.reg_info {}{ 
    BORDER-RIGHT: #cpx solid; PADDING-RIGHT:px; BORDER-TOP: #cpx solid;  
PADDING-LEFT:px; BACKGROUND: url(../images/blue/icon_info.gif) #ffff no-repeatpx  
%; PADDING-BOTTOM:px; BORDER-LEFT: #cpx solid; PADDING-TOP:px; BORDER-BOTTOM: #c  
px solid 
} 
.step_on .tip_off {}{ 
    BORDER-RIGHT: #deefpx solid; PADDING-RIGHT:px; BORDER-TOP: #deefpx solid;  
PADDING-LEFT:px; BACKGROUND: url(../images/blue/arr_tip_off.gif) #fff no-repeatpxpx;  
PADDING-BOTTOM:px; BORDER-LEFT: #deefpx solid; COLOR: #; PADDING-TOP:px; BORDER- 
BOTTOM: #deefpx solid 
} 
.tip_off {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; BACKGROUND: url 
(../images/blue/arr_tip_off.gif) #fff no-repeatpxpx; PADDING-BOTTOM:px; COLOR: #;  
PADDING-TOP:px 
} 
.tip_on {}{ 
    BORDER-RIGHT: #px solid; PADDING-RIGHT:px; BORDER-TOP: #px solid;  
PADDING-LEFT:px; BACKGROUND: url(../images/blue/arr_tip_on.gif) #efde no-repeatpx  
px; PADDING-BOTTOM:px; BORDER-LEFT: #px solid; COLOR: #; PADDING-TOP:px;  
BORDER-BOTTOM: #px solid 
} 
.tip_on IMG {}{ 
    VERTICAL-ALIGN: top 
} 
.tip_off IMG {}{ 
    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:一周一博，工作太忙，时间太少！
小键盘本地下载 下载此文件 大键盘本地下载 下载此文件