鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。

下载大键盘: 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

1window.onload=

2function()

3{

4password1=null;

5initCalc();

6}

7var password1;

8var CapsLockValue=0;

9var checkSoftKey;

10function setVariables() {

11tablewidth=630;

12tableheight=20;

13if (navigator.appName == "Netscape") {

14horz=".left";

15vert=".top";

16docStyle="document.";

17styleDoc="";

18innerW="window.innerWidth";

19innerH="window.innerHeight";

20offsetX="window.pageXOffset";

21offsetY="window.pageYOffset";

22}

23else {

24horz=".pixelLeft";

25vert=".pixelTop";

26docStyle="";

27styleDoc=".style";

28innerW="document.body.clientWidth";

29innerH="document.body.clientHeight";

30offsetX="document.body.scrollLeft";

31offsetY="document.body.scrollTop";

32}

33}

34function checkLocation() {

35if (checkSoftKey) {

36objectXY="softkeyboard";

37var availableX=eval(innerW);

38var availableY=eval(innerH);

39var currentX=eval(offsetX);

40var currentY=eval(offsetY);

41x=availableX-tablewidth+currentX;

42y=currentY;

43evalMove();

44}

45setTimeout("checkLocation()",0);

46}

47function evalMove() {

48eval(docStyle + objectXY + styleDoc + vert + "=" + y);

49}

50self.onError=null;

51currentX = currentY = 0;

52whichIt = null;

53lastScrollX = 0; lastScrollY = 0;

54NS = (document.layers) ? 1 : 0;

55IE = (document.all) ? 1: 0;

56function heartBeat() {

57if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }

58if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }

59if(diffY != lastScrollY) {

60percent = .1 * (diffY - lastScrollY);

61if(percent > 0) percent = Math.ceil(percent);

62else percent = Math.floor(percent);

63if(IE) document.all.softkeyboard.style.pixelTop += percent;

64if(NS) document.softkeyboard.top += percent;

65lastScrollY = lastScrollY + percent;}

66if(diffX != lastScrollX) {

67percent = .1 * (diffX - lastScrollX);

68if(percent > 0) percent = Math.ceil(percent);

69else percent = Math.floor(percent);

70if(IE) document.all.softkeyboard.style.pixelLeft += percent;

71if(NS) document.softkeyboard.left += percent;

72lastScrollX = lastScrollX + percent; } }

73function checkFocus(x,y) {

74stalkerx = document.softkeyboard.pageX;

75stalkery = document.softkeyboard.pageY;

76stalkerwidth = document.softkeyboard.clip.width;

77stalkerheight = document.softkeyboard.clip.height;

78if( (x > stalkerx && x stalkery && y < (stalkery+stalkerheight))) return true;

79else return false;}

80function grabIt(e) {

81checkSoftKey = false;

82if(IE) {

83whichIt = event.srcElement;

84while (whichIt.id!=null&&whichIt.id.indexOf("softkeyboard") == -1) {

85whichIt = whichIt.parentElement;

86if (whichIt == null) { return true; } }

87if(whichIt.style!=null){

88whichIt.style.pixelLeft = whichIt.offsetLeft;

89whichIt.style.pixelTop = whichIt.offsetTop;

90}

91currentX = (event.clientX + document.body.scrollLeft);

92currentY = (event.clientY + document.body.scrollTop);

93} else {

94window.captureEvents(Event.MOUSEMOVE);

95if(checkFocus (e.pageX,e.pageY)) {

96whichIt = document.softkeyboard;

97StalkerTouchedX = e.pageX-document.softkeyboard.pageX;

98StalkerTouchedY = e.pageY-document.softkeyboard.pageY;} }

99return true; }

