今天小酌一杯，起了点点飞智，想用HTML/CSS/JS来山寨一个mac系统自带的计算器。先给自己树立两个标杆：
【像众泰学习】外观、功能像素级拷贝为主，兼顾山寨气质。
【像泽野螳螂学习】原曲不使用。（努力做到不借鉴任何现成的方案）
废话不多说，现在开始。
首先，以下是原软件的截图。
来分析一下颜色：
标题栏的三个按钮目前暂无用处，暂时先不考虑。
不考虑毛玻璃效果，我无意中截到的单色背景是#292929，字符颜色#ffffff。姑且先用这个。
功能键区（AC、+/-、%）背景色#d6d6d6，字符颜色#000000。
数字键区（0-9和小数点）背景色#e0e0e0。字符颜色#000000。
运算符（+、-、*、/、=）背景色#f5923e，字符颜色#ffffff。
全界面框线颜色#181818。
按键区框线颜色#8e8e8e。
以及动画效果：
由于数字显示区是毛玻璃的，因此背景是随时变化的，这里放弃了。
按下鼠标键时，功能键区背景色颜色变为#a9a9a9，字符不变色。
按下鼠标键时，数字键区背景色颜色变为#b2b2b2，字符不变色。
按下鼠标键时，运算符区背景色颜色变为#c2732f，字符颜色变为#555555。
然后测量一下界面的大小：（我这个屏幕是Retina屏，计算出的像素数应用到实际界面要除以2。）
整个界面（含框线）宽466像素，高642像素。
整个界面的边框宽度均为1像素，表格四个圆角半径10像素。
按键分割线宽度2像素。
数字显示区和按键区之间分割线宽度为0。
按键区4列不等宽，不含分割线的宽度分别为112、114、114、118像素，是不是有点诡异。
按键区5行也不等高，不含分割线前4行的高度为94像素，最后一行高96像素。
接下来是界面字体。（字体我很难做到像素级匹配）
整体采用了San Francisco字体。
数字显示区字体是细字体，按钮区是常规字体。
字号大小：功能键区<数字键区<运算符区。
数字键区的字符太长放不下时会自动压缩大小。
下面操练起来吧。
首先，不考虑任何格式因素，先画一个结构相符的表格。在这个表格里实现这个计算器就可以。
<table> <tr><td id="display" colspan="4">0</td></tr> <tr> <td>AC</td> <td>+/-</td> <td>%</td> <td>➗</td> </tr> … <tr> <td colspan="2">0</td> <td>.</td> <td>=</td> </tr> </table>