Js soft keyboard implementation (js source code)_javascript skills

In view of security considerations, many websites use soft keyboards when logging in and entering passwords to avoid keystroke capture by some keylogging tools and Trojans. There is also this requirement in the project, so I will share it with everyone and post a rendering. . Interested friends can collect it. . .. If you think the function is a bit too large and only need a numeric keypad, you can refer to the code simplification.
Download large keyboard: http://www.cnblogs.com/Files/sccxszy/softKey.rar
Small keyboard: http://www.cnblogs.com/Files /sccxszy/smallSoftkey.rar

Small keyboard:


Effect restoration: Three files: Default.aspx, softkeyboard.js, softkey.css
js code:
softkeyboard.js

Copy code The code is as follows:

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"; 
doc; 
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  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; 
if(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 if(whichIt.top 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="";     
document.write(style);                                                                    

                                             
document.write("

style=\"position:absolute; left:px; top:px; width:px; z-index:;display:none\">id=\"CalcTable\" width=\"\" border=\"\" align=\"center\" cellpadding=\"\" cellspacing=\" 
\" bgcolor=\"\">align=\"center\">

class=\"table_title\"  align=\"right\" valign=\"middle\" bgcolor=\"\" style=\"cursor:  
default;height:\">name=action> 博客园 
  密码输入器 
               &n 
bsp      value=\"使用键盘输入\" bgtype=\"\" onclick=\"password.readOnly=;password.focus 
();closekeyboard();password.value='';\">

\" border=\"\" cellspacing=\"\" cellpadding=\"\">\n  
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  
\n\n\nnnnnnnnnnnnnnn nnnnnnnnnnnn\n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  
\n\n\n\n\n\n\n\n\n\n\n\n \n \n\n

\">

\">

\">

\">

\">

\">

\">

格\" onclick=\"setpassvalue();\"  onDblClick=\"setpassvalue();\"   style=\"width:px;height:px\"> \n

name=\"button_number\" value=\" \">

name="button_number" value=" ">

name="button_number" value=" ">

name="button_number" value=" ">

name="button_number" value=" ">

name="button_number" value=" ">

name="button_number" value=" ">

name="button_number" value=" ">

name="button_number" value=" ">

name="button_number" type=button value=" ">

">

">

value=" q ">

value=" e ">

value=" t ">

value=" u ">

value=" o ">

\">

\">

onDblClick=\"capsLockText();setCapsLock();\" value=\"切换大/小写\"   style=\"width:px;\">

type=button value=\" a \">

type=button value=\" d \">

type=button value=\" g \">

type=button value=\" j \">

\">

name=\"button\" type=button value=\" : \">

value=\" " \">

type=button value=\" ' \">

type=button onclick=\"OverInput();\" value=\"   确定  \"   style=\"width:px;height:px;\">

value=\" x \">

value=\" v \">

value=\" n \">

value=\"

\">

type=button value=\" ? \">

type=button value=\" . \">

\">

"); 

function addValue(newValue) 
{ 
if (CapsLockValue==) 
{ 
var str=Calc.password.value; 
if(str.length{ 
Calc.password.value  = newValue; 
}             
if(str.length{ 
password.value=Calc.password.value; 
} 
} 
else 
{ 
var str=Calc.password.value; 
if(str.length{ 
//Calc.password.value  = newValue.toUpperCase(); 
Calc.password.value  = newValue; 
} 
if(str.length{ 
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{ 
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{ 
var char=Calc.elements[i].value; 
var char=char.trim() 
if(Calc.elements[i].type=="button"&&char>="a"&&char{ 
Calc.elements[i].value=" " String.fromCharCode(char.charCodeAt()-) " " 
} 
} 
} 
else 
{ 
for(var i=;i{ 
var char=Calc.elements[i].value; 
var char=char.trim() 
if(Calc.elements[i].type=="button"&&char>="A"&&char{ 
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=;irandomNum = 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")[i].style.visibility = "hidden"; 
i=i ; 
} 
} 

function unhideSelect(){ 
var i=; 
while(idocument.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            everyone = newValue.charAt(i); 
            for (var j =;j                    if (everyone == b[*j]) { 
                            afterPass = afterPass   b[*j ]; 
                            break; 
                    } 
            } 
        } 
        newValue= afterPass; 
        jiami =; 
        return afterPass; 
} 

  Default.aspx: 
Inherits="_Default" 
    ResponseEncoding="GB" %> 

html PUBLIC "-//WC//DTD XHTML. Transitional//EN"  
"http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> 
 
 
     
     
    <script></script> 
 
 
    

 
        

 
                     onblur="tipLogPwd.className='tip_off'" 
           onclick="password=this;showkeyboard();this.readOnly=;Calc.password.value=''" 
                style="width:px"> 
        

 
    

 
 
 

         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:一周一博，工作太忙，时间太少！
小键盘本地下载 下载此文件 大键盘本地下载 下载此文件