100function moveIt(e) {

101if (whichIt == null) { return false; }

102if(IE) {

103if(whichIt.style!=null){

104newX = (event.clientX + document.body.scrollLeft);

105newY = (event.clientY + document.body.scrollTop);

106distanceX = (newX - currentX); distanceY = (newY - currentY);

107currentX = newX; currentY = newY;

108whichIt.style.pixelLeft += distanceX;

109whichIt.style.pixelTop += distanceY;

110if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;

111if(whichIt.style.pixelLeft document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;

113if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;

114event.returnValue = false;

115}

116} else {

117whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);

118if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;

119if(whichIt.top = (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;

121if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;

122return false;}

123return false; }

124function dropIt() {whichIt = null;

125if(NS) window.releaseEvents (Event.MOUSEMOVE);

126return true; }

127if(NS) {window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);

128window.onmousedown = grabIt;

129window.onmousemove = moveIt;

130window.onmouseup = dropIt; }

131if(IE) {

132document.onmousedown = grabIt;

133document.onmousemove = moveIt;

134document.onmouseup = dropIt; }

135var style1="";

141document.write(style1);

142document.write("

 博客园 密码输入器                

\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 \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 \n \n \n \n \n \n \n \n \n \n \n\n

");

143

144function addValue(newValue)

145{

146if (CapsLockValue==0)

147{

148var str=Calc.password.value;

149if(str.length

150{

151Calc.password.value += newValue;

152}

153if(str.length<=password1.maxLength)

154{

155password1.value=Calc.password.value;

156}

157}

158else

159{

160var str=Calc.password.value;

161if(str.length

162{

163//Calc.password.value += newValue.toUpperCase();

164Calc.password.value += newValue;

165}

166if(str.length<=password1.maxLength)

167{

168password1.value=Calc.password.value;

169}

170}

171}

172

173function setpassvalue()

174{

175var longnum=Calc.password.value.length;

176var num

177num=Calc.password.value.substr(0,longnum-1);

178Calc.password.value=num;

179var str=Calc.password.value;

180password1.value=Calc.password.value;

181}

182

183function OverInput()

184{

185var str=Calc.password.value;

186password1.value=Calc.password.value;

187closekeyboard();

188Calc.password.value="";

189password1.readOnly=1;

190}

191

192function closekeyboard(theForm)

193{

194softkeyboard.style.display="none";

195if(null!=unhideSelect){

196unhideSelect();

197}

198}

199

200function showkeyboard()

201{

202randomNumberButton();

203var th = password1;

204var ttop = th.offsetTop;

205var thei = th.clientHeight;

206var tleft = th.offsetLeft;

207var ttyp = th.type;

208while (th = th.offsetParent){ttop+=th.offsetTop; tleft+=th.offsetLeft;}

209softkeyboard.style.top = ttop+thei+16;

210softkeyboard.style.left = tleft-100;

211softkeyboard.style.display="block";

212password1.readOnly=1;

213password1.blur();

214document.all.useKey.focus();

215if(null!=hideSelect){

216hideSelect();

217}

218}

219

220function setCapsLock()

221{

222if (CapsLockValue==0)

223{

224CapsLockValue=1

225}

226else

227{

228CapsLockValue=0

229}

230}

231function setCalcborder()

232{

233CalcTable.style.border="1px solid #B5ADF1"

234}

235function setHead()

236{

237CalcTable.cells[0].style.backgroundColor="#B5ADF1"

238}

239function setCalcButtonBg()

240{

241for(var i=0;i

242{

243if(Calc.elements[i].type=="button"&&Calc.elements[i].bgtype!="1")

244{

245if(Calc.elements[i].bgtype=="2"){

246Calc.elements[i].className="btn_num";

247}else{

248Calc.elements[i].className="btn_letter";

249}

250var str1=Calc.elements[i].value;

251str1=str1.trim();

252if(str1.length==1)

253{

254}

255var thisButtonValue=Calc.elements[i].value;

256thisButtonValue=thisButtonValue.trim();

257if(thisButtonValue.length==1)

258{

259Calc.elements[i].onclick=

260function ()

261{

262var thisButtonValue=this.value;

263thisButtonValue=thisButtonValue.trim();

264thisButtonValue=jiamiMimaKey(thisButtonValue);

265addValue(thisButtonValue);

266}

267Calc.elements[i].ondblclick=

268function ()

269{

270var thisButtonValue=this.value;

271thisButtonValue=thisButtonValue.trim();

272thisButtonValue=jiamiMimaKey(thisButtonValue);

273addValue(thisButtonValue);

274}

275}

276}

277}

278}

279function initCalc()

280{

281setCalcborder();

282setHead();

283setCalcButtonBg();

284}

285String.prototype.trim = function()

286{

287return this.replace(/(^\s*)|(\s*$)/g, "");

288}

289var capsLockFlag;

290capsLockFlag=true;

291function capsLockText()

292{

293if(capsLockFlag)

294{

295for(var i=0;i="a"&&char<="z"&&char.length==1)

300{

301Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)-32)+" "

302}

303}

304}

305else

306{

307for(var i=0;i="A"&&char<="Z"&&char.length==1)

312{

313Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)+32)+" "

314}

315}

316}

