1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 4 <title>百度输入法</title> 5 <style type="text/css"> 6 body,ul,li,button{margin:0;padding:0;} 7 body{font:12px/1.5 Tahoma;} 8 ul{list-style-type:none;} 9 button{cursor:pointer;} 10 11 #outer{width:70px;margin:10px auto;} 12 #ime{margin-top:5px;background:#fff;border:1px solid #9a99ff;display:none;} 13 #ime li{width:100%;line-height:24px;display:inline-block;vertical-align:top;} 14 #close{border-top:1px solid #9a99ff;} 15 #ime li a{color:#00c;padding:0 5px;display:block;text-decoration:none;} 16 #ime li a:hover{background:#d9e1f6;} 17 </style> 18 </head> 19 <body> 20 <div id="outer"> 21 <button>输入法</button> 22 <ul style="display:none;" id="ime"> 23 <li><a href="javascript:;">手写</a></li> 24 <li><a href="javascript:;">拼音</a></li> 25 <li id="close"><a href="javascript:;">关闭</a></li> 26 </ul> 27 </div> 28 <script type="text/javascript"> 29 window.onload = function(){ 30 var button = document.getElementsByTagName("button")[0]; 31 var ime = document.getElementById("ime"); 32 var oclose = document.getElementById("close"); 33 button.onclick = function(){ 34 //这个表达式请注意看.. 35 // 36 ime.style.display = ime.style.display == "block" ? "none" : "block"; 37 }; 38 oclose.onclick = function(){ 39 ime.style.display = "none"; 40 } 41 42 43 44 45 } 46 </script> 47 </body> 48 </html>