首页计算器html网页制作

计算器html网页制作

时间: 2023-12-19 10:06:30 浏览: 67

以下是一个简单的计算器HTML网页制作的示例： ```html <!DOCTYPE html> <html> <head> <title>计算器</title> <style type="text/css"> #calculator { width: 300px; height: 400px; margin: 0 auto; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; } #screen { width: 100%; height: 60px; background-color: #f5f5f5; border: 1px solid #ccc; text-align: right; font-size: 24px; padding: 10px; box-sizing: border-box; margin-bottom: 10px; } .row { display: flex; flex-wrap: wrap; margin-bottom: 10px; } .col { flex: 1; margin-right: 10px; } .col:last-child { margin-right: 0; } .btn { width: 100%; height: 50px; background-color: #fff; border: 1px solid #ccc; font-size: 20px; cursor: pointer; box-sizing: border-box; } .btn:hover { background-color: #f5f5f5; } .btn:active { background-color: #ccc; } </style> </head> <body> <div id="calculator"> <div id="screen"></div> <div class="row"> <div class="col"><div class="btn">7</div></div> <div class="col"><div class="btn">8</div></div> <div class="col"><div class="btn">9</div></div> <div class="col"><div class="btn">+</div></div> </div> <div class="row"> <div class="col"><div class="btn">4</div></div> <div class="col"><div class="btn">5</div></div> <div class="col"><div class="btn">6</div></div> <div class="col"><div class="btn">-</div></div> </div> <div class="row"> <div class="col"><div class="btn">1</div></div> <div class="col"><div class="btn">2</div></div> <div class="col"><div class="btn">3</div></div> <div class="col"><div class="btn">*</div></div> </div> <div class="row"> <div class="col"><div class="btn">0</div></div> <div class="col"><div class="btn">.</div></div> <div class="col"><div class="btn">=</div></div> <div class="col"><div class="btn">/</div></div> </div> </div> </body> </html> ```

阅读全文