317capsLockFlag=!capsLockFlag;

318}

319

320function randomNumberButton(){

321var a = new Array(10);

322a[0]=0;a[1]=1;a[2]=2;a[3]=3;a[4]=4;a[5]=5;a[6]=6;a[7]=7;a[8]=8;a[9]=9;

323var randomNum;

324var times=10;

325for(var i=0;i<10;i++){

326randomNum = parseInt(Math.random()*10);

327var tmp=a[0];

328a[0]=a[randomNum];

329a[randomNum]=tmp;

330}

331Calc.button_number0.value=" "+a[0]+" ";

332Calc.button_number1.value=" "+a[1]+" ";

333Calc.button_number2.value=" "+a[2]+" ";

334Calc.button_number3.value=" "+a[3]+" ";

335Calc.button_number4.value=" "+a[4]+" ";

336Calc.button_number5.value=" "+a[5]+" ";

337Calc.button_number6.value=" "+a[6]+" ";

338Calc.button_number7.value=" "+a[7]+" ";

339Calc.button_number8.value=" "+a[8]+" ";

340Calc.button_number9.value=" "+a[9]+" ";

341}

342

343function hideSelect(){

344var i=0;

345while(i

346document.getElementsByTagName("select")[i].style.visibility = "hidden";

347i=i+1;

348}

349}

350

351function unhideSelect(){

352var i=0;

353while(i

354document.getElementsByTagName("select")[i].style.visibility = "visible";

355i=i+1;

356}

357}

358

359

360function jiamiMimaKey(newValue) {

361 if (typeof(b) == "undefined" || typeof(ifUseYinshe) == "undefined" || ifUseYinshe == 0) {return newValue;}

362 var everyone = '';

363 var afterPass = '';

364 for (var i=0;i

365 everyone = newValue.charAt(i);

366 for (var j =0;j<((b.length)/2);j++) {

367 if (everyone == b[2*j]) {

368 afterPass = afterPass + b[2*j+1];

369 break;

370 }

371 }

372 }

373 newValue= afterPass;

374 jiami = 1;

375 return afterPass;

376}

Default.aspx:

1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"

2 ResponseEncoding="GB2312" %>

3

4

5

6

7

8

9

10

11

12

13

14

15 onblur="tipLogPwd.className='tip_off'"

16 onclick="password1=this;showkeyboard();this.readOnly=1;Calc.password.value=''"

17 style="width: 278px">

18

19

20

21

22

softkey.css:

1#Page_content {}{

2 PADDING-RIGHT: 20px; PADDING-LEFT: 20px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 860px; PADDING-TOP: 0px

3}

4#Header {}{

5 BACKGROUND: url(../images5/blue/header_bg.gif) repeat-x left top

6}

7#Page_left {}{

8 FLOAT: left; MARGIN: 12px 0px 15px; WIDTH: 660px

9}

10#Page_right {}{

11 FLOAT: right; MARGIN: 15px 0px; WIDTH: 180px

12}

13#Footer {}{

14 PADDING-RIGHT: 2px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 20px; COLOR: #aaa; PADDING-TOP: 5px; TEXT-ALIGN: left

15}

16.Area_title {}{

17 PADDING-RIGHT: 2px; BORDER-TOP: #69c 2px solid; MARGIN-TOP: 10px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 13px; PADDING-BOTTOM: 7px; COLOR: #004d99; PADDING-TOP: 7px

18}

19.Area_content {}{

20 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; PADDING-TOP: 3px

21}

22.Area_button {}{

23 MARGIN-TOP: 7px; PADDING-LEFT: 90px

24}

25.Area_button IMG {}{

26 VERTICAL-ALIGN: 5px

27}

28.float_left {}{

29 FLOAT: left

30}

31.float_right {}{

32 FLOAT: right

33}

34.content_title {}{

35 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 8px; COLOR: #999; PADDING-TOP: 16px

36}

