adobe dreamweaver
新建html文档。
准备好需要用到的字体图标。
书写hmtl代码。
书写css代码。.container { width: 320px; padding: 12px; }body { min-height: 100%; min-height: 100vh; display: flex; align-items: center; }button { width: 65px; height: 45px; font-family: 'Roboto', sans-serif; border: none; border-radius: 5px; outline: none !important; position: relative; transition: all 0.1s; }button.operator-group, button#equal { font-size: 30px !important; }button.operand-group, button#clear, button#ans { font-size: 20px !important; }#display1 { font-family: 'Roboto', sans-serif; font-weight: 400 !important; font-size: 20px !important; height: 50px; }.button-row { margin-top: 12px; }form { width: 294px; border-radius: .25rem;}form input { background-color: inherit; border: none; width: 294px; margin: 0 auto; display: block; }.container-light { background-color: #cfd8dc; border: 1px solid #cfd8dc; }.form-light { background-color: #eceff1; box-shadow: 0 0 0 0.1rem rgba(176, 190, 197, .5); }.form-input-light { color: #263238; }.operand-group-light { background-color: #90a4ae; border-color: #90a4ae; color: black; box-shadow: 0px 5px 0px #6b8694; /* 12% darker than bg */ }.operand-group-light:hover { background-color: #78909c; border-color: #607d8b; box-shadow: 0px 5px 0px #576b75; /* 14% darker than bg */ }.operand-group-light:active { background-color: #607d8b; background-color: #607d8b; box-shadow: 0px 2px 0px #495f69; /* 11% darker than bg */ top: 3px; }.operator-group-light { background-color: #546e7a; border-color: #546e7a; color: #ffffff; box-shadow: 0px 5px 0px #3f525a; /* 10% darker than bg */ }.operator-group-light:hover { background-color: #455a64; border-color: #37474f; box-shadow: 0px 5px 0px #2a363c; /* 13% darker than bg */ }.operator-group-light:active { background-color: #37474f; border-color: #37474f; box-shadow: 0px 2px 0px #1f292d; /* 11% darker than bg */ top: 3px; }.clear-light { background-color: #f44336; border-color: #f44336; color: #ffffff; box-shadow: 0px 5px 0px #c2160a; color: #ffffff; }.clear-light:hover { background-color: #e53935; border-color: #d32f2f; box-shadow: 0px 5px 0px #b51a17; }.clear-light:active { background-color: #d32f2f; border-color: #d32f2f; box-shadow: 0px 2px 0px #a82424; top: 3px; }.ans-light, .backspace-light { background-color: #ff9800; border-color: #ff9800; color: #ffffff; box-shadow: 0px 5px 0px #cc7a00; color: #ffffff; }.ans-light:hover, .backspace-light:hover { background-color: #fb8c00; border-color: #f57c00; box-shadow: 0px 5px 0px #b36200; }.ans-light:active, .backspace-light:active { background-color: #f57c00; border-color: #f57c00; box-shadow: 0px 2px 0px #b35900; top: 3px; }.equal-light { background-color: #4caf50; border-color: #4caf50; color: #ffffff; box-shadow: 0px 5px 0px #3e8e41; color: #ffffff; }.equal-light:hover { background-color: #43a047; border-color: #388e3c; box-shadow: 0px 5px 0px #357e38; }.equal-light:active { background-color: #388e3c; border-color: #388e3c; box-shadow: 0px 2px 0px #245b27; top: 3px; }
书写并添加js代码。
代码整体结构。
查看效果。