当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Js之软键盘实现(js源码)

Javascript
jQuery生成asp.net服务器控件的代码
javascript 实现的完全兼容鼠标滚轴缩放图片的代码
JavaScript学习笔记(十七)js 优化
使用SyntaxHighlighter实现HTML高亮显示代码的方法
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
利用jQuery 实现GridView异步排序、分页的代码
jquery.lazyload 实现图片延迟加载jquery插件
Lazy Load 延迟加载图片的 jQuery 插件
jquery 插件实现图片延迟加载效果代码
javascript小数计算出现近似值的解决办法
jquery1.4后 jqDrag 拖动 不可用
jquery 应用代码 方便的排序功能
选择TreeView控件的树状数据节点的JS方法(jquery)
jquery 图片Silhouette Fadeins渐显效果
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
javascript 同时在IE和FireFox获取KeyCode的代码
js 键盘记录实现(兼容FireFox和IE)
javascript 函数速查表
jQuery AnythingSlider滑动效果插件
经典海量jQuery插件 大家可以收藏一下

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 46 ::
收藏到网摘: n/a

鉴于安全性的考虑,不少网站在登录输入密码时都采用了软键盘,避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求,就分享给大家了,贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大,只需要数字小键盘的朋友,可参考代码精简。
下载大键盘: 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:一周一博,工作太忙,时间太少!
小键盘本地下载下载文件 下载此文件 大键盘本地下载下载文件 下载此文件