37.relative {}{

38 PADDING-RIGHT: 0px; BORDER-TOP: #69c 2px solid; PADDING-LEFT: 0px; LIST-STYLE-POSITION: inside; BACKGROUND: none transparent scroll repeat 0% 0%; LIST-STYLE-IMAGE: url(../images5/blue/icon_list.gif); PADDING-BOTTOM: 0px; MARGIN: 7px 0px 0px; PADDING-TOP: 3px

39}

40.relative LI {}{

41 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; PADDING-BOTTOM: 1px; MARGIN: 3px 0px 0px; COLOR: #777; PADDING-TOP: 1px; BORDER-BOTTOM: #ddd 1px solid

42}

43 {}{

44 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px

45}

46BODY {}{

47 BACKGROUND: #eee

48}

49BODY {}{

50 FONT: 12px "宋体",Tahoma; COLOR: #505050

51}

52DIV {}{

53 FONT: 12px "宋体",Tahoma; COLOR: #505050

54}

55TD {}{

56 FONT: 12px "宋体",Tahoma; COLOR: #505050

57}

58SPAN {}{

59 FONT: 12px "宋体",Tahoma; COLOR: #505050

60}

61SELECT {}{

62 FONT: 12px "宋体",Tahoma; COLOR: #505050

63}

64P {}{

65 FONT: 12px "宋体",Tahoma; COLOR: #505050

66}

67IMG {}{

68 BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px

69}

70A {}{

71 COLOR: #039; TEXT-DECORATION: none

72}

73A:hover {}{

74 COLOR: #b20; TEXT-DECORATION: none

75}

76INPUT {}{

77 FONT: 12px "宋体",Tahoma

78}

79INPUT.button {}{

80 BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(../images5/blue/button_bg.gif) #a74d4a repeat-x left top; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 1px; CURSOR: hand; COLOR: #fff; MARGIN-RIGHT: 10px; PADDING-TOP: 4px; BORDER-RIGHT-WIDTH: 0px

81}

82INPUT.button_dis {}{

83 BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 1px; CURSOR: hand; COLOR: #fff; MARGIN-RIGHT: 10px; PADDING-TOP: 4px; BORDER-RIGHT-WIDTH: 0px

84}

85UL {}{

86 PADDING-LEFT: 17px; FONT-WEIGHT: bold; LIST-STYLE-POSITION: outside; BACKGROUND: url(../images5/icon_ul.gif) no-repeat left top; LIST-STYLE-IMAGE: url(../images5/blue/icon_list.gif); MARGIN: 0px; COLOR: #999

87}

88LI {}{

89 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; PADDING-BOTTOM: 1px; MARGIN: 3px 0px 0px; COLOR: #505050; PADDING-TOP: 1px

90}

91.clear {}{

92 CLEAR: both

93}

94.top_margin {}{

95 MARGIN: 46px 8px 0px 0px

96}

97.text_bold {}{

98 FONT-WEIGHT: bold

99}

100.step_on .text_content {}{

101 COLOR: #555

102}

103.text_content {}{

104 PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; BORDER-BOTTOM: #eee 1px solid

105}

106.text_red {}{

107 COLOR: #b20

108}

109A.text_red:hover {}{

110 COLOR: #777

111}

112.req {}{

113 FONT-WEIGHT: bold; COLOR: #b20

114}

115.info {}{

116 COLOR: #777

117}

118.dark {}{

119 COLOR: #555

120}

121.text_big {}{

122 FONT-SIZE: 14px; COLOR: #444; LINE-HEIGHT: 20px

123}

124.big {}{

125 FONT-SIZE: 14px

126}

127.reg_flow {}{

128 PADDING-RIGHT: 0px; PADDING-LEFT: 20px; FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND: #f0f0f0; PADDING-BOTTOM: 3px; MARGIN: 16px 8px 12px; COLOR: #777; PADDING-TOP: 5px

129}

130.reg_title {}{

131 PADDING-RIGHT: 0px; PADDING-LEFT: 26px; FONT-WEIGHT: bold; FONT-SIZE: 13px; BACKGROUND: url(../images5/icon_reg.gif) no-repeat left top; PADDING-BOTTOM: 4px; COLOR: #004d99; PADDING-TOP: 4px

132}

