Ejemplo de código de interfaz de usuario de calculadora HTML

441 programme

Abrir en el editor Publica tu código

Ejemplo de código de interfaz de usuario de calculadora HTML

Recomendado

12 May 2026

Cargador WebGL de Baldi's Basics Plus

16 January 2026

Reproductor de juegos Flash con emulador Ruffle

24 January 2025

Un código de sahrawilouay

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
body{
background-color: aquamarine;
  display: flex;
    justify-content: center;
    align-items: center;
}
  .di{
    width: 270px;
    background-color: rgb(31, 29, 29);
    height: 400px;

}
  .egale{
        padding: 20px;
    background-color: green;
    border-radius: 20px;
    margin: 5px;
  }
  input{
    width: 250px;
    height: 20px;
    margin: 5px;
  }
  .operation{
    padding: 20px;
    background-color: orange;
    border-radius: 20px;
    margin: 5px;

}
  .efface{
 background-color: red;
 width: 125px;
 border-radius: 20px;
 height: 20px;
  margin: 5px;
  text-align: center;
  }
  button{
    background-color: black;
    color: white;
    padding: 20px;
    border-radius: 20px;
     margin: 5px;
  }
</style>
</head>
<body>
  <div class="di">
  <input type="text" >
  <br>
   <button class="efface">c</button>
   <button class="operation">/</button>
   <button class="operation">*</button>
   <br>
   <button>9</button>
   <button>8</button>
   <button>7</button>
   <button class="operation">+</button>
<br>
   <button>6</button>
   <button>5</button>
   <button>4</button>
   <button class="operation">-</button>
<br>
   <button>3</button>
   <button>2</button>
   <button>1</button>
   <button class="egale">=</button>
<br>
<button>0</button>
<button>.</button>
</div>
</body>
</html>

CSS