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

鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。
下载大键盘: 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 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\"><tr><td   
class=\"table_title\"  align=\"right\" valign=\"middle\" bgcolor=\"\" style=\"cursor:   
default;height:\"><INPUT type=hidden value=\"\" name=password><INPUT 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></tr><tr   
align=\"center\"><td align=\"center\" bgcolor=\"#FFFFFF\"><table align=\"center\" width=\"%  
\" border=\"\" cellspacing=\"\" cellpadding=\"\">\n<tr align=\"left\" valign=\"middle\">   
\n<td> <input type=button value=\" ~ \"></td>\n<td> <input type=button value=\" !   
\"></td>\n<td> <input type=button value=\" @ \"></td>\n<td> <input type=button value=\" #   
\"></td>\n<td> <input type=button value=\" $ \"></td>\n<td><input type=button value=\" %   
\"></td>\n<td><input type=button value=\" ^ \"></td>\n<td> <input type=button value=\" &   
\"></td>\n<td><input type=button value=\" * \"></td>\n<td><input type=button value=\" (   
\"></td>\n<td><input type=button value=\" ) \"></td>\n<td><input type=button value=\" _   
\"></td>\n<td> <input type=button value=\" + \"></td>\n<td><input type=button value=\" |   
\"></td>\n<td colspan=\"\" rowspan=\"\"> <input name=\"button\" type=button value=\" 退  
格\" onclick=\"setpassvalue();\"  onDblClick=\"setpassvalue();\"   
style=\"width:px;height:px\"> \n</td>\n</tr>\n<tr align=\"left\" valign=\"middle\">   
\n<td><input type=button value=\" ` \"></td>\n<td><input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input bgtype=\"\"    
name=\"button_number\" type=button value=\" \"></td>\n<td> <input type=button value=\" -   
\"></td>\n<td> <input type=button value=\" = \"></td>\n<td> <input type=button value=\" \\   
\"></td>\n<td> </td>\n</tr>\n<tr align=\"left\" valign=\"middle\"> \n<td> <input type=button   
value=\" q \"></td>\n<td> <input type=button value=\" w \"></td>\n<td> <input type=button   
value=\" e \"></td>\n<td> <input type=button value=\" r \"></td>\n<td> <input type=button   
value=\" t \"></td>\n<td> <input type=button value=\" y \"></td>\n<td> <input type=button   
value=\" u \"></td>\n<td> <input type=button value=\" i \"></td>\n<td> <input type=button   
value=\" o \"></td>\n<td> <input name=\"button\" type=button value=\" p \"></td>\n<td>   
<Input name=\"button\" type=button value=\" { \"></td>\n<td> <input type=button value=\" }   
\"></td>\n<td> <input type=button value=\" [ \"></td>\n<td> <input type=button value=\" ]   
\"></td>\n<td><input name=\"button\" type=button onClick=\"capsLockText();setCapsLock();\"    
onDblClick=\"capsLockText();setCapsLock();\" value=\"切换大/小写\"   
style=\"width:px;\"></td>\n</tr>\n<tr align=\"left\" valign=\"middle\"> \n<td> <input   
type=button value=\" a \"></td>\n<td> <input type=button value=\" s \"></td>\n<td> <input   
type=button value=\" d \"></td>\n<td> <input type=button value=\" f \"></td>\n<td> <input   
type=button value=\" g \"></td>\n<td> <input type=button value=\" h \"></td>\n<td> <input   
type=button value=\" j \"></td>\n<td> <input name=\"button\" type=button value=\" k   
\"></td>\n<td> <input name=\"button\" type=button value=\" l \"></td>\n<td> <input   
name=\"button\" type=button value=\" : \"></td>\n<td> <input name=\"button\" type=button   
value=\" " \"></td>\n<td> <input type=button value=\" ; \"></td>\n<td> <input   
type=button value=\" ' \"></td>\n<td rowspan=\"\" colspan=\"\"> <input name=\"button\"   
type=button onclick=\"OverInput();\" value=\"   确定  \"   
style=\"width:px;height:px;\"></td>\n</tr>\n<tr align=\"left\" valign=\"middle\">   
\n<td><input name=\"button\" type=button value=\" z \"></td>\n<td> <input type=button   
value=\" x \"></td>\n<td> <input type=button value=\" c \"></td>\n<td> <input type=button   
value=\" v \"></td>\n<td> <input type=button value=\" b \"></td>\n<td> <input type=button   
value=\" n \"></td>\n<td> <input type=button value=\" m \"></td>\n<td> <input type=button   
value=\" < \"></td>\n<td> <input type=button value=\" > \"></td>\n<td> <input   
type=button value=\" ? \"></td>\n<td> <input type=button value=\" , \"></td>\n <td> <input   
type=button value=\" . \"></td>\n <td> <input type=button value=\" /   
\"></td>\n</tr>\n</table></td></FORM></tr></table></DIV>");  

function addValue(newValue)  
{  
if (CapsLockValue==)  
{  
var str=Calc.password.value;  
if(str.length<password.maxLength)  
{  
Calc.password.value += newValue;  
}              
if(str.length<=password.maxLength)  
{  
password.value=Calc.password.value;  
}  
}  
else  
{  
var str=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;  
}  
}  
}  

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=;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";  
}  
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=;i<Calc.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=;i<Calc.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(i<document.getElementsByTagName("select").length){  
document.getElementsByTagName("select")[i].style.visibility = "hidden";  
i=i+;  
}  
}  

function unhideSelect(){  
var i=;  
while(i<document.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=;i<newValue.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 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:一周一博，工作太忙，时间太少！
小键盘本地下载

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

下载此文件