html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

Js之软键盘实现(js源码)_javascript技巧_

[ ] 已经帮助:人解决问题
鉴于安全性的考虑,不少网站在登录输入密码时都采用了软键盘,避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求,就分享给大家了,贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大,只需要数字小键盘的朋友,可参考代码精简。
下载大键盘: http://www.cnblogs.com/Files/sccxszy/softKey.rar
小键盘:http://www.cnblogs.com/Files/sccxszy/smallSoftkey.rar
3.jpg
小键盘:
4.jpg

效果还原: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:一周一博,工作太忙,时间太少!
小键盘本地下载下载文件 下载此文件 大键盘本地下载下载文件 下载此文件
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助