In view of security considerations, many sites in the login input password are used a soft keyboard, to avoid some keyboard recording tools and Trojans to the capture of keystrokes. The project also has this demand, will share to everybody, put up an effect chart to come up. Interested friends can collect .... If you think the function is a bit large, only need a friend of the numeric keypad, you can refer to the code streamlining.
Download Large keyboard: Http://www.cnblogs.com/Files/sccxszy/softKey.rar
Keypad: Http://www.cnblogs.com/Files/sccxszy/smallSoftkey.rar
Small keyboard:
Effect Restore: Default.aspx,softkeyboard.js,softkey.css three files
JS Code:
Softkeyboard.js
Copy Code code 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";
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:;d isplay: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
name=action> <font style=\ "font-weight:bold; FONT-SIZE:PX; Color: #BC \ "> Blog Park
Password input device
</font> &n
BSP <input id=usekey class=\ "btn_input\" Type=button
Value=\ "Use keyboard input \" bgtype=\ "\ onclick=\" password.readonly=;p assword.focus
() Closekeyboard ();p assword.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=\" retreat
Lattice \ "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 "\"
Name=\ "Button_number\" value=\ "\" ></td>\n<td> <input Type=button "\"
Name=\ "Button_number\" value=\ "\" ></td>\n<td> <input Type=button "\"
Name=\ "Button_number\" value=\ "\" ></td>\n<td> <input Type=button "\"
Name=\ "Button_number\" value=\ "\" ></td>\n<td> <input Type=button "\"
Name=\ "Button_number\" value=\ "\" ></td>\n<td> <input Type=button "\"
Name=\ "Button_number\" value=\ "\" ></td>\n<td> <input Type=button "\"
Name=\ "Button_number\" value=\ "\" ></td>\n<td> <input Type=button "\"
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=\" Toggle large/lowercase \ "
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=\ "OK \"
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> Soft Keyboard </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:
Copy Code code as follows:
#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 "Song Body", Tahoma; COLOR: #
}
DIV {} {
Font:px "Song Body", Tahoma; COLOR: #
}
TD {} {
Font:px "Song Body", Tahoma; COLOR: #
}
SPAN {} {
Font:px "Song Body", Tahoma; COLOR: #
}
SELECT {} {
Font:px "Song Body", Tahoma; COLOR: #
}
P {} {
Font:px "Song Body", 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 "Song Body", 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
}
Want to restore the case, but also afraid of trouble friends, you can leave email, will be sent to your mailbox! The level is limited, cannot write much advanced
And a strong theoretical article, can only send some practical things to everyone.
Ps: A Monday bo, work too busy, too little time!
Small keyboard Local Download Download this file large keyboard local download Download this file
