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>&nbsp<font style=\"font-weight:bold; font-size:px; color:#BC\">博客园 
&nbsp;&nbsp;密码输入器 
</font>&nbsp&nbsp&nbsp&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&n 
bsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp&nbsp;<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=\" &quot; \"></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=\" &lt; \"></td>\n<td> <input type=button value=\" &gt; \"></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="/UploadFiles/2021-04-02/softkeyboard.js"></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:一周一博，工作太忙，时间太少！
小键盘本地下载 下载此文件 大键盘本地下载 下载此文件