HTML/JS转换工具
Unicode编码转换
当前位置:首页 > WEB前端 > CSS-HTML > 

css+html写的仿windows XP计算器

来源:IT技术网编辑:秩名发布于:2017-02-09人围观

无聊随便写了个,没有使用图片,除了个别细节,基本和xp自带的计算器样式非常接近。有空再添加计算功能,具体代码如下:

  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">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. </head>
  7.  
  8. <style>
  9. *{
  10. margin:0;
  11. padding:0;
  12. -webkit-text-size-adjust: none;
  13. font-family:宋体;
  14. }
  15. #jisuanqi{
  16. margin:100px auto;
  17. width:260px;
  18. height:243px;
  19. background:#0058EE;
  20. border:1px solid #00C;
  21. border-radius:5px 5px 0 0;
  22. }
  23.  
  24. #title{
  25. height:28px;
  26. }
  27. #title h1{
  28. height:28px;
  29. line-height:28px;
  30. font-size:13px;
  31. font-weight:bold;
  32. text-indent:10px;
  33. color:#fff;
  34. text-shadow:1px 1px 0px #333;
  35. }
  36. #title h1 span{
  37. font-family:Verdana, Geneva, sans-serif;
  38. margin-left:130px;
  39. height:28px;
  40. line-height:28px;
  41. font-size:10px;
  42. font-weight:nomorl;
  43. color:#fff;
  44. text-shadow: none;
  45. }
  46.  
  47. #content{
  48. margin:0 auto;
  49. padding-left:10px;
  50. padding-right:10px;
  51. width:234px;
  52. height:212px;
  53. background:#ECE9D8;
  54. }
  55.  
  56. #menu{
  57. position:relative;
  58. width:254px;
  59. height:20px;
  60. }
  61. #menu .ul1{
  62. position:absolute;
  63. float:left;
  64. height:20px;
  65. overflow:hidden;
  66. cursor:pointer;
  67. }
  68. #menu .ul1:hover{
  69. height:60px;
  70. overflow:hidden;
  71. background:#ECE9D8;
  72. border:1px solid #ddd;
  73. }
  74. #menu .ul2{
  75. position:absolute;
  76. float:left;
  77. left:50px;
  78. height:20px;
  79. overflow:hidden;
  80. cursor:pointer;
  81. }
  82. #menu .ul2:hover{
  83. height:60px;
  84. overflow:hidden;
  85. background:#ECE9D8;
  86. border:1px solid #ddd;
  87. }
  88. #menu .ul3{
  89. position:absolute;
  90. float:left;
  91. left:100px;
  92. height:20px;
  93. overflow:hidden;
  94. cursor:pointer;
  95. }
  96. #menu .ul3:hover{
  97. height:60px;
  98. overflow:hidden;
  99. background:#ECE9D8;
  100. border:1px solid #ddd;
  101. }
  102.  
  103. #menu li{
  104. list-style:none;
  105. font-size:12px;
  106. margin-right:3px;
  107. line-height:20px;
  108. height:20px;
  109. }
  110. #menu li a{
  111. display:block;
  112. width:50px;
  113. height:20px;
  114. line-height:20px;
  115. text-align:center;
  116. }
  117. #menu li a:hover{
  118. background:#2F6CBF;
  119. color:#fff;
  120. }
  121. #textfield{
  122. margin:22px auto 2px;
  123. width:225px;
  124. height:18px;
  125. line-height:18px;
  126. direction:rtl;
  127. outline:none;
  128. font-size:12px;
  129. padding-right:5px;
  130. }
  131.  
  132. #left{
  133. margin-top:10px;
  134. float:left;
  135. width:40px;
  136. height:150px;
  137. }
  138.  
  139. #block{
  140. margin:0 auto;
  141. width:22px;
  142. height:22px;
  143. border:2px inset #ccc;
  144. }
  145.  
  146. #right{
  147. margin-top:10px;
  148. margin-right:6px;
  149. float:right;
  150. width:200px;
  151. height:160px;
  152. }
  153.  
  154. .box{
  155. margin:5px auto 0 2px;
  156. width:34px;
  157. height:26px;
  158. font-size:12px;
  159. color:#ff0000;
  160. }
  161. .box:hover{
  162. font-size:12px;
  163. color:#ff0000;
  164. }
  165. .box:active{
  166. font-size:12px;
  167. color:#ff0000;
  168. }
  169.  
  170. .box2{
  171. float:left;
  172. margin-right:4px;
  173. width:60px;
  174. height:26px;
  175. font-size:12px;
  176. color:#ff0000;
  177. }
  178. .box2:hover{
  179. font-size:12px;
  180. color:#ff0000;
  181. }
  182. .box2:active{
  183. font-size:12px;
  184. color:#ff0000;
  185. }
  186.  
  187. .box3{
  188. float:left;
  189. margin:5px 4px 0 0;
  190. width:34px;
  191. height:26px;
  192. font-size:12px;
  193. color:#0000FF;
  194. }
  195. .box3:hover{
  196. font-size:12px;
  197. color:#0000FF;
  198. }
  199. .box3:active{
  200. font-size:12px;
  201. color:#0000FF;
  202. }
  203.  
  204. .clear{
  205. clear:both;
  206. }
  207. </style>
  208.  
  209.  
  210. <script>
  211. function zero(){
  212. document.getElementById("textfield").value='';
  213. }
  214.  
  215.  
  216. </script>
  217.  
  218. <body>
  219.  
  220.  
  221.  
  222. <div id="jisuanqi">
  223.     
  224.      <div id="title">
  225.         <h1>计算器<span>by menglong</span></h1>
  226.         </div>
  227.         
  228.         <div id="content">
  229.         
  230.         <div id="menu">
  231.         <ul class="ul1">
  232.           <li><a>编辑(E)</a></li>
  233.           <li><a>复制(C)</a></li>
  234.           <li><a>粘贴(P)</a></li>
  235.         </ul>
  236.         
  237.         <ul class="ul2">
  238.           <li><a>查看(V)</a></li>
  239.           <li><a>标准(T)</a></li>
  240.           <li><a>科学(S)</a></li>
  241.         </ul>
  242.         
  243.         <ul class="ul3">
  244.           <li><a>帮助(H)</a></li>
  245.           <li><a>主题(H)</a></li>
  246.           <li><a>关于(A)</a></li>
  247.         </ul>
  248.         
  249.         <input type="text" id="textfield" value=""   />
  250.         
  251.         <div id="left">
  252.         
  253.          <div id="block"></div>
  254.             
  255.             <input type="button" value="MC" class="box"  />
  256.             <input type="button" value="MR" class="box"  />
  257.             <input type="button" value="MS" class="box"  />
  258.             <input type="button" value="M+" class="box"  />
  259.         
  260.         </div>
  261.       
  262.         <div id="right">
  263.         
  264.             <input type="button" value="Backspace" class="box2"  />
  265.             <input type="button" value="CE" class="box2"  />
  266.             <input type="button" value="清零" class="box2"  onclick="zero()" />
  267.             
  268.             <input type="button" value="7" class="box3"  />
  269.             <input type="button" value="8" class="box3"  />
  270.             <input type="button" value="9" class="box3"  />
  271.             <input type="button" value="/" class="box3"  />
  272.             <input type="button" value="sqrt" class="box3"  />
  273.             
  274.             <input type="button" value="4" class="box3"  />
  275.             <input type="button" value="5" class="box3"  />
  276.             <input type="button" value="6" class="box3"  />
  277.             <input type="button" value="*" class="box3"  />
  278.             <input type="button" value="%" class="box3"  />
  279.             
  280.             <input type="button" value="1" class="box3"  />
  281.             <input type="button" value="2" class="box3"  />
  282.             <input type="button" value="3" class="box3"  />
  283.             <input type="button" value="-" class="box3"  />
  284.             <input type="button" value="1/x" class="box3"  />
  285.             
  286.             <input type="button" value="0" class="box3"  />
  287.             <input type="button" value="+/-" class="box3"  />
  288.             <input type="button" value="." class="box3"  />
  289.             <input type="button" value="+" class="box3"  />
  290.             <input type="button" value="=" class="box3"  />
  291.         
  292.         
  293.         </div>
  294.         
  295.         
  296.         <div class="clear"></div>
  297.         
  298.         </div>
  299.         
  300.         </div>
  301.     
  302.     
  303.     </div>
  304.  
  305. </body>
  306. </html>
织梦二维码生成器

与相关的文章
有时间的话来看看IT界的突发事件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片