看完教程写的~主要是box-shadow……
<!DOCTYPE <a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a>> <html> <!-- Created using jsbin.com Source can be edited via http://jsbin.com/acurec/123/edit --> <head> <meta charset=utf-8 /> <title>Calculator</title> <style id="jsbin-css"> div,span{ margin:0;padding:0; font-weight:bold; font: bold 16px Arial, sans-serif; /*禁止选中文本*/ -moz-user-select:none; -webkit-user-select:none; -o-user-select:none; user-select:none; } body{ background:radial-gradient(circle,#fff,#aaa); background:-webkit-radial-gradient(circle,#fff,#aaa); background:-o-radial-gradient(circle,#fff,#aaa); background:-moz-radial-gradient(circle,#fff,#aaa); background-size:cover; } #calculator{ width:325px; height:auto; margin:100px auto; padding:20px; background:linear-gradient(#9dd2ea, #8bceec); background:-o-linear-gradient(#9dd2ea, #8bceec); background:-webkit-linear-gradient(#9dd2ea, #8bceec); background:-moz-linear-gradient(#9dd2ea, #8bceec); border-radius:5px; box-shadow:0 7px 8px #0000ff } .keys,.head{overflow:hidden;} .keys span,.clear{ float:left; width:66px; height:40px; margin:0 5px 10px 8px; text-align:center; line-height:40px; border-radius:3px; background:#eee; box-shadow:0 5px 1px #999; cursor:pointer; transition:all 0.3s ease; } .keys span:hover{ background:#87cefa; box-shadow:0 5px 1px #1e90ff; color:#fff; } .keys .sign{ background:#fffacd; } .clear{ float:left; background:#ffb6c1; box-shadow:0 5px 1px #ff86c1; } .clear:hover{ background:#ff96a1; box-shadow:0 5px 1px #ff4691; color:#fff; } .show{ width:213px; height:40px; float:right; margin:0 16px 5px 0; border-radius:3px; background:#999; font-size:20px; line-height:40px; text-align:right; padding-right:10px; box-shadow:inset 0 4px 5px #333; } </style> </head> <body> <div id="calculator"> <div class="head"> <span class="clear">c</span> <div class="show"></div> </div> <div class="keys"> <span>7</span> <span>8</span> <span>9</span> <span class="sign">+</span> <span>4</span> <span>5</span> <span>6</span> <span class="sign">-</span> <span>1</span> <span>2</span> <span>3</span> <span class="sign">*</span> <span>0</span> <span>.</span> <span>=</span> <span class="sign">/</span> </div> </div> <script> window.onload=function() { var oShow=getByClass("calculator","show")[0]; var aNum=document.getElementById("calculator").getElementsByTagName("span"); for(var i=0,iLen=aNum.length;i<iLen;i++) { aNum[i].onclick=function() { var oShowVal=oShow.innerHTML; var oNumVal=this.innerHTML; var num1,num2=null; num1=oShowVal; //判断按键 if(oNumVal=="c") { oShow.innerHTML=""; } else if(oNumVal=="=") { var oResult=eval(oShowVal); oShow.innerHTML=oResult; } else { oShow.innerHTML+=oNumVal; } } } } function getByClass(root,sClass) { var obj=document.getElementById(root); var arr=[]; var aItems=obj.getElementsByTagName("*"); for(var i=0;i<aItems.length;i++) { if(aItems[i].className==sClass) { arr.push(aItems[i]); } } return arr; } </script> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]