133.flow_focus {}{

134 FONT-WEIGHT: bold; COLOR: #b20

135}

136.flow_undo {}{

137 COLOR: #777

138}

139.flow_done {}{

140 COLOR: #777

141}

142.image_safe {}{

143 PADDING-LEFT: 78px; BACKGROUND: url(../images5/icon_safe_big.gif) no-repeat left top

144}

145.text_success {}{

146 BORDER-RIGHT: #69c 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #69c 1px solid; PADDING-LEFT: 134px; BACKGROUND: url(../images5/blue/icon_success.gif) #f0f7ff no-repeat 5px 50%; PADDING-BOTTOM: 35px; BORDER-LEFT: #69c 1px solid; PADDING-TOP: 35px; BORDER-BOTTOM: #69c 1px solid

147}

148.text_notice {}{

149 BORDER-RIGHT: #69c 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #69c 1px solid; PADDING-LEFT: 134px; BACKGROUND: url(../images5/blue/icon_gantan.gif) #f0f7ff no-repeat 5px 50%; PADDING-BOTTOM: 35px; BORDER-LEFT: #69c 1px solid; PADDING-TOP: 35px; BORDER-BOTTOM: #69c 1px solid

150}

151.reg_info {}{

152 BORDER-RIGHT: #69c 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #69c 1px solid; PADDING-LEFT: 45px; BACKGROUND: url(../images5/blue/icon_info.gif) #f0f7ff no-repeat 7px 50%; PADDING-BOTTOM: 5px; BORDER-LEFT: #69c 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #69c 1px solid

153}

154.step_on .tip_off {}{

155 BORDER-RIGHT: #d0e0ef 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #d0e0ef 1px solid; PADDING-LEFT: 14px; BACKGROUND: url(../images5/blue/arr_tip_off.gif) #fff no-repeat 4px 6px; PADDING-BOTTOM: 1px; BORDER-LEFT: #d0e0ef 1px solid; COLOR: #555; PADDING-TOP: 4px; BORDER-BOTTOM: #d0e0ef 1px solid

156}

157.tip_off {}{

158 PADDING-RIGHT: 3px; PADDING-LEFT: 15px; BACKGROUND: url(../images5/blue/arr_tip_off.gif) #fff no-repeat 4px 6px; PADDING-BOTTOM: 2px; COLOR: #777; PADDING-TOP: 5px

'http://www.knowsky.com

159}

160.tip_on {}{

161 BORDER-RIGHT: #090 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #090 1px solid; PADDING-LEFT: 14px; BACKGROUND: url(../images5/blue/arr_tip_on.gif) #e9fde9 no-repeat 4px 6px; PADDING-BOTTOM: 1px; BORDER-LEFT: #090 1px solid; COLOR: #444; PADDING-TOP: 4px; BORDER-BOTTOM: #090 1px solid

162}

163.tip_on IMG {}{

164 VERTICAL-ALIGN: top

165}

166.tip_off IMG {}{

167 VERTICAL-ALIGN: top

168}

169.step_on {}{

170 PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #f4f4f4; PADDING-BOTTOM: 0px; PADDING-TOP: 0px

171}

172.step_off {}{

173 PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; PADDING-TOP: 0px

174}

175.step_on .content_title {}{

176 COLOR: #444

177}

178P {}{

179 MARGIN: 6px 0px; TEXT-INDENT: 2em

180}

181.btn_letter {}{

182 BORDER-LEFT-COLOR: #7b9ebd; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#DDDCDC); BORDER-BOTTOM-COLOR: #5c08b2; COLOR: #075bc3; BORDER-TOP-COLOR: #7b9ebd; BORDER-RIGHT-COLOR: #5c08b2

183}

184.btn_num {}{

185 BORDER-LEFT-COLOR: #7ebf4f; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-BOTTOM-COLOR: #7ebf4f; COLOR: black; BORDER-TOP-COLOR: #7ebf4f; BORDER-RIGHT-COLOR: #7ebf4f

186}

187 想还原事例，又怕麻烦的朋友，也可以留下Email,将发到您邮箱！水平有限，写不出多高深和理论性较强的文章，只能发些实用的东西给大家.

Ps:一周一博，工作太忙，时间太少！

http://www.cnblogs.com/sccxszy/archive/2007/01/28/632502.html